Wpf 使用 Prism 实战开发Day03

 一.实现左侧菜单绑定

效果图:

---

1.首先需要在项目中创建 mvvm 的架构模式

•   创建 Models ，放置实体类。

实体类需要继承自Prism 框架的 BindableBase，目的是让实体类支持数据的动态变更!

•  例如: 系统导航菜单实体类

/ 

	/// 系统导航菜单实体类
	/// 
public class MenuBar:BindableBase
 {
		private string icon;

		/// 

		/// 菜单图标
		/// 
		public string Icon
		{
get { return icon; }
set { icon = value; }
		}

		private string title;

		/// 

		/// 菜单名称
		/// 
		public string Title
		{
get { return title; }
set { title = value; }
		}

		private string nameSpace;

		/// 

		/// 菜单命名空间
		/// 
		public string NameSpace
		{
get { return nameSpace; }
set { nameSpace = value; }
		}

	}

---

• 创建View文件夹  放置前端显示页面 。例如：创建首页：MainView.xaml
• 创建ViewModel 文件夹，放置前端逻辑处理类。意思是:有前端页面同时，也要有对应的后台业务逻辑处理类。例如：MainViewModel

 

1. 使用了Prism 框架，一些视图或类的定义都是有约定的。例如：视图统一使用xxxView 结尾。视图模形统一使用xxxViewModel 结尾。这样做的原因是：第一规范，第二，方便使用 Prism 进行动态的方式绑定上下文的时候，能自动找到对应类。
2. Prism 动态上下文绑定方式，引入命名空间，把 AutoWireViewModel 设置成 True

 xmlns:prism="http://prismlibrary.com/"
 prism:ViewModelLocator.AutoWireViewModel="True"

---

2.创建MainViewModel 逻辑处理类

MainViewModel 类同样也需要继承自Prism 框架的 BindableBase 

•  创建左侧菜单的数据，需要使用到一个动态的属性集合 ObservableCollection 来存放菜单的数据

• 创建菜单数据

    public class MainViewModel: BindableBase
    {
        public MainViewModel()
        {
            MenuBars=new ObservableCollection();
            CreateMenuBar();
        }
        private ObservableCollection menuBars;

        public ObservableCollection MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged(); }
        }
        void CreateMenuBar()
        {
            MenuBars.Add(new MenuBar() { Icon="Home",Title="首页",NameSpace="IndexView"});
            MenuBars.Add(new MenuBar() { Icon = "NotebookCheckOutline", Title = "待办事项", NameSpace = "ToDoView" });
            MenuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "忘备录", NameSpace = "MemoView" });
            MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });
        }
    }

• NameSpace：主要用于导航
• Icon：是Material DesignThemes UI 框架里面的图标名称

---

3.MainView.xaml 前端绑定数据

•  列表数据的绑定，使用ListBox 的自定义模板，也就是 ListBox.ItemTemplate，并且写法是固定的

• 例如：结合上面创建MainViewModel 类，给MainView.xaml 渲染数据

•  MainView.xaml 添加动态绑定 上下文

xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"

注意：项目中的MainWindow.xaml 已经改成了MainView.xaml，并且把启动页设置成 MainView了

• 最终项目结构 

 4.左侧菜单样式调整

• 在App.xaml 资源文件中，更改默认的主题颜色

• 更改左侧列表选择的样式 

 重写自定义样式

• 在App.xaml 文件中 资源字典 ResourceDictionary 节点中，设置Style 属性来进行样式重写

Style 使用方式

1.  TargetType ：设置作用的目标类型
2.  Setter ：设计器，里面有2个常用属性，分别是Property 和Value。用来改变设置作用的目标类型一些属性的值
3. key: 通过指定的key 来使用重写的样式

例如：设置ListBoxItem 属性中的最小行高为40

     3. Property 中有一个特别的属性：Template。用于改变控件的外观样式。并且也有固定的写法

 TargetType 有2种写法

1. 一种是直接用Style 设置一些属性，可以这样写 TargetType="ListBoxItem"
2. 另外一种写法是，当需要使用到自定义模板，也就是要改变控件的外观样式时，Property 设置的值为 Template，里面TargetType 写法就变成这样 TargetType="{x:Type ListBoxItem}"
3. 使用自定义的模板时，需要使用到一个属性 ContentPresenter，把原有模板的属性原封不动的投放到自定义模板。

    4. 触发器，它按条件应用属性值或执行操作

 如果使用Template 自定义控件样式后，需要搭配触发器进行使用。

例如：

   5. 样式写完后，需要在MainView.xmal 的ListBox中使用这个样式资源文件，通过指定Key 来使用。

 二.源码

1.MainView.xaml

2.MainViewModel

namespace MyToDo.ViewModels
{
    public class MainViewModel: BindableBase
    {
        public MainViewModel()
        {
            MenuBars=new ObservableCollection();
            CreateMenuBar();
        }
        private ObservableCollection menuBars;

        public ObservableCollection MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged(); }
        }
        void CreateMenuBar()
        {
            MenuBars.Add(new MenuBar() { Icon="Home",Title="首页",NameSpace="IndexView"});
            MenuBars.Add(new MenuBar() { Icon = "NotebookCheckOutline", Title = "待办事项", NameSpace = "ToDoView" });
            MenuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "忘备录", NameSpace = "MemoView" });
            MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });
        }
    }
}

3.App.xaml