ViewBox in WPF

Viewbox is simple but very useful control in WPF. ViewBox scale to fit its child element. It doesn't change the width or height of child element but it internally transforms child content. ViewBox can have only one child element.

Let’s have a look on below code snippet,

<Window x:Class="WpfApplication1.ViewBoxControl"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ViewBox Control" Height="300" Width="300">

    <Viewbox Name="viewBox"

             Stretch="Uniform"

             StretchDirection="Both">

        <Button Content="Click Me!" />

    </Viewbox>

</Window>

Viewbox contains two main properties Stretch and StretchDirection. Stretch will define how child element inside Viewbox will be stretched and StretchDirection defines Child element’s direction to scale UpOnly, DownOnly and Both.

Let’s check output with different values of stretch property.

<Viewbox Name="viewBox"

            Stretch="Fill"

            StretchDirection="Both">

    <Button Content="Click Me!" />

</Viewbox>

<Viewbox Name="viewBox"

            Stretch="UniformToFill"

            StretchDirection="Both">

    <Button Content="Click Me!" />

</Viewbox>

<Viewbox Name="viewBox"

            Stretch="None"

            StretchDirection="Both">

    <Button Content="Click Me!" />

</Viewbox>

Hope this small post helps you. Please feel free to write feedback/comments in comments section below.

See Also –

Transformations in WPF
Creating Simple VLC Video Player in WPF

Binding DataGrid with XML File in WPF

How to get default control template of Control in WPF?