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;
    };
相关推荐
板栗焖小鸡5 分钟前
STM32-PWM驱动无源蜂鸣器
stm32·学习
X_StarX7 分钟前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Code季风9 分钟前
Gin 中间件详解与实践
学习·中间件·golang·go·gin
智者知已应修善业2 小时前
【51单片机用数码管显示流水灯的种类是按钮控制数码管加一和流水灯】2022-6-14
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
孞㐑¥6 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
sealaugh328 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
水木兰亭9 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
鱼摆摆拜拜9 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
aha-凯心9 小时前
vben 之 axios 封装
前端·javascript·学习
freexyn10 小时前
Matlab自学笔记六十一:快速上手解方程
数据结构·笔记·matlab