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;
    };
相关推荐
Y4090011 小时前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
笑衬人心。1 小时前
TCP 拥塞控制算法 —— 慢启动(Slow Start)笔记
笔记·tcp/ip·php
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
Andy杨2 小时前
20250718-5-Kubernetes 调度-Pod对象:重启策略+健康检查_笔记
笔记·容器·kubernetes
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python
iFulling11 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋11 小时前
AI算法之图像识别与分类
人工智能·学习·算法
谢白羽11 小时前
jenkins搭建笔记
运维·笔记·jenkins
xiaoli232711 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习