HTML clipboard
Introduction:
The objective of this article is to present the Viewbox control. I have also
explained here the navigation framework of Silverlight 3.
Viewbox Control:
- This control is a content decorator.
- It can resize its content based on its own size.
- It takes one child element.
The most important property of Viewbox control is the Stretch property. It can
take four values:- Fill: When the Stretch property of the Viewbox control is set to Fill, the
content of the Viewbox takes up the entire height & width of the Viewbox.
- Uniform: When the Stretch property of the Viewbox control is set to Uniform,
the Viewbox scales up/down or moves left/right its content without distorting
them or changing their height/width ratio.
- UniformToFill: When the Stretch property of the Viewbox control is set to
UniformToFill, the content of the Viewbox fills the entire Viewbox, but at the
same time the height/width ratio of the content remains same.
- None: When the Stretch property of the Viewbox control is set to None, it
just clips to the original content without resizing it.
Another important property of the Viewbox is StretchDirection. It can take three
values. - UpOnly: When the StretchDirection property of the viewbox is set to UpOnly,
the viewbox can only enlarge its content.
- DownOnly: When the StretchDirection property of the viewbox is set to DownOnly,
the viewbox can only shrink its content.
- Both: When the StretchDirection property of the viewbox is set to Both, the
viewbox can both enlarge and shrink its content.
Navigation Framework:
Using navigation framework, we can navigate between different xaml pages by
clicking even the browser's Back & Forward button, if there is browser history
associated with that.
Now I am creating a sample to explain the above mentioned points.
Step 1:
Create a new Silverlight application.
Figure: 1
Step 2:
Here I am using Silverlight 4.
Figure: 2
Step 3:
Add two references to the project.
System.Windows.Controls & System.Windows.Controls.Navigation.
Figure: 3
Figure: 4
Step 4:
In the MainPage.xaml, add a new namespace by writing
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Figure: 5
Step 5:
Now modify the MainPage.xaml as the following way.
<UserControl
x:Class="NavigationAndViewboxSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
x:Name="LayoutRoot"
Background="White">
<StackPanel
Orientation="Vertical">
<StackPanel
Orientation="Horizontal">
<HyperlinkButton
Content="Viewboxes
with Stretch.Fill"FontSize="16"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.Uniform"
Margin="25,0,0,0"FontSize="16"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.UniformToFill"
Margin="40,0,0,0"FontSize="16"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.None"
Margin="55,0,0,0"FontSize="16"/>
</StackPanel>
<navigation:Frame
x:Name="MainFrame"HorizontalContentAlignment="Stretch"VerticalContentAlignment="Stretch">
</navigation:Frame>
</StackPanel>
</Grid>
</UserControl>
Explanation of the code:
In the LayoutRoot grid, I have added a StackPanel with vertical orientation. In
this StackPanel, I have added one more StackPanel with horizontal orientation &
a frame. Now frame is the control that supports navigation to and from
Silverlight pages. In the child StackPanel, I have added four hyperlink buttons.
Step 6:
Now add a new folder to the project & give it a name Views.
Figure: 6
Step 7:
Now add an image to the Views folder (In our case, it is MyFlower.jpg)
Figure: 7
Step 8:
Now again add a new item to the Views folder.
Figure: 8
Step 9:
Add a new Silverlight Page and give it a name Stretch1.xaml.
Figure: 9
Step 10:
Now modify Stretch1.xaml as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.Fill">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="Fill">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="Fill">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="Fill">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Explanation of the code:
In the LayoutRoot grid of Stretch1, I have added a StackPanel with horizontal
orientation. In the StackPanel I have added three Borders with different
BorderBrush & BorderThickness. Each Border contains one Viewbox with different
Height & Width, but same Stretch (i.e. Fill). Each Viewbox contains the same
image MyFlower.jpg.
Step 11:
Now add one more Silverlight Page to the Views folder and give it a name
Stretch2.xaml. Modify it as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.Uniform">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="Uniform">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="Uniform">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="Uniform">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Explanation of the code:
It is same as Stretch1.xaml. The only difference is that the Stretch property of
the Viewboxes is set to Uniform.
Step 12:
Again add a new Silverlight Page to the Views folder, give it a name
Stretch3.xaml & modify it as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.UniformToFill">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="UniformToFill">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="UniformToFill">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="UniformToFill">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Explanation of the code:
It is same as Stretch1.xaml. The only difference is that the Stretch property of
the Viewboxes is set to UniformToFill.
Step 13:
Add the fourth Silverlight Page to the Views folder, give it a name
Stretch4.xaml & modify it as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.None">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="None">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="None">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="None">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Explanation of the code:
It is same as Stretch1.xaml. The only difference is that the Stretch property of
the Viewboxes is set to None.
Step 14:
Now modify the MainPage.xaml as the following way.
<UserControl
x:Class="NavigationAndViewboxSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
x:Name="LayoutRoot"
Background="White">
<StackPanel
Orientation="Vertical">
<StackPanel
Orientation="Horizontal">
<HyperlinkButton
Content="Viewboxes
with Stretch.Fill"FontSize="16"Tag="/Views/Stretch1.xaml"
Click="HyperlinkButton_Click"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.Uniform"
Margin="25,0,0,0"FontSize="16"Tag="/Views/Stretch2.xaml"
Click="HyperlinkButton_Click"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.UniformToFill"
Margin="40,0,0,0"FontSize="16"Tag="/Views/Stretch3.xaml"
Click="HyperlinkButton_Click"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.None"
Margin="55,0,0,0"FontSize="16"Tag="/Views/Stretch4.xaml"
Click="HyperlinkButton_Click"/>
</StackPanel>
<navigation:Frame
x:Name="MainFrame"HorizontalContentAlignment="Stretch"VerticalContentAlignment="Stretch">
</navigation:Frame>
</StackPanel>
</Grid>
</UserControl>
Explanation of the code:
Here I have set the Tag property of each hyperlink button as the path of the
corresponding Silverlight page. All the buttons have a common button click event
handler.
Step 15:
Now in MainPage.xaml.cs, write down the following event handler.
using
System;
usingSystem.Collections.Generic;
usingSystem.Linq;
using
System.Net;
usingSystem.Windows;
using
System.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
namespaceNavigationAndViewboxSample
{
publicpartialclassMainPage
: UserControl
{
publicMainPage()
{
InitializeComponent();
}
privatevoidHyperlinkButton_Click(object
sender, RoutedEventArgs e)
{
HyperlinkButtonbtn
= sender asHyperlinkButton;
stringurl
= btn.Tag.ToString();
this.MainFrame.Navigate(newUri(url,
UriKind.Relative));
}
}
}
Explanation of the code:
Here I am taking the value of the Tag property of the clicked button into the
string url which is nothing but the path of the respective Silverlight page.
Using the Navigate method of the frame, we can navigate to specific pages
depending on the URL.
Step 16:
Now run the program. You can see the four radio buttons.
Figure: 10
Step 17:
Now when you click on Viewboxes with Stretch.Fill, the following page will be
opened.
Figure: 11
You can see the images have taken the entire width & height of the viewboxes.
Step 18:
When you click on Viewboxes with Stretch.Uniform, the following page will be
opened.
Figure: 12
You can see the viewboxes have moved the images without distorting their
height/width ratio.
Step 19:
When you click on Viewboxes with Stretch.UniformToFill, the following page will
be opened.
Figure: 13
You can see the images have filled the viewboxes, but their height/width ratio
remain as original.
Step 20:
When you click on Viewboxes with Stretch.None, the following page will be
opened.
Figure: 14
Here the viewboxes have not resized the images.
Step 21:
When you click the Back button of the browser, this page will be opened.
Figure: 15
Step 22:
Again click the Back button of the browser & this page will be opened.
Figure: 16
Step 23:
Now click the Forward button of the browser & this page will be opened.
Figure: 17
Step 24:
Now you can see that the URL of the browser is exposing the xaml file as
follows:
http://localhost:57969/NavigationAndViewboxSampleTestPage.aspx#/Views/Stretch4.xaml
We can avoid this by using UriMapping. Go to App.xaml and modify it as follows.
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="NavigationAndViewboxSample.App"
xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
>
<Application.Resources>
<navcore:UriMapper
x:Key="uriMapper">
<navcore:UriMapping
Uri="Stretch-Fill"MappedUri="/Views/Stretch1.xaml"/>
<navcore:UriMapping
Uri="Stretch-Uniform"MappedUri="/Views/Stretch2.xaml"/>
<navcore:UriMapping
Uri="Stretch-UniformToFill"MappedUri="/Views/Stretch3.xaml"/>
<navcore:UriMapping
Uri="Stretch-None"MappedUri="/Views/Stretch4.xaml"/>
</navcore:UriMapper>
</Application.Resources>
</Application>
Explanation of the code:
Here I have added one namespace for System.Windows.Navigation. I am using a
feature known as UriMapping. Using the UriMapping, you can convert a particular
URL into some other URL when you want to provide a user friendly URL. For
example, here the URL Stretch-Fill will automatically get converted to
/Views/Stretch1.xaml.
Step 25:
Now change your MainPage.xaml as the following way.
<UserControl
x:Class="NavigationAndViewboxSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
x:Name="LayoutRoot"
Background="White">
<StackPanel
Orientation="Vertical">
<StackPanel
Orientation="Horizontal">
<HyperlinkButton
Content="Viewboxes
with Stretch.Fill"FontSize="16"Tag="Stretch-Fill"
Click="HyperlinkButton_Click"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.Uniform"
Margin="25,0,0,0"FontSize="16"Tag="Stretch-Uniform"
Click="HyperlinkButton_Click"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.UniformToFill"
Margin="40,0,0,0"FontSize="16"Tag="Stretch-UniformToFill"
Click="HyperlinkButton_Click"/>
<HyperlinkButton
Content="Viewboxes
with Stretch.None"
Margin="55,0,0,0"FontSize="16"Tag="Stretch-None"
Click="HyperlinkButton_Click"/>
</StackPanel>
<navigation:Frame
x:Name="MainFrame"HorizontalContentAlignment="Stretch"VerticalContentAlignment="Stretch"UriMapper="{StaticResourceuriMapper}">
</navigation:Frame>
</StackPanel>
</Grid>
</UserControl>
Explanation of the code:
I have changed the Tag property of all the buttons. I have added the property
UriMapper of the frame to manage the conversion of one URL to another for this
frame.
Step 26:
Now run the program & see the URL. It is not showing the xaml file.
Figure: 18
Step 27:
You can view the history of the browser.
Figure: 19
Step 28:
Now modify the Stretch1.xaml as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.Fill">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="Fill"StretchDirection="UpOnly">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="Fill"StretchDirection="DownOnly">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="Fill"StretchDirection="Both">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Explanation of the code:
Here I have added the StretchDirection property of each viewbox.
Step 29:
Now run the program to view this page.
Figure: 20
You can see the first viewbox has scaled up its content & the second viewbox has
scaled down its content.
Step 30:
Now modify the Stretch2.xaml as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.Uniform">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="Uniform"StretchDirection="Both">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="Uniform"StretchDirection="UpOnly">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="Uniform"StretchDirection="DownOnly">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Step 31:
Now run the program to view the following page.
Figure: 21
You can see the third viewbox has scaled down the image to maintain the Uniform
stretch property.
Step 32:
Now modify the Stretch3.xaml as the following way.
<navigation:Page
x:Class="NavigationAndViewboxSample.Views.Stretch3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="This
is Viewboxes with Stretch.UniformToFill">
<Grid
x:Name="LayoutRoot">
<StackPanel
Orientation="Horizontal">
<BorderBorderBrush="Red"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top">
<Viewbox
Height="100"
Width="100"
Stretch="UniformToFill"StretchDirection="Both">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="BlueViolet"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="120,0,0,0">
<Viewbox
Height="200"
Width="200"
Stretch="UniformToFill"StretchDirection="DownOnly">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
<BorderBorderBrush="DarkGreen"BorderThickness="3"HorizontalAlignment="Left"VerticalAlignment="Top"
Margin="340,0,0,0">
<Viewbox
Height="400"
Width="400"
Stretch="UniformToFill"StretchDirection="UpOnly">
<Image
Source="MyFlower.jpg"/>
</Viewbox>
</Border>
</StackPanel>
</Grid>
</navigation:Page>
Step 33:
Now run the program to get the following page.
Figure: 22
You can see the second viewbox has scaled down as it cannot be scaled up to fill
the content.