WPF实战学习笔记04-菜单导航-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterForNavigation<IndexView, IndexViewModel>();
    containerRegistry.RegisterForNavigation<TodoView, TodoViewModel>();
    containerRegistry.RegisterForNavigation<MemoView, MemoViewModel>();
    containerRegistry.RegisterForNavigation<SettingsView, SettingsViewModel>();
}

添加区域

定义区域名字

PrismManager.cs

namespace Mytodo.Extensions
{
    public static class PrismManager
    {
        public static readonly string MainViewRegionName = "MainViewRegion"; //定义Nanme变量 
    }
}

注册区域，绑定名字

MainView.xaml

定义命名空间

xmlns:ext="clr-namespace:Mytodo.Extensions"

注册控件区域

<materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel>
	<materialDesign:ColorZone...>
	<ContentControl prism:RegionManager.RegionName="{x:Static ext:PrismManager.MainViewRegionName}" /> 
</DockPanel>

添加导航

添加导航命令与变量

MainView.xaml.cs

private readonly IRegionManager regionManager;  //导航变量
public DelegateCommand<MenuBar> NavigateCmd { get; private set; } //导航命令

初始化导航命令

MainView.xaml.cs

public MainViewModel(IRegionManager regm)
{
    MenuBars=new ObservableCollection<MenuBar>();
    CreatMenuBar();

    //
    this.regionManager = regm;
    NavigateCmd = new DelegateCommand<MenuBar>(Navigate);
}

注意：初始化应在构造函数中

绑定导航命令

添加行为命名空间

main.xaml

xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

添加行为，绑定导航命令

MainView.xmal

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <i:InvokeCommandAction Command="{Binding NavigateCmd}" CommandParameter="{Binding ElementName=menuBar, Path=SelectedItem}" />
    </i:EventTrigger>
</i:Interaction.Triggers>

完整代码为：

<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

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

<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文章来源地址https://www.toymoban.com/news/detail-602976.html

menuBar.SelectionChanged += (s, e) =>
{
    drawerHost.IsLeftDrawerOpen = false;
};

到了这里，关于WPF实战学习笔记04-菜单导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

WPF实战学习笔记04-菜单导航