zoukankan      html  css  js  c++  java
  • 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.

  • 相关阅读:
    Linux下查找包含BOM头的文件和清除BOM头命令 2014-08-16 12:30:50
    ecshop lang用法
    php常用Stream函数集介绍
    php实现多任务并发探讨
    ThinkPHP 3.2 版本升级了哪些内容
    免费手机号码归属地API查询接口和PHP使用实例分享
    [SHELL进阶] (转)最牛B的 Linux Shell 命令 (四)
    [SHELL进阶] (转)最牛B的 Linux Shell 命令 (三)
    [SHELL进阶] (转)最牛B的 Linux Shell 命令 (二)
    [SHELL实例] (转)最牛B的 Linux Shell 命令 (一)
  • 原文地址:https://www.cnblogs.com/jerrychenfly/p/2140318.html
Copyright © 2011-2022 走看看