菜单导航
添加文件与文件夹
- 添加文件夹
./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
xamlprotected 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; };