Dynamically Resizing a Silverlight Control from Managed Code

I discovered recently that the root silverlight control is not available from managed code in the 1.1 alpha.  Microsoft intends to make it available and it will probably be there in the beta, but for those of us trying to manipulate our RIAs with information from the control before the beta hits, another solution is in order.

 

The way I solved this was by using JavaScript to call into my managed code.  The basic setup involved specifying [Scriptable] elements in the managed code, specifically the class that interprets the calls (for me this was my main handling class linked from the XAML) and any getters/setters and functions within that class you want to expose to JavaScript.  I exposed a width and height setter, a function to handle a resize event from the browser, as well as a “main” function to get the app running.  The last requirement is a registration of the variable name from which you can access the class from JavaScript.  To do this you use the WebApplication.Current.RegisterScriptableObject() static function call.  Incredibly intuitive!

 

Then in the JavaScript file, I registered an event to handle the post load of the Silverlight control.   Within that function I extract the width and height from the control and set them into the managed code.  Then I register an event on the control to receive resize events.  Finally I tell the managed application to begin execution.

 

When the browser is resized, my JavaScript handler cascades the information down into the managed code and the entire app resizes to fit into the browser properly.  Sort of the long way to go about doing something that should be fairly straightforward, but it works for now.

 

-Casey

Styled selected item in a ComboBox

For some reason Flex 2 does not automatically draw the icon of the selected item in a ComboBox. I found some discussion about how to implement this, and came up with a slightly different solution that I thought I would throw out there.

You want to start off with a ComboBox extension that has two private properties: a DisplayObject to reference the icon, and a Shape to house the icons mask. Override createChildren and add the mask as a child. Override measure and check for your icon, if it exists add its width to your measuredWidth. Finally, override updateDisplayList and do a check on the selectedItem property. If it has a valid icon property, instantiate it as you would a class and cast it to a DisplayObject, then assign it to you private icon reference. Draw a rectangle in you mask Shape using the unscaledWidth of the component minus the value of the arrowButtonWidth style as the width of the mask. Then move your text over to the right of the icon.

You should add some more code to ensure the mask gets cleared and that you reposition the text if you move to a selectedItem with no icon attached after viewing one that did have one, but other than that you are good to go.

-Casey