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

4 Comments

Join the conversation! Your thoughts help the community grow.

Sachin Varkey5y ago
Hi, I have a viewbox with Grid as child. This Grid is separated into columns. Each columns size is * .If I place a gridsplitter in between this grid, the grid splitter is not working.But if I keep the size of grid as Auto then grid splitter is working fine.What could be the issue?
Yegor Ius6y ago
Hi! Looking for a way to control the shape of the ViewBox. E.g. is it possible to have a circular one, such that any zoom-in and zoom-out image manipulation stays with the circular boundary?
- Yegor Ius6y ago
  To answer my own q: What I really wanted was to control the shape of a Canvas so I used the Clip property: ImageCanvas.Clip = new EllipseGeometry(new Point(200, 200), 200, 200);
Yogi S8y ago
Very good Viewbox tutorial. Thank you