Viewbox is content control that automatically stretches and scales its content to fill the available size. Viewbox uses advanced techniques to perform the stretch operations using transformation instead of resizing thus delivers better performance. You can control the stretch mode through the Stretch and StretchDirection property.

Using ViewBox

Viewbox is inherited from ISContentControl, which means that it can contain a single object of any type (such as a string, an image, or a panel). For more information about this content model, see Content Model Overview.

Viewbox scales the content to fill the available size. It does not resize the content, but instead transforms it. This means that also all text sizes and line widths are proportionally scaled. This behavior is analogous to setting the Stretch property on an Image or the Path property to Uniform.

The following example demonstrates the difference between each stretch mode.

XAML	Copy Code
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"> <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8"> <Viewbox Stretch="Uniform"> <Button Height="40" Width="80" Content="Click Me"></Button> </Viewbox> </Border> <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8"> <Viewbox Stretch="Fill"> <Button Height="40" Width="80" Content="Click Me"></Button> </Viewbox> </Border> <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8"> <Viewbox Stretch="UniformToFill"> <Button Height="40" Width="80" Content="Click Me"></Button> </Viewbox> </Border> <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8"> <Viewbox Stretch="None"> <Button Height="40" Width="80" Content="Click Me"></Button> </Viewbox> </Border> </StackPanel>

XAML

Copy Code

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8">
        <Viewbox Stretch="Uniform">
            <Button Height="40" Width="80" Content="Click Me"></Button>
        </Viewbox>
    </Border>
    <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8">
        <Viewbox Stretch="Fill">
            <Button Height="40" Width="80" Content="Click Me"></Button>
        </Viewbox>
    </Border>
    <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8">
        <Viewbox Stretch="UniformToFill">
            <Button Height="40" Width="80" Content="Click Me"></Button>
        </Viewbox>
    </Border>
    <Border BorderBrush="Black" BorderThickness="1" Padding="8" Width="150" Height="150" Margin="8">
        <Viewbox Stretch="None">
            <Button Height="40" Width="80" Content="Click Me"></Button>
        </Viewbox>
    </Border>
</StackPanel>