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;
    };
相关推荐
shizidushu9 分钟前
Hugging Face NLP课程学习记录 - 3. 微调一个预训练模型
人工智能·学习·自然语言处理·微调·huggingface
JasmineX-133 分钟前
数据结构——顺序表(c语言笔记)
c语言·开发语言·数据结构·笔记
夜流冰1 小时前
工程师 - Onion Architecture in Software Development
笔记
番薯大佬2 小时前
Python学习-day9 字典Dictionary
网络·python·学习
一位搞嵌入式的 genius2 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
..过云雨3 小时前
04.【Linux系统编程】基础开发工具2(makefile、进度条程序实现、版本控制器Git、调试器gdb/cgdb的使用)
linux·笔记·学习
理想国的女研究僧3 小时前
Jupyter Notebook操作指南(1)
ide·python·学习·jupyter
月屯3 小时前
docke笔记下篇
笔记
GilgameshJSS4 小时前
【学习K230-例程19】GT6700-TCP-Client
网络·python·网络协议·学习·tcp/ip
悠悠~飘4 小时前
php学习(第五天)
学习·php