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