Discorax's House of w00t

Have you ever wanted to get the Bitmap Data (pixels) of a Visual (Canvas, Grid, etc) in WPF or Silverlight from memory and without having to add it to the root visual. After doing a lot of trial and error here is a quick piece of code and a sample project that can help you accomplish exactly that.

There are plenty of cool ways to extend this project including some cool transition and other code based animations. Just let your imagination go wild!

First, create a new WPF Application in Visual Studio or [download a sample project]. In your Window1.xaml give the Grid an x:Name value. You'll use this to add your elements later on.
<br /><Grid x:Name="VisualRoot"></Grid><br />

Now lets add a new Page to our project. We're going to alter the Page to extend a Canvas rather than a Page for no other reason then when I'm creating animations I prefer to work with a Canvas. We are going to put some visuals onto our canvas. In the sample it's a blue square with a red circle next to it and a little bit of text below it. It could be any UIElement including another Canvas/Grid, Images, Text anything.

In our Window1.xaml code behind we're going to create an instance of our Canvas1 and call the methods to have WPF Measure, Arrange, and UpdateLayout in memory. We need to call these methods in order for WPF to figure out where all the pixels are positioned in our visual to return accurate Bitmap Data. These methods are called automatically when you add a Visual to WPF using the Visual.Children.Add() method.

The CreateBitmapSourceFromVisual function was taken from a project on CodePlex, unfortunately I can't recall the link. I'll add it here if I run across it again. That function takes a Visual and returns a BitmapSource object with the pixel data. It automatically updates the dots per inch (DPI) to 96, which is required for WPF to render properly).

Here is the code behind from our root Window.

