85.导航栏制作 C#例子 WPF例子

第一步：调整主窗口路径

首先，将主窗口的路径移动，在 App.xaml 中更新 StartupUri 的路径，指向新的主窗口位置：

<Application x:Class="MyWpfTemplate.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MyWpfTemplate"
             StartupUri="Views/MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

第二步：安装 Prism NuGet 包

安装 Prism 的 NuGet 包，我选择的是 Prism.DryIoc，这是一个轻量级的依赖注入容器，非常适合 MVVM 架构。

第三步：创建 ViewModel 并设置 DataContext

创建一个 ViewModel，并在主窗口的 XAML 中设置其命名空间和 DataContext：

<Window x:Class="MyWpfTemplate.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:MyWpfTemplate.ViewModels"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>

    </Grid>
</Window>

第四步：定义样式

在主窗口的资源部分定义按钮样式，这里是一个具有黑字、白底和绿色背景的按钮样式：

    <Window.Resources>
        <!--黑字白底绿色风格按钮样式-->
        <Style x:Key="Green_WhiteButton" TargetType="Button">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="#FFFFFCFF"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" SnapsToDevicePixels="True">
                            <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="#FFCBF7FC"/>
                                <!-- 浅绿色加深一些作为悬停背景 -->
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="Background" Value="White"/>
                                <!-- 浅绿色再加深一些作为按下背景 -->
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

第五步：设计导航栏

在主窗口中设计一个导航栏，左侧为导航按钮，右侧为内容区域：

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- 左侧导航栏 -->
        <Grid Grid.Column="0" Height="auto" Background="#FFFFFCFF">
            <Grid.RowDefinitions>
                <!-- 根据需要添加足够的行定义 -->
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button Content="Main" Style="{StaticResource Green_WhiteButton}" Command="{Binding OpenMainBinding}"
                Grid.Row="0" Margin="5"/>
            <Button Content="Full" Style="{StaticResource Green_WhiteButton}" Command="{Binding OpenFullBinding}"
                Grid.Row="1" Margin="5"/>
            <Button Content="Empty" Style="{StaticResource Green_WhiteButton}" Command="{Binding OpenEmptyBinding}"
                Grid.Row="2" Margin="5"/>
        </Grid>

        <!-- 右侧内容区域 -->
        <ContentControl Grid.Column="1" Grid.Row="0" Name="ContentControl" Height="auto" Width="auto" Content="{Binding UsercontrolBinding}"/>

    </Grid>

第六步：创建子页面

创建三个子页面，将它们的 XAML 类型从 Window 改为 UserControl，同时将后台代码中的 Window 类型也改为 UserControl。

第七步：实现 ViewModel 中的命令

在主窗口的 ViewModel 中继承 Prism.Mvvm.BindableBase，并添加切换窗口的命令：

class MainWindowViewModel:BindableBase
{
    private ICommand? _OpenMainBinding;
    public ICommand OpenMainBinding => _OpenMainBinding ??= new DelegateCommand(OpenMain);
    private ICommand? _OpenFullBinding;
    public ICommand OpenFullBinding => _OpenFullBinding ??= new DelegateCommand(OpenFull);
    private ICommand? _OpenEmptyBinding;
    public ICommand OpenEmptyBinding => _OpenEmptyBinding ??= new DelegateCommand(OpenEmpty);

    private object _UsercontrolBinding;
    public object UsercontrolBinding
    {
        get { return _UsercontrolBinding; }
        set { SetProperty(ref _UsercontrolBinding, value); }
    }

    public Main Main = new Main();
    public Full Full = new Full();
    public Empty Empty = new Empty();

    void OpenMain()
    {
        UsercontrolBinding = Main;
    }
    void OpenFull()
    {
        UsercontrolBinding = Full;
    }
    void OpenEmpty()
    {
        UsercontrolBinding = Empty;
    }
}

通过以上步骤，你就可以构建一个基于 MVVM 架构的 WPF 应用程序，实现导航栏的功能，并动态切换不同的子页面。