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.

<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. 

<Viewbox Height="200" HorizontalAlignment="Left" Margin="19,45,0,0"
Name="viewbox1" VerticalAlignment="Top" Width="300"
Stretch="Fill">
<Ellipse Width="100" Height="100" Fill="Red" />
</Viewbox>

Listing 1. Viewbox example

 

The output looks as in Figure 1 where the child control is filled in the Viewbox area.

 

 

 

Figure 1.

 

To test this code, create a WPF application using Visual Studio and place the code in Listing 2 inside the Grid panel. 

<Window x:Class="WPFViewBox.MainWindow"
        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"
        xmlns:local="clr-namespace:WPFViewBox"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Name="RootLayout">
        <Viewbox Height="200" HorizontalAlignment="Left" Margin="19,45,0,0"
         Name="viewbox1" VerticalAlignment="Top" Width="300"
         Stretch="Fill">
            <Ellipse Width="100" Height="100" Fill="Red" />
        </Viewbox>
    </Grid>
</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. 

private void CreateViewboxDynamically()
{
    // Create a Viewbox object
    Viewbox dynamicViewbox = new Viewbox();
    // Set StretchDirection and Stretch properties
    dynamicViewbox.StretchDirection = StretchDirection.Both;
    dynamicViewbox.Stretch = Stretch.Fill;
    dynamicViewbox.MaxWidth = 300;
    dynamicViewbox.MaxHeight = 200;

    // Create an Ellipse dynamically
    Ellipse redCircle = new Ellipse();
    redCircle.Height = 100;
    redCircle.Width = 100;
    redCircle.Fill = new SolidColorBrush(Colors.Red);

    // Set Viewbox.Child to Ellipse
    dynamicViewbox.Child = redCircle;

    // Add Viewbox to Grid panel's child
    RootLayout.Children.Add(dynamicViewbox);
}

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. 

public MainWindow()
{
    InitializeComponent();

    CreateViewboxDynamically();

}
private void CreateViewboxDynamically()
{
    // Create a Viewbox object
    Viewbox dynamicViewbox = new Viewbox();
    // Set StretchDirection and Stretch properties
    dynamicViewbox.StretchDirection = StretchDirection.Both;
    dynamicViewbox.Stretch = Stretch.Fill;
    dynamicViewbox.MaxWidth = 300;
    dynamicViewbox.MaxHeight = 200;

    // Create an Ellipse dynamically
    Ellipse redCircle = new Ellipse();
    redCircle.Height = 100;
    redCircle.Width = 100;
    redCircle.Fill = new SolidColorBrush(Colors.Red);

    // Set Viewbox.Child to Ellipse
    dynamicViewbox.Child = redCircle;

    // Add Viewbox to Grid panel's child
    RootLayout.Children.Add(dynamicViewbox);
}

Listing 4.

 

Summary

 

The code sample in this article demonstrates the use of XAML Viewbox element using C#.