Viewbox Viewbox Viewbox Viewbox Class

Definition

Defines a content decorator that can stretch and scale a single child to fill the available space.

public : sealed class Viewbox : FrameworkElement, IViewboxpublic sealed class Viewbox : FrameworkElement, IViewboxPublic NotInheritable Class Viewbox Inherits FrameworkElement Implements IViewbox// This API is not available in Javascript.
<ViewBox .../>
-or-
<ViewBox ...>
  child
</ViewBox>

Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

The following example shows what happens when you change the StretchDirection and Stretch properties of a Viewbox. The example includes three Viewbox controls that have different sizes. The same image is displayed in the Viewbox controls so that you can compare the differences. You can manipulate the stretching and scaling of the image by clicking the buttons that correspond to the values for the Stretch and StretchDirection enumerations.

<Grid Height="600" Width="600">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    
    <StackPanel Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" Orientation="Vertical">
        <TextBlock Text="Stretch" FontWeight="Bold" FontSize="12" />
        <Button Name="btn1" Click="stretchNone" Content="None" />
        <Button Name="btn2" Click="stretchFill" Content="Fill" />
        <Button Name="btn3" Click="stretchUni" Content="Uniform" />
        <Button Name="btn4" Click="stretchUniFill" Content="UniformToFill" />
    </StackPanel>

    <StackPanel Grid.Row="0" Grid.Column="1" Margin="5,5,5,5" Orientation="Vertical">
        <TextBlock Text="StretchDirection" FontWeight="Bold" FontSize="12" />
        <Button Name="btn5" Click="sdUpOnly" Content="UpOnly" />
        <Button Name="btn6" Click="sdDownOnly" Content="DownOnly" />
        <Button Name="btn7" Click="sdBoth" Content="Both" />
    </StackPanel>

    <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" 
                Orientation="Vertical">
        <TextBlock Name="txt1" FontSize="12" FontWeight="Bold" />
        <TextBlock Name="txt2" FontSize="12" FontWeight="Bold" />
    </StackPanel>   

    <StackPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" 
                Orientation="Horizontal">
        <Viewbox MaxWidth="100" MaxHeight="100" Name="vb1">
            <Image Source="flower.jpg"/>
        </Viewbox>
        <Viewbox MaxWidth="200" MaxHeight="200" Name="vb2">
            <Image Source="flower.jpg"/>
        </Viewbox>
        
        <Viewbox MaxWidth="300" MaxHeight="300" Name="vb3">
            <Image Source="flower.jpg"/>
        </Viewbox>
    </StackPanel>

</Grid>
//Setting the Stretch property to None
private void stretchNone(object sender, RoutedEventArgs e)
{
    vb1.Stretch = Stretch.None;
    vb2.Stretch = Stretch.None;
    vb3.Stretch = Stretch.None;
    txt1.Text = "Stretch is now set to None.";
}

//Setting the Stretch property to Fill
private void stretchFill(object sender, RoutedEventArgs e)
{
    vb1.Stretch = Stretch.Fill;
    vb2.Stretch = Stretch.Fill;
    vb3.Stretch = Stretch.Fill;
    txt1.Text = "Stretch is now set to Fill.";
}

//Setting the Stretch property to Uniform
private void stretchUni(object sender, RoutedEventArgs e)
{
    vb1.Stretch = Stretch.Uniform;
    vb2.Stretch = Stretch.Uniform;
    vb3.Stretch = Stretch.Uniform;
    txt1.Text = "Stretch is now set to Uniform.";
}

//Setting the Stretch property to UniformToFill
private void stretchUniFill(object sender, RoutedEventArgs e)
{
    vb1.Stretch = Stretch.UniformToFill;
    vb2.Stretch = Stretch.UniformToFill;
    vb3.Stretch = Stretch.UniformToFill;
    txt1.Text = "Stretch is now set to UniformToFill.";
}

//Setting the StretchDirection property to UpOnly
private void sdUpOnly(object sender, RoutedEventArgs e)
{
    vb1.StretchDirection = StretchDirection.UpOnly;
    vb2.StretchDirection = StretchDirection.UpOnly;
    vb3.StretchDirection = StretchDirection.UpOnly;
    txt2.Text = "StretchDirection is now UpOnly.";
}

//Setting the StretchDirection property to DownOnly
private void sdDownOnly(object sender, RoutedEventArgs e)
{
    vb1.StretchDirection = StretchDirection.DownOnly;
    vb2.StretchDirection = StretchDirection.DownOnly;
    vb3.StretchDirection = StretchDirection.DownOnly;
    txt2.Text = "StretchDirection is now DownOnly.";
}

