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
- Create a new project.
- Add a reference to the Silverlight Controls assembly (Microsoft.Windows.Controls.dll) which can be downloaded at http://codeplex.com/Silverlight.
- Look under "Custom Controls" In the Blend Asset Library.
- 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
- Stretch=Uniform, StretchDirection=UpOnly
- Stretch=Uniform, StretchDirection=DownOnly
- Stretch=UniformToFill, StretchDirection=Both
- Stretch=UniformToFill, StretchDirection=DownOnly
- Stretch=UniformToFill, StretchDirection=UpOnly
When to use a ViewBox
- 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>
- 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!