Blogger news

Blogger templates

Tuesday, February 15, 2011

Silverlight Navigation FrameWork

The Navigation Framework is a feature in Silverlight that allows developers to implement a way to navigate through different pages within a Silverlight application, creating an experience similar to browsing through different pages of a web site. The framework also allows developers to create a history that can integrate with the browser enabling users to navigate forward and backward through the history using the browser’s back and forward buttons.

Frame and Page Object

The two main objects that are contained in the Navigation Framework are the Frame and Page objects .The Frame object is very similar to a ContentPlaceHolder in ASP.NET master pages and is the place holder for the different views to be loaded onto the page.

Let’s explain with an example,

1. Start Visual Studio 2010 and select File New Project from the main menu.

2. In the New Project dialog box, select Silverlight as the project type and

Silverlight Application as the template. Name the project NavigationSample

Please find image below,


3. When the New Silverlight Application dialog appears, select the default to host the Silverlight application in a new ASP.NET web application named NavAppFromScratch.Web. Press OK to continue.

Please click image below,

4. By default the MainPage.xaml file will be created and opened for editing. You will start by editing that file. In the Grid definition, add ShowGridLines="True" so you can see how your cells are laid out. You can turn this property off later so your application is cleaner.

5. Next you want to define the Grid cells. You will simply have two rows, one for the links and one for the navigated content.

<Grid ShowGridLines="True" x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition>RowDefinition>

Grid.RowDefinitions>

Grid>

6. Now that you have the two rows, you want to add your HyperlinkButtons that will be used to navigate to the different views. You will do this in a horizontal StackPanel. For the Click property, create an event handler called LinkClick.

<Grid ShowGridLines="True" x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition>RowDefinition>

Grid.RowDefinitions>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<HyperlinkButton Content="View 1"

Click="LinkClick"

Padding="5" />

<HyperlinkButton Content="View 2"

Click="LinkClick"

Padding="5" />

StackPanel>

Grid>

7. The next step will be to add support for the Navigation Framework in your project. The first step is to add a reference to System.Windows.Controls. Navigation.dll by right-clicking on the References folder in your Silverlight project and choosing Add Reference. Please click image below,


8. When the Add Reference dialog appears, be sure the .NET tab is selected and
then browse through the list until you find System.Windows.Controls.
Navigation.
Please click image below,


10. Now that we added the reference to the Navigation Framework, you
need to add the navigation objects to your application. You will start by adding
the XML namespace for System.Windows.Controls.Navigation to the
UserControl definition.

Please click image below,


11. We now add a Frame to the bottom row of the root Grid named
ContentFrame. You will also set the HorizontalContentAlignment and
VerticalContentAlignment to Stretch so the Frame will consume the entire
Grid cell. You will also give the Frame a 10 pixel Margin and a BorderThickness
to 2 pixels. it should be,

It should be,

<UserControl x:Class="NavigationSample.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:nav="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<Grid ShowGridLines="True" x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition>RowDefinition>

Grid.RowDefinitions>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<HyperlinkButton Content="View 1" Click="LinkClick" Padding="5" />

<HyperlinkButton Content="View 2"

Click="LinkClick"

Padding="5" />

StackPanel>

<nav:Frame x:Name="ContentFrame"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch"

Margin="10"

Grid.Row="1"

BorderThickness="2"

BorderBrush="Black" />

Grid>

UserControl>


Or click image below,



12. Next, you will add the different views to the project. Right-click on the
Silverlight project and select Add New Item.

13. On the Add New Item dialog, select the Silverlight Page template, name the
page View1.xaml, and click on the Add button

Please click image below,


14. Once View1.xaml has been added, repeat steps 11 and 12 to add another
Silverlight page named View2.xaml.

15. Open View1.xaml in design mode and add the following XAML to the root Grid:

<TextBlock Text="View 1" FontSize="60"

Foreground="Green"

HorizontalAlignment="Center"

VerticalAlignment="Center" />



16. Open View2.xaml in design mode and add the following XAML to the root Grid:

<TextBlock Text="View 2"

FontSize="60"

Foreground="Red"

HorizontalAlignment="Center"

VerticalAlignment="Center" />


17. You now have the main page containing the Frame and the two views that you
will load into the Frame. Next, you need to actually load the views into the
Frame. You will do this on the click event of the two HyperlinkButtons you
added in step 6. While you can easily do this with two click event handlers, you
will actually do it with one. You can set the Tag property of the
HyperlinkButton to be the page view source file. Then the click event handler
will be able to retrieve the source file from the Tag.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<HyperlinkButton Content="View 1"

Tag="/View1.xaml"

Click="LinkClick"

Padding="5" />

<HyperlinkButton Content="View 2"

Tag="/View2.xaml"

Click="LinkClick"

Padding="5" />

StackPanel>


18. Right click on LinkClick in the Click attribute and select Navigate to Event
Handler in order to create the LinkClick event handler. Within the event add
the following code to retrieve the view’s source file:

private void LinkClick(object sender, RoutedEventArgs e)

{

HyperlinkButton button = (HyperlinkButton)sender;

string viewSource = button.Tag.ToString();

}


19. Now that you have the view’s source file, you can use the Frame’s Navigate
method to navigate to the proper view:

private void LinkClick(object sender, RoutedEventArgs e)

{

HyperlinkButton button = (HyperlinkButton)sender;

string viewSource = button.Tag.ToString();

ContentFrame.Navigate(new Uri(viewSource, UriKind.Relative));

}


20. Now run the application.

21. Press the View 1 HyperlinkButton at the top of the screen. The Content Frame
will navigate to the View1.xaml content.

22. You can then click on the View 2 link for similar results.

23. Notice that you can press the browser’s back button to navigate backward in
history from View 2, to View 1, and back to the default.


No comments:

Post a Comment