Simplifying UIElementRenderer usage for full-page scenarios

  • Article

UPDATE: Please see this new post regarding UIElementRendererHelper as it includes a newer version of the code that is better suited for Windows Phone 7.1 SDK RTM.

With the new Windows Phone Developer Tools 7.1 Beta you can combine Silverlight and XNA Framework in a single app for Windows Phone. This is super powerful for enabling rich UI for games or for rendering 3D content for your application (among an almost infinite list of other ideas I'm sure you'll all come up with). The feature is very powerful, but I wanted to make it even easier for developers.

Built into the framework is the new UIElementRenderer type. This new object takes a Silverlight UIElement and renders it to an XNA Framework Texture2D object. You then can draw that Texture2D to the screen using the XNA Framework APIs (like SpriteBatch) which gives you Silverlight UI integrated into your XNA Framework rendered content. However there are a couple interesting things we found during development:

  1. There is a lot of boiler plate code when you desire to render the whole Silverlight page, such as hooking the LayoutUpdated event, calling Render on the UIElementRenderer, and the SpriteBatch code to draw it to the screen.
  2. Handling the TextBox control properly with the on screen keyboard is a bit of a chore, since you need to watch the page transform and adjust your rendering of the page directly.

Given these two concerns I cooked up a class called the UIElementRendererHelper. What the helper does is allow you to add full page rendering with UIElementRenderer, and handle all the page transform stuff, in just three lines of code for your page. Here's the basic usage:

 // Make a field for the helper
UIElementRendererHelper uiRenderer;

// Construct after enabling XNA rendering in OnNavigatedTo
uiRenderer = new UIElementRendererHelper(this, timer); // timer is a GameTimer instance

// Dispose before turning off XNA rendering in OnNavigatedFrom
uiRenderer.Dispose();

That's it. The constructor automatically hooks up all the proper events and even hooks the timer's Draw event so that it draws the scene for you. This does, of course, assume you've already hooked the Draw event for yourself, otherwise you'll have the Silverlight content rendering first. However if you put this into the default page template in the places described above, you'll be fine.

I've attached the sample to this post which contains the UIElementRendererHelper class and a very small sample app for its usage. This code is all licensed under the Microsoft Public License, so have at it. :)  UPDATE: Please see this new post regarding UIElementRendererHelper as it includes a newer version of the code that is better suited for Windows Phone 7.1 SDK RTM.