<br />using System;<br />using System.Collections.Generic;<br />using System.Linq;<br />using System.Text;<br />using System.Windows;<br />using System.Windows.Controls;<br />using System.Windows.Data;<br />using System.Windows.Documents;<br />using System.Windows.Input;<br />using System.Windows.Media;<br />using System.Windows.Media.Imaging;<br />using System.Windows.Navigation;<br />using System.Windows.Shapes;<br /><br />namespace BitmapFromVisualSample<br />{<br /> /// <summary><br /> /// Interaction logic for Window1.xaml<br /> /// </summary><br /> public partial class Window1 : Window<br /> {<br /> public Window1()<br /> {<br /> InitializeComponent();<br /> Canvas1 myVisualElement = new Canvas1();<br /> myVisualElement.Measure(new System.Windows.Size(0, 0));<br /> myVisualElement.Arrange(new Rect(new System.Windows.Size(0, 0)));<br /> myVisualElement.UpdateLayout();<br /> // Note the myVisualElement is never added<br /><br /> // Use myVisualElement to get our Bitmap Source Data.<br /> BitmapSource myVisualElementBitmapData = CreateBitmapSourceFromVisual(300, 500, myVisualElement, false);<br /> // Create an Image for your Bitmap Source<br /> Image myImage = new Image();<br /> // use our Bitmap Data <br /> myImage.Source = myVisualElementBitmapData;<br /><br /> // Add our Image to the Grid<br /> VisualRoot.Children.Add(myImage);<br /> }<br /> public BitmapSource CreateBitmapSourceFromVisual(Double width, Double height, Visual visualToRender, Boolean undoTransformation)<br /> {<br /> if (visualToRender == null)<br /> {<br /> return null;<br /> }<br /> RenderTargetBitmap bmp = new RenderTargetBitmap(<br /> (Int32)Math.Ceiling(width),<br /> (Int32)Math.Ceiling(height),<br /> 96,<br /> 96,<br /> PixelFormats.Pbgra32);<br /> if (undoTransformation)<br /> {<br /> DrawingVisual dv = new DrawingVisual();<br /> using (DrawingContext dc = dv.RenderOpen())<br /> {<br /> VisualBrush vb = new VisualBrush(visualToRender);<br /> System.Windows.Point myPoint = new System.Windows.Point();<br /> dc.DrawRectangle(vb, null, new Rect(myPoint, new System.Windows.Size(width, height)));<br /> }<br /> bmp.Render(dv);<br /> }<br /> else<br /> {<br /> bmp.Render(visualToRender);<br /> }<br /> return bmp;<br /> <br /> }<br /> }<br />}<br /><br />



You can run the sample project and you will see the visual we created in Canvas1. We used the BitmapSource object of the Canvas1 as the Source of our Image. Note: we never added Canvas1 to the root visual, we simply created it in the code behind and retrieved the pixel data from that visual to use as on our Image. I leave it to you to play with this technology to create cool WPF/Silverlight animations.

[Download Source Code] as Visual Studio Project.

Labels: C#, Silverlight, WPF

Here is my last minute entry into the MIX09 10K Contest.





It's a standard spring loaded Node Tree, but the cool part is that each node has a random color value. As the nodes get close to each other they give off their color. You can click on any of the nodes to change the color or turn Popping on to have the computer do it for you.

We'll see what the community thinks!

This is my first Silverlight 2.0 project, but I have done a lot of work with WPF. And I have to say that the upgrades from Silverlight 1.0 to Silverlight 2.0 are night and day. I can imagine creating this exact same effect in Silverlight 1 would have taken much more than 10k and would have run slower, and not looked nearly as cool.

Considering the announcement of Silverlight 3.0 at MIX09 this year. I'm pretty excited to see what they are going to add. I'm praying for Text Anti-Aliasing and Video with Alpha Channel. If I get those two, Silverlight 3.0 will really give Flash a run for my development time.

See you at MIX!

Labels: Mix09, Silverlight

I recently ran across a bug where my Silverlight 1.0 content wasn't rendering 100% of the time in Internet Explorer 7. It took nearly two days of searching before I stumbled onto a solution through trial and error.

It turns out that if you're going to be toggling content visibility using CSS properties "display:none" and "display:block" then be aware that Internet Explorer has really wonky support for percentages used for width and height. It just doesn't seem to render all the content accurately. The hardest thing to figure out is why it works half the time and then doesn't the other half. This sucker was a pain to work through.

By default if you use the Silverlight 1.0 templates from Blend/VS2008 the createObjectEx function uses 100% for the height and width values of the Div containing your Silverlight Object. If you're having problems with Silverlight not rendering as you'd expect, try changing the width and height to a numeric value rather than a percentage. Here is the Default:

<br />Silverlight.createObjectEx({<br /> source: "Page.xaml",<br /> parentElement: document.getElementById("silverlightControlHost"),<br /> id: "SilverlightControl",<br /> properties: {<br /> width: "100%", // Default values are in percentage<br /> height: "100%", // Default values are in percentage<br /> framerate: "24",<br /> background:"white",<br /> isWindowless: "true",<br /> version: "1.0"<br /> },<br />

Here is it updated and working:
<br />Silverlight.createObjectEx({<br /> source: "Page.xaml",<br /> parentElement: document.getElementById("silverlightControlHost"),<br /> id: "SilverlightControl",<br /> properties: {<br /> width: "1200", // Changed value to be numeric matching Canvas dimensions<br /> height: "780", // Changed value to be numeric matching Canvas dimensions<br /> framerate: "24",<br /> background:"white",<br /> isWindowless: "true",<br /> version: "1.0"<br /> },<br />

As you can see I ONLY changed two things, but that made all the difference. Hopefully this tidbit of info will help others avoid spending tons of time trying to figure out why IE7 isn't rendering their Silverlight Objects properly.

Labels: CSS, Silverlight

I've been working to deploy a Silverlight 1.0 project using the Silverlight Streaming beta service and I wanted to call attention to a few things I learned that weren't explicitly mentioned in the Silverlight Streaming SDK.

1. Do no include an encoding type in your manifest.xml file. example: <?xml version="1.0" encoding="utf-8" ?>I can't confirm this 100% but I kept getting an error message on upload that says "The archive does not meet the criteria for valid applications. Refer to the SDK for detials." Once I removed the declaration I didn't receive the error again.


2. Do not include any HTML files in your zip file. While html is not included in the list of allowed file types most templates create one just make sure you don't include it in your zip archive


3. Make sure to remove any Thumbs.db files that may be hiding in your folders. These hidden files are created when you browse through your application with Mac OSX. You may have to enable hidden files to show before you can see that they are there, or look through your zip archive before you upload it. If you don't remove these you'll get the same "The archive does not meet the criteria for valid applications. Refer to the SDK for detials." error message. This one took me a while to figure out.


4. Adapting the app for Silverlight Streaming was a learning process. I started the project based on a default Silverlight Web Template from Blend. Because of this I had to alter a lot of my code so my app would work in an iframe on the Silverlight Streaming beta service. Documentation to adapt my code was scarce so I had to piece together a lot of different information from working Silverlight Streaming examples into a solution. The two biggest pieces of information I wanted to share can be found in this code:
   Silverlight.createDelegate = function(instance, method) {<br /> return function() {<br /> return method.apply(instance, arguments);<br /> }<br />}<br />function shellOnLoad(sender)<br />{<br /> var scene = new DPE_Tshirt.Shell(); <br /> var obj = document.getElementById("appId");<br /> scene.handleLoad(obj, null, sender); <br />}
   
   Inside the shellOnLoad function is where the handleLoad function is called. The handleLoad function is called when the Silverlight Object is created and the XAML is ready. This is very important and if you use a default template from Blend or Visual Studio you will use this function. Also you'll see the var obj line. This gives you the instance of the Silverlight OBJECT tag. Without it, you're handleLoad function will fail. The tricky part is figuring out what the OBJECT tag ID is. I had to use IE7 Developer Toolbar to explore the DOM of my iframe to find it. I think the default is "appId" so hopefully this bit of information will save other the headache of figuring out why their custom app won't run in an iframe.
   

Just wanted to share these tidbits of information so hopefully it will save others from having trouble using the Silverlight Streaming service.

Happy Coding.

Labels: Silverlight

I wasn't able to attend MIX08 this year, but I was really interested in hearing the keynote especially about Silverlight 2. Lucky for me the MIX Online Blog team had a live stream that I could watch. Scott Guthrie came on and started talking just about the time I showed up. He announced the Silverlight 2 Beta 1 which will be available later today.

I caught the tail end of the Internet Explorer 8 talk. www.microsoft.com/ie/ie8 link should be live later today.

Scott Guthrie talked in his keynote a lot about business and monetization of RIAs. How can you create ads, add Ads to your content (video, audio etc).

OMG there is a VS2008 Banner ad Template plugin that they demoed. It created all the crap that I've been working on for a month now that is all packaged up. Hummm...being on a cutting edge can be tough. Now how do I get a copy of this thing so our deployment can be simplified.

HOW DO I DEPLOY THE AD...Video.Show deploying a Silverlight app. Lots of tracking, lots of useful metrics to tell the ad manager about how effective the campaign is. Overlay adverts, Preroll, and much more. Encoder 2 has some potential for rich advertising scenarios.

Using DoubleClick and Silverlight...Ari Poparo talking about supporting media publishing and Silverlight. Has some rich reporting metrics but also cool because a dev can use these events to enhance the experience.

So far, all these cool features aren't available yet...blech.

NBCOlympics.com Site Showoff...Perkins Miller, Matthew Rex. 22,000 hours LIVE ONLINE VIDEO...holy crap! AND VOD (Video On Demand) That's a lot of content. Interactive Video and Video Delivery of the highest quality. DVR capabilities with the live video, rewind live stream and alerts to quickly switch between viewing experiences. Sharing these videos with others, that's pretty damn cool! Picture in Picture hahaha...this thing is completely over the top. Will this create a new standard? HAHAHA 3 different streams of the same event...see what other people are watching...and he just keeps going...gawd. I will have to check this out when it goes live. PLUS, how crazy good will this be for Silverlight deployment?!

Now Scott is going into RIAs. Cross-Browser, Cross-Platform .NET Framework.

• Multi_Language Support


• WPF UI Framework


• Robust Networking


• Integrated Data Support


• High Performance


• Small Download, Fast Install (Beta 1 - 4.6MB download)


• Rich UI Controls

the "dev-igner" very rich control templateing skinning model Custom Animations, Custom State Changes as well as CSS style changes. Making it very easy to customize and skin these controls. New VS2008 Silverlight support...boy I'd love to have that right now. So you can BUILD the application but then hand off to a designer to re-skin without having to write or update any code. YEAH new beta 1 updates for VS2008 and Expression Studio shipping later today.

Showcasing a new Mail Client from AOL using Silverlight to speed up performance, add custom-ability, create an experience much like a desktop application.

Create experiences that don't exist today...humm...lets see where this goes.

• Deep Zoom www.hardrock.com click on the memorabilia link.


• Aston Martin

.NET .NET .NET ...

Line of Business - Application Cirque de Soleil using WPF.

HAHA Scott Guthrie circus talent was juggling two balls, and he even dropped um. Funny!

OK..Moving on to Mobile Devices. Silverlight for mobile, bringing Silverlight anywhere, same code, assets skills and tools, Next generation mobile experiences.
Mixer - Darren David, real time mobile based application. Where's the party at...haha funny little app. Your cell phone telling you you've had too much to drink and then making you take a sobriety test...that's funny. Nokia delivers Silverlight...not just for Mobile PCs.

silverlight.weatherbug.com is the Silverlight application that will run native on Nokia phones, on the web, or on WPF on your desktop. Wow...dis on Flash Lite...they said it was too costly to build the weatherbug app. Wonder why that was?

Time to go get all the new updates to get started with Silverlight 2.

Labels: Mix08, programing, Silverlight

I'm using an iframe above to display the Silverlight. I got the code from Tim Sneath's Blog

This is using the new beta service Silverlight Streaming by Windows Live. It offers a free streaming and application hosting solution for delivering high-quality, cross-platform, cross-browser, media-enabled rich interactive applications (RIAs). With the ability to author content in Microsoft Expression Encoder and other third-party editing environments, Web designers maintain complete control of the user experience.

I think this is a brilliant idea. Microsoft has money, bandwidth, and servers. They can "afford" to host Silverlight apps for free because by doing so developers will create new, more engaging experiences using Silverlight. These Silverlight apps will get cooler as more people use them. The cool apps will be posted on blogs all over using the techniques highlighted below. Users hit the blog, see an "Install Silverlight" banner, they click it and boom, Silverlight market penetration. This service keeps the hosting costs down for devs while letting them explore Silverlight and help distribute the plugin to new users.

<br /><iframe src="http://silverlight.services.live.com/invoke/32/SlLogo/iframe.html" <br /> frameborder="0" width="260" height="110" scrolling="no" ></iframe><br />

Labels: Silverlight

I've been working hard the past few weeks on a Silverlight Rich Media Expandable Ad project at PBJS. The task at hand was to really push the Silverlight 1.0 plug-in to do things it wasn't really designed to do. The project was generally a success. What I'm planning on doing is putting up some code snippets that I used to create this project to hopefully shed some light on Silverlight 1.0 for anyone that is interested in learning it.

The project pays homage to the Justice D.A.N.C.E. Video but adds an interactive element where you can influence the animations on the shirts.



For now, please check out the project.Please leave comments about any questions you might have.

I'm also going to try to see if I can get everything working live on this page, just curious at how well the Silverlight 1.0 plug-in will work inside blogger.

update: didn't work so well. so please view the project here.

With Silverlight 2.0 coming out soon, I'm very interested in making use of some of the features that were lacking in the 1.0 release, namely Rich UI Controls, Alpha Channel support in video, and a more robust graphical rendering engine. This project did push me into learning more about XAML and how to manipulate it using JavaScript.

XAML is pretty slick. The biggest drawback that I've seen so far is it's a little verbose for markup. In many cases, characters could be left out and it would cut down significatly on the file size of the XAML. It also requires all data to be a string, which isn't very efficient in my option. In many cases, I had to convert values to and from integers and strings because I couldn't use integers as values for attributes like Canvas.Left and Opacity. That struck me as a little odd, but I digress.

The other thing is every time you enter a value for a color, XAML adds the Alpha value as well. In my opinion, the default should be full Opacity every time unless otherwise stated. So #ff0000 for Red rather than #ffff0000, which is two extra characters for every color. There is probably a good reason for this, but I don't know why.

The Code Trip is kicking off after Mix08. I'm really anxious to see what kind of apps the guys come up with. I think Silverlight does have a valuable place on the web, and I hope to see more cool implementations in the near future using the new 2.0 features. For now I've been reading Scott Guthrie's blog which has a preview of Silverlight 2.0. There will be a lot of Silverlight hype in the coming months, I'm looking forward to the dust settling and taking a calm look at the aftermath and enjoying some full featured Silverlight Apps.

Labels: Javascript, Mix08, PBJS, Silverlight

Silverlight is the ugly stepchild of WPF (Windows Presentation Format). Nearly all of the things that are not yet implemented and/or I need/would like as tools for building Silverlight projects work in WPF in some way. WPF appears to have been designed to create the ultimate interactive kiosk. It allows developers to make visually pleasing interfaces for their applications easily. It appears to me that WPF is where Microsoft's focus lies, and Silverlight is them taking WPF technology and trying to force the square peg into the round hole of the web. Not that the hole will be round forever, but that's a different story. However, I think Microsoft has failed to provide some major features that are expected in well designed web experiences and RIAs these days.

• More than Media - Rich Media Applications are not just media players. Silverlight, does a great job of being a cross-platform media player, but web developers have come to expect MUCH MORE, including Alpha Channel support and pre-compiled content. Silverlight isn't delivering these core elements, at least not in a useful way. And some of these still won't be included in the 2.0 release.


• File size - Doing some tests, I took some XAML and created a basic, no interaction layout and the XAML file was Ten Times (10x) as large as the same layout in a SWF. 224k (Silverlight, xaml) vs 22k (flash, swf). Quick downloads and instantaneous user gratification is expected these days. If you're site is slow, or takes forever to download users just go elsewhere. You can't afford to have bloated files, especially if they have less functionality.


• Slick Design at run-time - vector art is nice, but that's so 2004. The new design pallet is bitmap graphics and filters. You need to have gradient overlays with drop shadows, filter effects and pixel effects (especially blending modes) that can be manipluated at run-time. This falls back to the file size issue. Sure I can create all of these elements in another program, but then the user has to download them. If I can create them on the fly, then I don't need to pre-render them. Now I know you could do this in realtime using javascript and vector data, but the code to do that is big, and as a designer/developer, I'd rather just be able to call a filter function and be done.

Perhaps it's just a work-flow issue for me at this point. I can see how Silverlight has the potential to do many of the things I mention above. All of those things can be done easily in Flash. Right now, it takes me 3 times as long to do things using the Microsoft tools vs the Adobe tools. Granted I'm familiar with the Adobe tools, and I've put the time into learning them, but when Microsoft's marketing speech is, "we've integrated the work flow between designers and developers," I can't help thinking, "I'm a designer/developer and my work flow is more convoluted than ever using your tools."

I'm looking forward to Silverlight growing up and moving out of it's parents house. I don't want it to be the ugly stepchild anymore. Competition is good for the marketplace. If Silverlight can get some market share, it will push both Adobe and Microsoft to create better products, which is better for me.

Silverlight 2.0 should provide a lot of useful features, but until the ones I mentioned above are on par or better than Flash, Silverlight will remain inadequate and noncompetitive in the real world. The buzz will die down, just like it did with the Zune, and Vista...and what's left could be ugly. Integrated software and tools will only get Silverlight so far if the final delivery is inferior to it's competition. Adobe is working its butt off to integrate the crap out of Creative Suite. It's not there yet, but it's close. What's Microsoft doing to create a better overall experience for the user as compared to Flash?

Time will tell. Now I have to go and slap the ugly stepchild around a bit until it does what I want.

Labels: Flash, Silverlight, WPF

After three days of installing, uninstalling and fighting with my OS I was finally able to build a silverlight app today. We'll it's not actually an app because it doesn't do anything yet. I found myself cheering when I refreshed my browser and the rounded rectangle showed up.

It's a little daunting to think that i'll be building an fully interactive experience in less than two months. So far, beyond my problems with installing the microsoft trial applications, putting all the pieces together seem pretty straightforward. Just using dreamweaver to write everything out by hand. Slow going, but everything works. Next I'm going to dig into blend and encoder, since i'll likely need them to complete my project. At least using dreamweaver lets me develope on a my mac laptop while I'm sitting here on the bus.

Labels: Silverlight

Microsoft is doing a bus tour to highlight the new technologies and software they've developed for the interactive/web communities. It will highlight their new Expression Suite and Silverlight. The bus tour called "The Code Trip" is set to kick off in 2008.

I've been looking for some ways to learn Silverlight for work and this could be a good opportunity to jump right in. Of course it doesn't hurt that reposting this link on my blog should get me some swag!

My big reason for doing this is MS is one of our biggest clients. As a flash developer/designer I know we could get a lot more business from MS if we used Silverlight. I've told my boss I was willing to learn. I'm interested in learning about any plans MS has to cater to the Flash community since in some cases they are direct competitors. Will they try to convert them, work with them, create modules to allow Action Script and MXML to integrate or even be swappable with Visual Basic/C# and XAML. Now that would be cool!

Labels: Microsoft, Silverlight