Creating a Silverlight Navigation Application
This exercise demonstrates creating a Sl application with navigation support from scratch using the navigation framework. In the exercise, you will build a simple application that will contain two HyperLinkButton and a Frame. Clicking the links will load one of two pages into the Frame. Let's get started.
1. Start VS and select File->New->Peoject from the main menu.
2. in the New project dialog box, select Sl as the project type and SL Application as the template. Name the project NavAppFrom Scratch.
3. When the new Sl application dialog appears, select the default to host the SL application in a new ASP.NET web applicatin named NavAppFromScratch.Web. Press OK to continue.
4. By default the MainPage.Xaml file will be crated and opened for editing. You will start by editing that file. In the Grid definition, add ShowGridLine to True so you can see how your cels are laid out. You can turn this property to off later so your application is cleaner.
5. Next you want to define the Grid cells. you will simply have two rows, one for th elinks and one for the navigated content.
<Grid ShowGridLinews="True" x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
6. Now that your have the two rows, you want to add your HyperLinkButton 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.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<HyperlinkBUtton Content="View1" Click="LinkClick" Padding="5" />
<HyperlinkButton Content="View2" Click="LinkClick" Padding="5" />
</StackPanel>
7. The next step will be to add support for the Navigation framwork 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.
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. Select the entry and press OK to add the reference to the project.
9.When the assembly is added you will see it appear under the references in the Soluntion Explorer.
10. Now that you have added the reference to the Navigation Framework, you need to add the navigation objects to your appliction. You will start by adding the XML namespace for System.Windows.Controls.Navigation to the UserContorl definition.
11. You can now add a frame to the botton row of the root Grid named contentFrme. You will also set the HorizontalcontentAlignment and VerticalContentAlignment to Stretch so the Frame will sonsume the entir Grid cell. You will give the Frame a 10 pixel Margin and a BorderThicknewss to 2 pixels.
<nav:Frame x:Name="ContentFrame" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="10" Grid.Row="1" BorderThickness="2" BorderBrush="Black" />
12. Next, you will add the different vies to the project. Right-click on the SL project and select Add New Item.
13.On the Add New Item dialog, select the SL Page template, name the page View1.xaml, and click on the Add button.
14. Once View1.xmal has benn added, repeat steps 11 and 12 to add another sl page named View2.xaml.
15 Open View1.xmal in design mode and add the following xmal to the root Grid:
<Grid x:Name="layoutRoot">
<TextBLock text="View 1" FontSize="60" Foreground="Green" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
16. Open View2.Xaml in design mode and add the following xmal to the root grid:
<Grid x:Name="layoutRoot">
<TextBLock text="View 2" FontSize="60" Foreground="Green" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
17. You now have the main page containing the Frame and the two views that your will load into the Frmae. 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 setp 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="View1" Click="LinkClick" Padding="5" Tag="/View1.xmal" />
<HyperlinkButton Content="View2" Click="LinkClick" Padding="5" Tag="/View2.xmal" />
</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 LinkClick9object 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 LinkClick9object sender, RoutedEventArgs e)
{
HyperlinkButton button=(HyperlinkButton)sender;
string viewSource=button.Tag.ToString();
ContentFrame.Navigate(new Uri(viewSource, UriKind.Relative));
}
20. Now press F5 to run the project.
