首頁 > 軟體

WPF中的導航框架概述

2022-06-24 22:00:27

有的時候,我們需要一個支援頁面跳轉的UI,例如檔案瀏覽器,開始嚮導等。對於這樣的介面,簡單的可以使用ContentControl + ContentTemplateSelector的方式來實現,但是有的時候我們會需要一些更加高階的跳轉功能,如前進,回退等。這個時候,用這個方式就稍微有點力不從心了,此時,我們可以使用WPF的導航框架幫助我們快速實現這一功能。

WPF 的Page框架主要包括兩個部分,容器和頁面,

下面就以一個簡單的例子來介紹WPF的Page框架,首先我們建立第一個頁面:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      Title="Page1">
    <TextBlock>
        <Run>### This is Page 1, Let's go to</Run>
        <Hyperlink NavigateUri="Page2.xaml" >Page2</Hyperlink>
    </TextBlock>
</Page>

然後再建立第二個頁面,

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      Title="Page2">
    <TextBlock>
        <Run>~~~ This is Page 2, Let's go to</Run>
        <Hyperlink Command="BrowseBack" >Page1</Hyperlink>
    </TextBlock>
</Page>

最後我們在容器中承載它們,在WPF中,Page的容器可以是 WindowNavigationWindowFrame或瀏覽器等,大多數的時候用的是Frame和NavigationWindow,因為它提供了一系列導航相關的函數,其中Frame更為靈活,這裡就以Frame為例來介紹它的用法:

<Grid>
    <Frame x:Name="frame" Source="Page1.xaml"  NavigationUIVisibility="Visible" />
</Grid>

執行上述程式碼後,會得到在如下兩個頁面間跳轉的導航視窗。點選Page1的連結可以跳轉到Page2, 點選Page2的連結可以回退到Page1

頁面地址:

在WPF的導航框架中,頁面地址都是用URI來表示的,並不需要手動建立Page物件(也是可以手動建立的),例如Frame中設定的Source="Page1.xaml",它將起始頁面的URI設定為Page.xaml,系統會自動建立Page1物件。

頁面跳轉:

頁面跳轉是通過NavigationService來控制的,在Frame和Page中都有該名為NavigationService的物件,可以通過它的Navigate函數來實現頁面跳轉。例如前面在Frame中設定Source="Page1.xaml"實際上就是通過如下函數實現的跳轉:

frame.NavigationService.Navigate(new Uri("Page1.xaml", UriKind.Relative));

這個函數並不僅僅侷限於URI,跳轉物件也不僅僅侷限於URI,如下方式也都是可以的。

    frame.NavigationService.Navigate(new Page1());

    frame.NavigationService.Navigate(new Button());

    frame.NavigationService.Navigate("Hello world");

另外,我們也可以像Page1.xaml種那樣通過Hyperlink的NavigateUri屬性來在Page的Xaml中實現頁面跳轉,當然,其本質也是呼叫NavigationService.Navigate來實現的。

導航命令:

除了頁面跳轉外,NavigationService還提供了一些基本的導航命令,如前進,回退,重新整理。可以通過

    frame.NavigationService.GoForward();

    frame.NavigationService.GoBack();

    frame.NavigationService.Refresh();

另外,WPF本身提供了一個標準的導航命令的集合NavigationCommands(比NavigationService),Page和Frame也支援這幾個命令的繫結(NavigationCommands的命令是比NavigationService能支援的要多的),因此我們可以使用命令列繫結非常方便的呼叫這些功能。如Page2種所使用的回退命令:

<Hyperlink Command="BrowseBack" >Page1</Hyperlink>

 最後,簡單的介紹一個沒有什麼技術含量,但很常用的功能,那就是Frame物件的導航工具條的重繪。 Frame物件本身是帶著一個導航工具條的,提供了一個類似IE的前進後退功能。將NavigationUIVisibility設定為Visible或Auto的時候可見。

但這個工具條過於簡陋,偵錯一下還可以,在最終交付的時候要麼隱藏它,要麼重寫它,重寫的方式一般就是改寫其Template,如下就是一個簡單的例子:

<ControlTemplate TargetType="Frame">
    <DockPanel Margin="8">
        <StackPanel Margin="4" DockPanel.Dock="Top" Orientation="Horizontal">
            <Button Content="Go back" Margin="4"  Command="{x:Static NavigationCommands.BrowseBack}" />
            <Button Content="Go Forward" Margin="4"  Command="{x:Static NavigationCommands.BrowseForward}" />
        </StackPanel>
        <Border BorderBrush="Orange"  Margin="7"  BorderThickness="4"  Padding="7"
                CornerRadius="7" Background="White">
            <ContentPresenter />
        </Border>
    </DockPanel>
</ControlTemplate>

但這個常常用到,以便後續參考。

小結:

本文主要介紹了WPF的導航框架的基本用法,更多的功能後面再寫文章陸續介紹。或者參看微軟官方的MSDN:導航概述

到此這篇關於WPF導航框架的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com