WPF/C#：wpfui中NavigationView的基本使用

前言

本文通过一个简单的例子说明wpfui中NavigationView的基本使用。

实践

在wpfui中看到有NavigationView这个控件，效果如下：

感觉不错，也想使用一下。

首先创建三个子页面。

SamplePage1.xaml：

<Page x:Class="Demo.SamplePage3"
      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:Demo"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="SamplePage3">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border
            Grid.Row="0"
            Grid.Column="1"
            Margin="8"
            Background="GreenYellow"
            CornerRadius="8" />
        <Border
            Grid.Row="0"
            Grid.Column="0"
            Margin="8"
            Background="Salmon"
            CornerRadius="8" />
        <Border
            Grid.Row="1"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Margin="8"
            Background="Aquamarine"
            CornerRadius="8" />
    </Grid>
</Page>

SamplePage2.xaml：

<Page x:Class="Demo.SamplePage2"
      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:Demo"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="SamplePage2">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border
            Grid.Row="0"
            Grid.RowSpan="2"
            Grid.Column="1"
            Margin="8"
            Background="Gray"
            CornerRadius="8" />
        <Border
            Grid.Row="0"
            Grid.Column="0"
            Margin="8"
            Background="Aquamarine"
            CornerRadius="8" />
        <Border
            Grid.Row="1"
            Grid.Column="0"
            Margin="8"
            Background="DarkOrange"
            CornerRadius="8" />
    </Grid>
</Page>

SamplePage3.xaml：

<Page x:Class="Demo.SamplePage3"
      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:Demo"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="SamplePage3">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border
            Grid.Row="0"
            Grid.Column="1"
            Margin="8"
            Background="GreenYellow"
            CornerRadius="8" />
        <Border
            Grid.Row="0"
            Grid.Column="0"
            Margin="8"
            Background="Salmon"
            CornerRadius="8" />
        <Border
            Grid.Row="1"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Margin="8"
            Background="Aquamarine"
            CornerRadius="8" />
    </Grid>
</Page>

NavigationViewDemo.xaml：

    <Window x:Class="Demo.NavigationViewDemo"
        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:Demo"
        xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
        mc:Ignorable="d"
        Title="NavigationViewDemo" Height="450" Width="800">
    <StackPanel>
        <ui:NavigationView
                MinHeight="300"
                Margin="0"
                IsBackButtonVisible="Auto"
                IsPaneToggleVisible="True"
                PaneDisplayMode="Left"
                PaneTitle="Pane Title">
            <ui:NavigationView.AutoSuggestBox>
                <ui:AutoSuggestBox Margin="8,0,8,8" PlaceholderText="Search" />
            </ui:NavigationView.AutoSuggestBox>
            <ui:NavigationView.MenuItems>
                <ui:NavigationViewItem
                        Content="Dashboard"
                        Icon="{ui:SymbolIcon Home24}"
                        TargetPageType="{x:Type local:SamplePage1}" />
                <ui:NavigationViewItem
                        Content="Items"
                        Icon="{ui:SymbolIcon Library24}"
                        TargetPageType="{x:Type local:SamplePage2}" />
            </ui:NavigationView.MenuItems>
            <ui:NavigationView.FooterMenuItems>
                <ui:NavigationViewItem
                        Content="Settings"
                        Icon="{ui:SymbolIcon Settings24}"
                        TargetPageType="{x:Type local:SamplePage3}" />
            </ui:NavigationView.FooterMenuItems>
            <ui:NavigationView.Header>
                <Border
                        Margin="8"
                        Background="{DynamicResource StripedBackgroundBrush}"
                        CornerRadius="4">
                    <TextBlock
                            Margin="24"
                            VerticalAlignment="Center"
                            FontWeight="Medium"
                            Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                            Text="NavigationView Header" />
                </Border>
            </ui:NavigationView.Header>
            <ui:NavigationView.PaneHeader>
                <Border
                        Margin="0,0,0,8"
                        Background="{DynamicResource StripedBackgroundBrush}"
                        CornerRadius="4">
                    <TextBlock
                            Margin="24"
                            VerticalAlignment="Center"
                            FontWeight="Medium"
                            Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                            Text="Pane Header" />
                </Border>
            </ui:NavigationView.PaneHeader>
            <ui:NavigationView.PaneFooter>
                <Border
                        Margin="0,8,0,0"
                        Background="{DynamicResource StripedBackgroundBrush}"
                        CornerRadius="4">
                    <TextBlock
                            Margin="24"
                            VerticalAlignment="Center"
                            FontWeight="Medium"
                            Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                            Text="Pane Footer" />
                </Border>
            </ui:NavigationView.PaneFooter>
        </ui:NavigationView>
    </StackPanel>
</Window>

NavigationView控件将页面分成

NavigationView.AutoSuggestBox、NavigationView.MenuItems、NavigationView.FooterMenuItems、NavigationView.Header、NavigationView.PaneHeader、NavigationView.PaneFooter，如下图所示：

实现效果如下所示：

以上就是wpfui中NavigationView控件的基本使用，希望对你有所帮助。