WPF Navigation

原文: WPF Navigation

在開始學習WPF時，一開始對WPF的Window, Page, UserControl感到很迷惑。不知道什麼時候該使用哪一個。下面簡單介紹一下這三者的差別。

Window：故名思意，桌面程式的窗體。在WPF桌面應用中，我通常會隻用一個主窗體，然後将不同的操作單元封裝在不同的UserControl中，根據使用者的操作展現不同的UserControl；

Page：Page需要承載在窗體中，通過Navigation進行不同Page的切換，也是本篇部落格中需要講到的；

UserControl：封裝一些可以重複使用的功能。

在這篇部落格中将介紹WPF導航應用。WPF Navigation實作在不同Page之間的切換。

我們需要在NavigationWindow或者Frame中承載Page，首先看NavigationWindow

建立WelcomePage，然後設定NavigationWindow的Source為WelcomePage

<NavigationWindow x:Class="NavigationBasedApp.MainWindow"
        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:local="clr-namespace:NavigationBasedApp"
        mc:Ignorable="d" ShowsNavigationUI="False" Source="WelcomePage.xaml"
        Title="MainWindow" Height="350" Width="525">

</NavigationWindow>      

WelcomePage.xaml:

<Page x:Class="NavigationBasedApp.WelcomePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:NavigationBasedApp"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="WelcomePage">

    <Grid>
        <TextBlock Text="Hello China!" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Page>      

運作效果：

再建立一個GreetingPage.xaml，我們在WelcomePage上添加一個Button，點選Button時跳轉到GreetingPage.xaml，在GreetingPage上也有一個Button，點選傳回到WelcomePage。

WelcomePage.xaml

<Page x:Class="NavigationBasedApp.WelcomePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:NavigationBasedApp"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="WelcomePage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <TextBlock Text="Welcome to WPF World!" HorizontalAlignment="Center"/>
        
        <Button Grid.Row="1" Width="100" Margin="0,10" Content="Go Forward" Click="GoForwardButton_Click"/>
    </Grid>
</Page>      

Code Behind:

private void GoForwardButton_Click(object sender, RoutedEventArgs e)
        {
            if (this.NavigationService.CanGoForward)
            {
                this.NavigationService.GoForward();
            }
            else
            {
                //GreetingPage greeting = new GreetingPage();

                //this.NavigationService.Navigate(greeting);

                this.NavigationService.Navigate(new Uri("pack://application:,,,/GreetingPage.xaml"));
            }
        }      

導航時，可以傳遞GreetingPage.xaml位址，也可以是GreetingPage對象。可以在 if (this.NavigationService.CanGoForward) 加一個斷點，在從GreetingPage傳回到WelcomePage後，再次點選Go Forward按鈕時，直接使用this.NavigationService.GoForward()這句代碼進行了導航，這是因為導航發生後，會在NavigationService中會記錄導航記錄。

GreetingPage.xaml:

<Page x:Class="NavigationBasedApp.GreetingPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:NavigationBasedApp"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="GreetingPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="Hi Yang-Fei!" HorizontalAlignment="Center"/>
        <Button Grid.Row="1" Margin="0,10" Width="100" Content="Go Back" Click="GoBackButton_Click"/>
    </Grid>
</Page>      

private void GoBackButton_Click(object sender, RoutedEventArgs e)
        {
            this.NavigationService.GoBack();
        }      

可以在導航時傳遞參數。然後再NavigationWindow中擷取。例如：

GreetingPage greeting = new GreetingPage();

 this.NavigationService.Navigate(greeting,"This is a test message.");      

在MainWindow中，

public MainWindow()
        {
            InitializeComponent();

            this.NavigationService.LoadCompleted += NavigationService_LoadCompleted;
        }

        private void NavigationService_LoadCompleted(object sender, NavigationEventArgs e)
        {
            if(e.ExtraData != null)
            {
               // Do something here...
            }
        }      

上面提到的Frame也可以作為Page的承載。和NavigationWindow的差別在于NavigationWindow是全局翻頁，Frame是局部翻頁。

<Window x:Class="FrameNavigationBasedApp.MainWindow"
        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:local="clr-namespace:FrameNavigationBasedApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File"/>
            <MenuItem Header="_View"/>
        </Menu>
        <Frame x:Name="frmMain" NavigationUIVisibility="Hidden" Source="WelcomePage.xaml"/>
    </DockPanel>
</Window>      

這篇部落格就到這裡了，代碼點選

這裡

下載下傳。

感謝您的閱讀。