//Setting the StretchDirection property to Both
private void sdBoth(object sender, RoutedEventArgs e)
{
    vb1.StretchDirection = StretchDirection.Both;
    vb2.StretchDirection = StretchDirection.Both;
    vb3.StretchDirection = StretchDirection.Both;
    txt2.Text = "StretchDirection is now Both.";
}
'Setting the Stretch property to None
Private Sub stretchNone(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.Stretch = Stretch.None
    vb2.Stretch = Stretch.None
    vb3.Stretch = Stretch.None
    txt1.Text = "Stretch is now set to None."
End Sub

'Setting the Stretch property to Fill
Private Sub stretchFill(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.Stretch = Stretch.Fill
    vb2.Stretch = Stretch.Fill
    vb3.Stretch = Stretch.Fill
    txt1.Text = "Stretch is now set to Fill."
End Sub

'Setting the Stretch property to Uniform
Private Sub stretchUni(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.Stretch = Stretch.Uniform
    vb2.Stretch = Stretch.Uniform
    vb3.Stretch = Stretch.Uniform
    txt1.Text = "Stretch is now set to Uniform."
End Sub

'Setting the Stretch property to UniformToFill
Private Sub stretchUniFill(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.Stretch = Stretch.UniformToFill
    vb2.Stretch = Stretch.UniformToFill
    vb3.Stretch = Stretch.UniformToFill
    txt1.Text = "Stretch is now set to UniformToFill."
End Sub

'Setting the StretchDirection property to UpOnly
Private Sub sdUpOnly(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.StretchDirection = StretchDirection.UpOnly
    vb2.StretchDirection = StretchDirection.UpOnly
    vb3.StretchDirection = StretchDirection.UpOnly
    txt2.Text = "StretchDirection is now UpOnly."
End Sub

'Setting the StretchDirection property to DownOnly
Private Sub sdDownOnly(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.StretchDirection = StretchDirection.DownOnly
    vb2.StretchDirection = StretchDirection.DownOnly
    vb3.StretchDirection = StretchDirection.DownOnly
    txt2.Text = "StretchDirection is now DownOnly."
End Sub

'Setting the StretchDirection property to Both
Private Sub sdBoth(ByVal sender As Object, ByVal e As RoutedEventArgs)
    vb1.StretchDirection = StretchDirection.Both
    vb2.StretchDirection = StretchDirection.Both
    vb3.StretchDirection = StretchDirection.Both
    txt2.Text = "StretchDirection is now Both."
End Sub

Remarks

Viewbox is a container control that scales its content to a specified size.

Viewbox control

Constructors

Viewbox() Viewbox() Viewbox() Viewbox()

Initializes a new instance of the Viewbox class.

public : Viewbox()public Viewbox()Public Sub New()// This API is not available in Javascript.

Properties

Child Child Child Child

Gets or sets the single child element of a Viewbox element.

public : UIElement Child { get; set; }public UIElement Child { get; set; }Public ReadWrite Property Child As UIElement// This API is not available in Javascript.
<ViewBox ...>
  child
</ViewBox>
Value
UIElement UIElement UIElement UIElement

The single child element of a Viewbox element.

Stretch Stretch Stretch Stretch

Gets or sets the Stretch mode, which determines how content fits into the available space.

public : Stretch Stretch { get; set; }public Stretch Stretch { get; set; }Public ReadWrite Property Stretch As Stretch// This API is not available in Javascript.
<ViewBox Stretch="stretchMemberName"/>
Value
Stretch Stretch Stretch Stretch

A Stretch mode, which determines how content fits in the available space. The default is Uniform.

StretchDirection StretchDirection StretchDirection StretchDirection

Gets or sets the StretchDirection, which determines how scaling is applied to the contents of a Viewbox.

public : StretchDirection StretchDirection { get; set; }public StretchDirection StretchDirection { get; set; }Public ReadWrite Property StretchDirection As StretchDirection// This API is not available in Javascript.
<ViewBox StretchDirection="stretchDirectionMemberName" />
Value
StretchDirection StretchDirection StretchDirection StretchDirection

A StretchDirection, which determines how scaling is applied to the contents of a Viewbox. The default is Both.

StretchDirectionProperty StretchDirectionProperty StretchDirectionProperty StretchDirectionProperty

Identifies the StretchDirection dependency property.

public : static DependencyProperty StretchDirectionProperty { get; }public static DependencyProperty StretchDirectionProperty { get; }Public Static ReadOnly Property StretchDirectionProperty As DependencyProperty// This API is not available in Javascript.

StretchProperty StretchProperty StretchProperty StretchProperty

Identifies the Stretch dependency property.

public : static DependencyProperty StretchProperty { get; }public static DependencyProperty StretchProperty { get; }Public Static ReadOnly Property StretchProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Stretch dependency property.