Silverlight, custom controls and setting width and height

I guess it's just one of those facts of life that sometimes beta bits turn on you and bite you in the ass. I've been working on a set of charting-related custom controls for both WPF and Silverlight that would let you produce some nice looking sparklines and bullet graphs, and there were some issues in the Silverlight controls that had me stumped. I tried to make the code somewhat portable between WPF and Silverlight (not as easy a feat as one would think), and one of the latest problems I've run into is related to setting the Width and Height of my control in XAML.

As a basis for my work I'd been using one of the quickstarts at Silverlight.net, namely the on creating a custom control. This puppy was clearly written before the latest refresh of Silverlight 1.1 and the tools for Visual Studio 2008 beta 2.

I had my custom control shadow the width and height properties, like this:

        public virtual new double Height

        {

            get { return _implementationRoot.Height; }

            set

            {

                _implementationRoot.Height = value;

                UpdateLayout();

            }

        }


        public virtual new double Width

        {

            get { return _implementationRoot.Width; }

            set

            {

                _implementationRoot.Width = value;

                UpdateLayout();

            }

        }

Where _implementationRoot was declared as:

private FrameworkElement _implementationRoot;

and I was initializing it in the constructor of my custom control like this:

        public BulletGraph()

        {

            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("SilverlightBulletGraph.BulletGraph.xaml");

            _implementationRoot = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());

        }

The reason for doing this was that I wanted to be able to re-layout my control if its size changes. This should have been all fine and dandy, as it was all in line with what the sample from Microsoft was saying. But, when I was trying to perform a lot of layout magic that was needed in order for the bullet graph control I was trying to implement I noticed that Width and Height were never being set, despite the fact that I in the XAML file I was declaring them like this:

  <my:BulletGraph Width="300" Height="100"

                  Header="SalesSales" Scale="EUR"

                  Minimum="0" Maximum="150" TickFrequency="25"

                  Value="87" Target="100"

                  BadRange="50" SatisfactoryRange="80"/>

So, as it turns out, the Silverlight refresh and Visual Studio 2008 beta 2 (Orcas) has a bug in them (surprise, surprise!). The Width and Height never get called.

Unfortunately I kept trying to solve this on my own too long before relying on Google. If I'd done so I would have come across several pieces of advice, among those that of Jeff Prosise of Wintellect fame, who blogged about this in an article back in August.

Anyway, as it turns out, the advice given in the original article, is no longer valid for the refresh. Width and Height never gets set, and I ended up removing the properties. This way I can't achieve all of the behavior I was looking for, since if the size changes I won't find out. I'll wait for the next version of Orcas and the Silverlight tools, where I'm sure Microsoft has fixed this-

 

And, by the way, if you're wondering what all this bullet graph stuff is about I seriously recommend that you check out the writings of Stephen Few (who invented them), at Perceptual Edge or at wikipedia.

And the controls I've been making? I hope to polish them a little bit and post more about them during next week.

Comments

[venu]

Hi ,

Can i write single custom control for both WPF and Silverlight. If its possble. Can you give me one simple custom control like small button.

just little bit help to understand wrtting common custom controls for both the thecnology. :)

Thanks in advance.

[Sam]

Hello frnd

I was going thru ur blog and found that u have created some sort of charting control for ur application, I also need to develop an application using charts so if you can post sample code for the same then it would be a great help to me.

If possible Please send the code to my email cuul_sam@yahoo.com

thanks in advance

Sam