Whats the best way to resize all the elements in the silverlight canvas on resize?

Question

Hi,

I just started learning SL. I have tried to resize all the elements inside the canvas on its resize. But i cant find the right way.

this is what i did

1. Iterate throgh the all child elements in canvas
2. calaculate the scale X & Y based on the new size
3. And multiply the scale values with each elements size properties

But in SL3.0 i dont find any size properties in UIelement to set the new size. below the sample code

    private void testCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        var scaleX = e.NewSize.Width / e.PreviousSize.Width;
        var scaleY = e.NewSize.Height / e.PreviousSize.Height;

        for (int i = 0; i < testCanvas.Children.Count; i++)
        {
            UIElement ui = testCanvas.Children[i];
            // but no ui.width or ui.height
        }
    }

Also i cant able to find an option to move each element to the new position relative to the size changed canvas...

can someone point me the right direction..

Update:

I wanted to achieve something like this in MSCUI .. For more clarity i have added some screenshots

This is how initial screen looks.

And on expanding widget, it gets zoomed and other widgets shrink

I only need to do the zooing part. any ideas??

Cheers

RameshVel

Answer 1

Instead of resizing the elements yourself, you should put them in a grid and let the size of the elements be relative to the size of the cell (i.e. set margins on the element). When the grid is resized, the elements are moved and resized.

Answer 2

Use the GetLeft(), GetRight(), GetTop() and GetBottom() methods passing the child UIElement.

private void testCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var scaleX = e.NewSize.Width / e.PreviousSize.Width;
    var scaleY = e.NewSize.Height / e.PreviousSize.Height;

    for (int i = 0; i < testCanvas.Children.Count; i++)
    {
        UIElement ui = testCanvas.Children[i];

        double left = Canvas.GetLeft(ui);
        double top = Canvas.GetTop(ui);
        double right = Canvas.GetRight(ui);
        double bottom = Canvas.GetBottom(ui);
    }
}

Answer 3

The MSCUI demo is built by Martin grayson and he has published his Drag Dock control here: http://mightymeaty.members.winisp.net/blacklight.silverlight/ (there are also now some other TileView controls available now from Telerik and Infragistics that also perform the same cool layout functions). However by default this does not support automatic content resizing.

Luckily there is a new control in the November 2009 Toolkit: ViewBox that will do what you need with minimal code.

There is a demo of this at http://silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html. The ViewBox demo is at the bottom of the menu on the left.

Toolkit can be downloaded from http://silverlight.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=36060

HTH,
Mark

Answer 4

Thanks for the information about the ViewBox. This has put me on a very close track to achieving the MSCUI scaling effect. However, I am having a little trouble controlling the initial size of the ViewBox. I want the ViewBox 'fill' the parent UserControl, but this doesn't happen with the following snippet. Setting a height and width on the ViewBox has no impact either.

<Toolkit:Viewbox x:Name="ViewBox" Stretch="UniformToFill" StretchDirection="DownOnly">
    <Grid x:Name="LayoutRoot" Background="Gray" >

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Rectangle Width="100" 
                       Height="100"
                       Fill="Red"
                       Grid.Column="0"
                       VerticalAlignment="Top" 
                       HorizontalAlignment="Left" />

            <Rectangle Width="60"
                       Height="60" 
                       Fill="Yellow"
                       Grid.Column="1"
                       VerticalAlignment="Top"
                       HorizontalAlignment="Right" />
    </Grid>
</Toolkit:Viewbox>

I decided to use the SizeChanged event of the UserControl to set the size of the ViewBox's child - the Grid.

private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
     double height = Application.Current.Host.Content.ActualHeight;
     double width = Application.Current.Host.Content.ActualWidth;

     this.LayoutRoot.Height = height;
     this.LayoutRoot.Width = width;

     this.SizeChanged -= new SizeChangedEventHandler(MainPage_SizeChanged);
}

This works initially, but then as the browser is re-sized, the result is undesirable. Specifically, the yellow Rectangle disappears when the height becomes larger than the width. Any thoughts on what I could be doing incorrectly?

Thanks!