Creating a Silverlight Application that uses navigation framework and Viewbox control

Urmimala Pal
14y
10.7k
0
0
100
Article

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

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

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

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

Up Next

Ebook Download

View all

Silverlight 2 Web Services

Read by 1.2k people

Download Now!

Learn

View all