I had a nice long post typed out, and while attempting to make a small change to the code I was going to paste in, I ended up killing the debug process that I had the post opened in a new tab, so as much as I remember will have to be retyped:
Recently our Flash projects have been given a requirement that they resize to the browser. In the past, someone would pick a resolution (often times neglecting to account for the browser chrome) and the flash was done as a fixed width/height element. The last 2 projects I've worked with have been required to scale with the browser.
One such project is the same one that I've decided to prototype in Silverlight. It's the Donor Garden that we worked on for the National Marrow Donor Program® (which is a great organization, and you should really think about joining the registry and potentially saving someone's life!)
I really have taken for granted in the past 8 or so years that the browsers HTML rendering engine handles the repositioning of elements on a browser resize. I really haven't had to think about this problem since my VB 4/5/6 days and developing Windows apps. So tonight was a fun little stroll back down memory lane.
It's pretty straight forward, subscribe to the Canvas's SizeChanged event, and reposition/resize elements based on the new size. The SizeChangedEventArgs contains both the new size and the old size, although I am currently only using the NewSize to get the Width and Height.
Here's the start of my code:
private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Width < 778 || e.NewSize.Height < 450)
{
status.Text = "Elements need resized.";
}
if (e.NewSize.Width > GrassImage.Width)
{
GrassImage.Width = e.NewSize.Width;
}
GrassImage.SetValue(Canvas.TopProperty, e.NewSize.Height - GrassImage.Height - 32);
HeaderCanvas.Width = e.NewSize.Width;
FooterCanvas.SetValue(Canvas.TopProperty, e.NewSize.Height - 32);
FooterCanvas.Width = e.NewSize.Width;
}