ViewBox in Silverlight

Silverlight ViewBox control defines a content decorator that can stretch and scale a single child to fill the available space. This article demonstrates how to use a ViewBox control.

ViewBox is a control available in WPF. The same control is also provided in Silverlight as well. ViewBox defines a content decorator that can stretch and scale a single child to fill the available space.

Setup

1. Create a new project.
    
2. Add a reference to the Silverlight Controls assembly (Microsoft.Windows.Controls.dll) which can be downloaded at http://codeplex.com/Silverlight.
   
   
   
   
    
3. Look under "Custom Controls" In the Blend Asset Library.
   
   
    
4. Add a ViewBox to the Page.
   
   

And here's the XAML we got:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="SilverlightControlsNovember2008.ViewBoxPage"
    Width="640" Height="480" xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"xmlns:SilverlightControlsNovember2008="clr-namespace:SilverlightControlsNovember2008">
    <Grid x:Name="LayoutRoot" Background="#FFFFFFFF">
        <controls:Viewbox Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100"/>
    </Grid></UserControl>

ViewBox with Fill Stretch

Stretch.Fill tells the ViewBox -" "make sure this content takes up the entire width & height of the Viewbox".

1. Add two ViewBoxes of different dimensions say, 100*100 and 200* 200 and a button in each



2. Make the stretch property in miscellaneous tab of both the ViewBox to 'Fill'



3. The button takes the whole size of the view box



ViewBox with Uniform Stretch

The Viewbox is smart enough how to scale up/down the controls in it without distorting them or changing their ratio.

Here it fills the width but not the height.



The horizontal and vertical alignments can be changed as the height is not filled.

ViewBox with Uniform and Fill Stretch

The Button takes the whole size of the ViewBox but keeps original width and size. So it gets clipped towards the right.



ViewBox with None Stretch

The buttons have the original size. If smaller than the view box it will be visible else clipped based on its top-right corner.

ViewBox with StretchDirection Up & Down

We might sometime want to limit the scaling Viewbox does to only enlarge or shrink the controls in it.

Setting the StretchDirection to UpOnly says the Viewbox can only enlarge controls in it.

Setting the StretchDirection to DownOnly says the Viewbox can only shrink controls in it.

By default StretchDirection is set to Both which states that both Up & Down are acceptable.



Stretch=Fill, StretchDirection=Both



we've seen this already, this is standard Fill.

Stretch=Fill, StretchDirection=UpOnly  - Here the control scales up if it is smaller than the size of the ViewBox
Stretch=Fill, StretchDirection=DownOnly - If the content of the viewbox is larger it scales down to the size of the ViewBox
Stretch=Uniform, StretchDirection=Both - This is the default condition of the ViewBox. This is similar to Normal Uniform fill that we've previously seen.



Similarly watch out

1. Stretch=Uniform, StretchDirection=UpOnly
2. Stretch=Uniform, StretchDirection=DownOnly
3. Stretch=UniformToFill, StretchDirection=Both
4. Stretch=UniformToFill, StretchDirection=DownOnly
5. Stretch=UniformToFill, StretchDirection=UpOnly

When to use a ViewBox

1. ViewBox just does a lot of complex math on what ScaleTransform to use
   
           <Button Height="50" Width="50" Content="Button" RenderTransformOrigin="0.5,0.5" Margin="99,0,0,96" VerticalAlignment="Bottom" d:LayoutOverrides="Width, Height" HorizontalAlignment="Left">
               <Button.RenderTransform>
                   <TransformGroup>
                       <ScaleTransform ScaleX="5" ScaleY="5"/>
                       <SkewTransform/>
                       <RotateTransform/>
                       <TranslateTransform/>
                   </TransformGroup>
               </Button.RenderTransform>
           </Button>
   
   The code above and below gives the same output. Try it out!!!!
   
   <controls:Viewbox Height="250" Width="250" d:LayoutOverrides="Width,
   HorizontalMargin" HorizontalAlignment="Right" Margin="0,230,0,0">
       <Button Height="50" Width="50" Content="Button"/>
   </controls:Viewbox>
    
2. Also when you want to resize a page without distortig the controls ViewBox is the best option With Stretch="Fill" and StretchDirection="Both"

Happy Coding!