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;
};