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;
    };
相关推荐
常州晟凯电子科技3 分钟前
海思SS626开发笔记之环境搭建和SDK编译
人工智能·笔记·嵌入式硬件·物联网
崎岖Qiu5 分钟前
【OS笔记04】:进程和线程2-进程控制
笔记·操作系统·os
悠哉悠哉愿意15 分钟前
【ROS2学习笔记】URDF 机器人建模
笔记·学习·机器人·ros2
智者知已应修善业29 分钟前
【51单片机32个灯,第一次亮1,2。第二次亮2,3。第三次亮3,4。。。。】2023-2-10
c语言·经验分享·笔记·嵌入式硬件·51单片机
Dream_言十39 分钟前
光通信|可旋转DNN赋能OAM模式可控路由
神经网络·学习·dnn·论文笔记
nnerddboy1 小时前
QT(c++)开发自学笔记:1.串口
c++·笔记·qt
2401_831501731 小时前
Python学习之Day05学习(定制数据对象,面向对象)
前端·python·学习
qianmo20212 小时前
乐理知识学习内容
学习
岑梓铭2 小时前
计算机网络第四章(10)——网络层《路由算法+路由协议》
网络·笔记·计算机网络·考研·智能路由器·408
YongCheng_Liang3 小时前
网络工程师笔记10-BGP协议
运维·网络·笔记