Wpf 使用 Prism 实战开发Day09

设置模块设计

1.效果图

一.系统设置模块，主要有个性化(用于更改主题颜色)，系统设置，关于更多，3个功能点。

个性化的颜色内容样式，主要是从 Material Design Themes UI简称md、提供的demo里复制代码过来使用的。

 1.设置模块里面左侧导航栏（个性化、系统设置、关于更多）实现，该功能点主要用到Prism 框架的导航模块来实现。 

---

• 整体设置界面布局，主要分上下2行，第1行是设置字体以及一条横线。第2行放置整个左侧导航栏以及展现对应的动态内容。
• 横线使用 Border 来实现 ，设置颜色属性 BorderBrush，设置粗细属性 BorderThickness
• 第2行，根据内容布局，重新在Grid 里面创建 2列。例如，1列用于放置导航栏左侧菜单，2列用于放置，当点击导航栏菜单时动态展现的内容区域。

SettingsView.xaml  

1.  MyListBoxItemStyle 是App.xaml 里定义的一个静态资源文件。
2.   App.xaml 文件源码在第3章节

---

 PrismManager 导航区域名称管理扩展类，添加设置页区域动态展示内容区域一个名称。

    public static class PrismManager
    {
        /// 

        /// 首页区域
        /// 
        public static readonly string MainViewRegionName = "MainViewReion";

        /// 

        /// 设置页区域
        /// 
        public static readonly string SettingsViewRegionName = "SettingsViewRegionName";

    }

---

左侧导航菜单栏对应后端逻辑代码 实现

SettingsViewModel.cs

public class SettingsViewModel: BindableBase
{
    public SettingsViewModel(IRegionManager regionManager)
    {
        MenuBars=new ObservableCollection();
        NavigateCommand = new DelegateCommand(Navigate);
        this.regionManager = regionManager;
        CreateMenuBar();
    }
    /// 

    /// 导航命令
    /// 
    public DelegateCommand NavigateCommand { get; private set; }


    private ObservableCollection menuBars;
    private readonly IRegionManager regionManager;
    /// 

    /// 导航日志
    /// 
    private IRegionNavigationJournal journal;
    public ObservableCollection MenuBars
    {
        get { return menuBars; }
        set { menuBars = value; RaisePropertyChanged(); }
    }
    void CreateMenuBar()
    {
        MenuBars.Add(new MenuBar() { Icon = "Bowling", Title = "个性化", NameSpace = "SkinView" });
        MenuBars.Add(new MenuBar() { Icon = "CogOutline", Title = "系统设置", NameSpace = "" });
        MenuBars.Add(new MenuBar() { Icon = "InformationOutline", Title = "关于更多", NameSpace = "AboutView" });
    }
    /// 

    /// 导航方法
    /// 
    /// 菜单
    private void Navigate(MenuBar bar)
    {
        //命名空间为空，不进行导航
        if (bar == null || string.IsNullOrEmpty(bar.NameSpace)) return;

        regionManager.Regions[PrismManager.SettingsViewRegionName].RequestNavigate(bar.NameSpace);
    }
}

完成以上步骤后，就能显示左侧菜单导航栏了。

---

2.左侧菜单点击时，右侧区域需动态展示对应的内容

• 当点击对应的导航菜单，例如个性化或系统设置或关于更多时，右侧需要根据不同的导航菜单，动态展现不同的内容。
• 需要创建右侧内容区域对应的视图(V)-业务逻辑(VM)-实体类(M)，俗称MVVM 模式。

以个性化 （SkinView）为例：只需要创建SkinView.xaml 和 SkinViewModel。

创建完毕后，需要在 App.xaml.cs 中，进行模块注入。

 containerRegistry.RegisterForNavigation();

---

 二.个性化（SkinView）页面功能实现

1. 个性化内容页面分上下2行，只需要创建一个2行即可。 
2. 添加命名空间  xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
3. UserControl.Resources 表示当前用户控件的资源文件（当前窗口的资源文件）
4. RelativeSource={RelativeSource AncestorType=local:SkinView} 表示的是查找绑定，需要绑定到当前的SkinView
5. 添加颜色转换器
6. 转换器命名空间 xmlns:converters="clr-namespace:MyToDo.Common.Converters"

---

SkinView.xaml

---

SkinViewModel.cs

public class SkinViewModel: BindableBase
{
    public SkinViewModel()
    {
        ChangeHueCommand = new DelegateCommand