UWP - Viewbox stretch example

UWP - Viewbox Stretch

The Viewbox class defines a content decorator that can stretch and scale a single child to fill the available space.

The following UWP application development tutorial will demonstrate how we can use Viewbox in an app. Here we mainly demonstrate the different Stretch modes of Viewbox control and their effect on child control.

The Viewbox class’s Stretch property gets or sets the Stretch mode, which determines how content fits into the available space. This property value is a Stretch mode, which determines how content fits in the available space. The default value of this property is Uniform.

The Stretch enum describes how content is resized to fill its allocated space. The Stretch enum available values are Fill, None, Uniform, and UniformToFill.

The Stretch Fill value defines the content as resized to fill the destination dimensions. The aspect ratio is not preserved.

The Stretch enum None value specifies the content preserves its original size. The Uniform value ensures the content is resized to fit in the destination dimensions while it preserves its native aspect ratio.

And lastly, the UniformToFill value is used to resize its content to fill the destination dimensions while it preserves its native aspect ratio. When the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

The Viewbox class’s StretchDirection property gets or sets the StretchDirection, which determines how scaling is applied to the contents of a Viewbox.

In the following UWP app development tutorial code, we put four Viewbox controls in the layout using XAML and we also set different Stretch modes for them. We programmatically add another Viewbox in the layout. We set this Viewbox control’s Stretch mode and other properties in the code.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="StackPanel1" 
        Margin="50" 
        Orientation="Vertical"
        Background="AliceBlue"
        Padding="50"
        >
        <!---
            Stretch
                Fill 
                    The content is resized to fill the destination dimensions.
                    The aspect ratio is not preserved.

                None 
                    The content preserves its original size.

                Uniform 
                    The content is resized to fit in the destination
                    dimensions while it preserves its native aspect ratio.
                    It is the default setting of Stretch.

                UniformToFill 
                    The content is resized to fill the destination dimensions while
                    it preserves its native aspect ratio. If the aspect ratio of the
                    destination rectangle differs from the source, the source
                    content is clipped to fit in the destination dimensions.
        -->
        <Viewbox MaxWidth="300" MaxHeight="100" Stretch="Fill" Margin="10">
            <Button Content="Stretch Fill"/>
        </Viewbox>
        <Viewbox MaxWidth="300" MaxHeight="100" Stretch="None" Margin="10">
            <Button Content="Strecth None"/>
        </Viewbox>
        <Viewbox MaxWidth="300" MaxHeight="100" Stretch="Uniform" Margin="10">
            <Button Content="Stretch Uniform"/>
        </Viewbox>
        <Viewbox MaxWidth="300" MaxHeight="100" Stretch="UniformToFill" Margin="10">
            <Button Content="UniformToFill"/>
        </Viewbox>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // Initialize a new Viewbox instance
            Viewbox viewbox = new Viewbox();

            // Set the Viewbox maximum width and height
            // This will resize the inside content
            viewbox.MaxWidth = 300;
            viewbox.MaxHeight = 100;

            // Set the margin of Viewbox
            viewbox.Margin = new Thickness(10);

            // Set the Viewbox Stretch programmatically
            viewbox.Stretch = Stretch.Fill;

            // Set the Viewbox Stretch direction
            viewbox.StretchDirection = StretchDirection.Both;

            // Initialize a new Button
            Button button = new Button();
            button.Content = "Stretch In Code";

            // Put the Button inside Viewbox
            viewbox.Child = button;

            // Finally, put the Viewbox on stack panel
            StackPanel1.Children.Add(viewbox);
        }
    }
}