Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Introduction
In this article I will explain about the ViewBox control and how it comes in very handy while developing Silverlight applications. The ViewBox control was initially introduced with WPF. The same ViewBox functionality was made Silverlight compatible and it was included in the Silverlight toolkit. If you are using Silverlight 3.0 or prior versions then you need to import this control explicitly from the Silverlight toolkit, but with Silverlight 4.0 it is included by default i.e., If you create a Silverlight 4.0 application you can use the ViewBox control straight away by dragging and dropping it from the Visual Studio IDE toolbox.
I will also be creating a sample application to demonstrate the use of ViewBox control and explaining some important properties of the control. For the demo application I have used Visual Studio 2010 IDE and Silverlight 4.0.
What is a ViewBox control?
The Silverlight ViewBox control acts as a container control and helps in scaling or resizing its child controls in context to its own size. For example if the user shrinks or expands the browser then the ViewBox contents gets scaled themselves automatically. It can have any Silverlight control as its child element.
In real time the Silverlight ViewBox control would come to play when the developer wants to display some content without getting cut or truncated to the user even if the browser size is being changed. Normally in such scenarios without using a ViewBox control the content would get cut and will not provide a good user experience.
Fig 1.0
In Visual Studio 2010 IDE you can find the ViewBox control under the “All Silverlight Controls” section in the toolbox as shown in Fig 1.0.
Demo Application
In this section let us create a sample Silverlight 4.0 application and witness the features that the ViewBox control offers.
Create a Silverlight application named ViewBoxControlSample and in the MainPage.XAML place a TextBlock as shown below.
<UserControl x_Class=”ViewBoxControlSample.MainPage”
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”
d_DesignHeight=”300″ d_DesignWidth=”400″>
<Grid x_Name=”LayoutRoot” Background=”White”>
<TextBlock Text=”Text without viewbox control” FontSize=”25″></TextBlock>
</Grid>
</UserControl>
Now run the application and re-size the browser smaller than its initial size. The text will be truncated and shown as shown in Fig 2.0.
Fig 2.0
You can witness that the text is getting truncated as shown in the above image and now in the same MainPage.xaml we will use the ViewBox control and check the behavior. Below is the XAML code.
<Grid x_Name=”LayoutRoot” Background=”White”>
<Viewbox>
<TextBlock Text=”Text with viewbox control” FontSize=”25″></TextBlock>
</Viewbox>
</Grid>
Run the application–Fig 2.1 shows the output window.
Fig 2.1
Now shrink the browser size and see the content text is getting re-sized or scaled accordingly as shown in Fig 2.2.
Fig 2.2
ViewBox Stretch and StretchDirection properties
In this section let us check out the Stretch and StretchDirection properties.
1. Stretch: This specifies how the content should fit into the available space.
a. None: The content preserves its original size and nullifies the ViewBox effect.
b. Uniform: Using this property utilizes as much space as needed to show the whole content.
c. UniformToFill: The content is re-sized to fill the new dimensions but it preserves the aspect ratio. The source content would also be stripped to fit the destination dimensions.
d. Fill: The content fills the entire space but does not preserve the aspect ratio.
2. StretchDirection: This specifies how scaling should be applied to the ViewBox contents.
a. UpOnly: It re-sizes the contents only when the browser size is increased.
b. DownOnly: It re-sizes the contents only when the browser size is decreased.
c. Both: ViewBox can shrink or expand its contents.
Conclusion
Hope I have provided a good explanation about the Silverlight ViewBox control. The Silverlight ViewBox control is a very useful control which makes the user experience great if you know exactly where to use it. Please make use of the comments section to punch in your comments.
