XAML  

XAML Viewbox Tutorial

ViewBox XAML Element
 
Most XAML elements do not support stretch and scale properties. ViewBox XAML element is used to add stretch and scale functionality to a XAML element. This article and code examples demonstrate how to stretch and scale a XAML element using XAML Viewbox element.
 
The following table describes the Viewbox properties.
 

Property

Description

Child

Represents the single child of a Viewbox element.

Stretch

Describes how content is resized to fill its allocated space. It has value None, Fill, Uniform, and UniformToFill.

StretchDirection

Gets or sets the StretchDirection, which determines how scaling is applied to the contents of a Viewbox. It has values Both, DownOnly, and UpOnly.
 
Note: A Viewbox element can have one child element only. By adding more than one child element to a Viewbox will throw an error.
 
The Viewbox element represents a WPF ViewBox control in XAML.
  1. <Viewbox />  
Viewbox has a Stretch property that defines how contents are fit in the space and its value can be Fill, None, Uniform or UniformToFill.
 
The code example in Listing 1 creates a Viewbox control and sets its stretch to fill its content, which is an Ellipse element. 
  1. <Viewbox Height="200" HorizontalAlignment="Left" Margin="19,45,0,0"     
  2. Name="viewbox1" VerticalAlignment="Top" Width="300"    
  3. Stretch="Fill">  
  4. <Ellipse Width="100" Height="100" Fill="Red" />  
  5. </Viewbox>  
Listing 1. Viewbox example
 
The output looks as in Figure 1 where the child control is filled in the Viewbox area.
 
XAML viewbox 
 
Figure 1.
 
To test this code, create a WPF application using Visual Studio and place the code in Listing 2 inside the Grid panel. 
  1. <Window x:Class="WPFViewBox.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:WPFViewBox"  
  7.         mc:Ignorable="d"  
  8.         Title="MainWindow" Height="450" Width="800">  
  9.     <Grid Name="RootLayout">  
  10.         <Viewbox Height="200" HorizontalAlignment="Left" Margin="19,45,0,0"     
  11.          Name="viewbox1" VerticalAlignment="Top" Width="300"    
  12.          Stretch="Fill">  
  13.             <Ellipse Width="100" Height="100" Fill="Red" />  
  14.         </Viewbox>  
  15.     </Grid>  
  16. </Window>  
Listing 2.
 
Dynamic Viewbox
 
The Viewbox class in C# represents a Viewbox control. To create a Viewbox dynamically, we can create a Viewbox object and set its properties. Then we can use the Viewbox.Child property to set the child of a Viewbox.
 
The following code example in Listing 3 creates a Viewbox dynamically and adds an Ellipse to the Viewbox at at run-time. 
  1. private void CreateViewboxDynamically()  
  2. {  
  3.     // Create a Viewbox object  
  4.     Viewbox dynamicViewbox = new Viewbox();  
  5.     // Set StretchDirection and Stretch properties  
  6.     dynamicViewbox.StretchDirection = StretchDirection.Both;  
  7.     dynamicViewbox.Stretch = Stretch.Fill;  
  8.     dynamicViewbox.MaxWidth = 300;  
  9.     dynamicViewbox.MaxHeight = 200;  
  10.   
  11.     // Create an Ellipse dynamically  
  12.     Ellipse redCircle = new Ellipse();  
  13.     redCircle.Height = 100;  
  14.     redCircle.Width = 100;  
  15.     redCircle.Fill = new SolidColorBrush(Colors.Red);  
  16.   
  17.     // Set Viewbox.Child to Ellipse  
  18.     dynamicViewbox.Child = redCircle;  
  19.   
  20.     // Add Viewbox to Grid panel's child  
  21.     RootLayout.Children.Add(dynamicViewbox);  
  22. }  
Listing 3.
 
Listing 4 is the complete example.
 
Cerate a WPF app using Visual Studio and call CreateViewboxDynamically() method in the constructor of the MainWindow. If you’re using the XAML Viewbox code, comment the XAML code. 
  1. public MainWindow()  
  2. {  
  3.     InitializeComponent();  
  4.   
  5.     CreateViewboxDynamically();  
  6.   
  7. }  
  8. private void CreateViewboxDynamically()  
  9. {  
  10.     // Create a Viewbox object  
  11.     Viewbox dynamicViewbox = new Viewbox();  
  12.     // Set StretchDirection and Stretch properties  
  13.     dynamicViewbox.StretchDirection = StretchDirection.Both;  
  14.     dynamicViewbox.Stretch = Stretch.Fill;  
  15.     dynamicViewbox.MaxWidth = 300;  
  16.     dynamicViewbox.MaxHeight = 200;  
  17.   
  18.     // Create an Ellipse dynamically  
  19.     Ellipse redCircle = new Ellipse();  
  20.     redCircle.Height = 100;  
  21.     redCircle.Width = 100;  
  22.     redCircle.Fill = new SolidColorBrush(Colors.Red);  
  23.   
  24.     // Set Viewbox.Child to Ellipse  
  25.     dynamicViewbox.Child = redCircle;  
  26.   
  27.     // Add Viewbox to Grid panel's child  
  28.     RootLayout.Children.Add(dynamicViewbox);  
  29. }  
Listing 4.
 
Summary
 
The code sample in this article demonstrates the use of XAML Viewbox element using C#.
 
 
 

Membership not found