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

Constructors
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>
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"/>
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" />
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.
The identifier for the StretchDirection dependency property.
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.
The identifier for the Stretch dependency property.