WPF实战学习笔记04-菜单导航

菜单导航

添加文件与文件夹

  • 添加文件夹

​ ./Extensions

  • 添加文件[类型:用户控件]

    ./Views/IndexView.xaml

    ./Views/MemoView.xaml

    ./Views/TodoView.xaml

    ./Views/SettingsView.xaml

    ./ViewModels/IndexViewModel.cs

    ./ViewModels/IndexViewModel.cs

    ./ViewModels/IndexViewModel.cs

    ./ViewModels/IndexViewModel.cs

    ./Extensions/PrismManager.cs

建立View与ViewModel关联

  • App.xaml.cs

    xaml 复制代码
    protected override void RegisterTypes(IContainerRegistry containerRegistry)
    {
        containerRegistry.RegisterForNavigation<IndexView, IndexViewModel>();
        containerRegistry.RegisterForNavigation<TodoView, TodoViewModel>();
        containerRegistry.RegisterForNavigation<MemoView, MemoViewModel>();
        containerRegistry.RegisterForNavigation<SettingsView, SettingsViewModel>();
    }

添加区域

定义区域名字

  • PrismManager.cs

    c# 复制代码
    namespace Mytodo.Extensions
    {
        public static class PrismManager
        {
            public static readonly string MainViewRegionName = "MainViewRegion"; //定义Nanme变量 
        }
    }

注册区域,绑定名字

  • MainView.xaml

    • 定义命名空间

      c# 复制代码
      xmlns:ext="clr-namespace:Mytodo.Extensions"
    • 注册控件区域

      xaml 复制代码
      <materialDesign:DrawerHost.LeftDrawerContent>
      <DockPanel>
      	<materialDesign:ColorZone...>
      	<ContentControl prism:RegionManager.RegionName="{x:Static ext:PrismManager.MainViewRegionName}" /> 
      </DockPanel>

添加导航

添加导航命令与变量

  • MainView.xaml.cs
c# 复制代码
private readonly IRegionManager regionManager;  //导航变量
public DelegateCommand<MenuBar> NavigateCmd { get; private set; } //导航命令

初始化导航命令

  • MainView.xaml.cs

    c# 复制代码
    public MainViewModel(IRegionManager regm)
    {
        MenuBars=new ObservableCollection<MenuBar>();
        CreatMenuBar();
    
        //
        this.regionManager = regm;
        NavigateCmd = new DelegateCommand<MenuBar>(Navigate);
    }

    注意:初始化应在构造函数中

绑定导航命令

添加行为命名空间
  • main.xaml
xaml 复制代码
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
添加行为,绑定导航命令
  • MainView.xmal
c# 复制代码
<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <i:InvokeCommandAction Command="{Binding NavigateCmd}" CommandParameter="{Binding ElementName=menuBar, Path=SelectedItem}" />
    </i:EventTrigger>
</i:Interaction.Triggers>

​ 完整代码为:

xaml 复制代码
<ListBox
    x:Name="menuBar"
    HorizontalContentAlignment="Stretch"
    ItemContainerStyle="{StaticResource MyListboxItemStyle}"
    ItemsSource="{Binding MenuBars}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <i:InvokeCommandAction Command="{Binding NavigateCmd}" CommandParameter="{Binding ElementName=menuBar, Path=SelectedItem}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <materialDesign:PackIcon Kind="{Binding Icon}" />
                <TextBlock Margin="10,0" Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

添加导航历史功能

添加命令定义

  • MainviewModel.cs
c# 复制代码
public DelegateCommand GoBackCmd { get; private set; }
public DelegateCommand GoFwrdCmd { get; private set; }

添加导航历史变量

  • MainviewModel.cs

    private IRegionNavigationJournal journal; //导航历史

初始化命令

  • MainviewModel.cs的构造函数中添加

      //实例化命令
      GoBackCmd = new DelegateCommand(() =>
      {
          if (journal != null && journal.CanGoBack)
              journal.GoBack();
      });
      GoFwrdCmd = new DelegateCommand(() =>
      {
          if (journal != null && journal.CanGoForward)
              journal.GoForward();
      });
    

绑定命令

  • MainView.xaml

    XAML 复制代码
    <Button
        Margin="24,0,0,0"
        materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
        Command="{Binding GoFwrdCmd}"
        Content="{materialDesign:PackIcon Kind=ArrowLeft,
                                          Size=24}"
        Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
        Style="{StaticResource MaterialDesignToolButton}"
        ToolTip="Previous Item" />
    
    <Button
        Margin="16,0,0,0"
        materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
        Command="{Binding GoBackCmd}"
        Content="{materialDesign:PackIcon Kind=ArrowRight,
                                          Size=24}"
        Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
        Style="{StaticResource MaterialDesignToolButton}"
        ToolTip="Next Item" />

添加自动关掉侧栏代码

  • MainView.xaml.cs

    c# 复制代码
    menuBar.SelectionChanged += (s, e) =>
    {
        drawerHost.IsLeftDrawerOpen = false;
    };
相关推荐
Mephisto.java37 分钟前
【大数据学习 | kafka高级部分】kafka中的选举机制
大数据·学习·kafka
Yawesh_best1 小时前
思源笔记轻松连接本地Ollama大语言模型,开启AI写作新体验!
笔记·语言模型·ai写作
南宫生1 小时前
贪心算法习题其三【力扣】【算法学习day.20】
java·数据结构·学习·算法·leetcode·贪心算法
武子康2 小时前
大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和
大数据·人工智能·学习·算法·机器学习·数据挖掘
CXDNW2 小时前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
使者大牙2 小时前
【大语言模型学习笔记】第一篇:LLM大规模语言模型介绍
笔记·学习·语言模型
ssf-yasuo3 小时前
SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记
论文阅读·笔记·prompt
As977_3 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
ajsbxi3 小时前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking3 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js