Wpf 使用 Prism 实战开发Day07

待办事项页面设计

效果图:

---

一.布局设计

页面主要分上下布局，分2行进行设计，使用 Grid.RowDefinitions 将页面分上下2行
例如：

1.  页面需要设计多少行，就在 中嵌套多少个 RowDefinitions
2.  把 Height 属性设置为auto（自动高度），目的是让第一行根据页面内容进行自适应

---

第一行内容设计 

 第一行设计，使用 StackPanel 控件

    
    
    
        全部
        待办
        已完成
    

属性说明：

1. Orientation 属性值：Horizontal-内容水平排列。Vertical-内容垂直排列。
2. 文本输入框 查找待办事项.. 提示文字, 使用MD 框架的提示,并且要引入MD 的命名空间：               

   xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"

3. 引入命名空间后，在需要提示的文本输入框中，使用 md:HintAssist.Hint="查找待办事项..." 来显示文字。

4. 文本输入框中，添加一个清除按钮：

   md:TextFieldAssist.HasClearButton="True"

5. 文本框内容垂直方向居中属性：

   VerticalAlignment="Center"

6. 水平方向居中属性：

   HorizontalAlignment="Center"

7. 下拉框默认选择第一个属性设置  SelectedIndex="0"

---

第二行内容设计

使用 ItemsControl 控件，并且该控件的固定写法如下：

然后在 ItemsControl 里面使用 WrapPanel控件，WrapPanel 控件布局默认是从左往右排，并且越出指定的空间后，自动另起一行进行排列。

---

控件布局以及排列方式定义完成后，需要使用自定义模板进行数据内容渲染。
例如：

---

•  自定义内容区域数据渲染。ItemsSource 绑定后台数据源

1. 层级属性：Panel.ZIndex="1",最顶层。

---

• 后端生成页面模拟静态数据。

例如：在ToDoViewModel 中生成静态测试数据

public class ToDoViewModel:BindableBase
 {
     public ToDoViewModel()
     {
         ToDoDtos = new ObservableCollection();
         CreateTodoList();
     }
     private ObservableCollection toDoDtos;
     /// 

     /// 创建数据的动态集合
     /// 
     public ObservableCollection ToDoDtos
     {
         get { return toDoDtos; }
         set { toDoDtos = value;RaisePropertyChanged(); }
     }
     void CreateTodoList()
     {
         for (int i = 0; i < 20; i++)
         {
             toDoDtos.Add(new ToDoDto()
             {
                 Title="标题"+i,
                 Content="测试数据..."
             });
         }
     }
 }

---

二.待办事项按钮弹出层设计

使用 md:DialogHost 控件，把整个布局都包裹住。并且点击按钮时右边需要有一个弹出的区域，要使用 md:DrawerHost 控件来实现。

• 模板固定写法如下：

---

 添加弹出层自定义内容：

    
        
            
            
                
                
                    
                    
                        
                        
                            待办
                            已完成
                        
                    
                    
                    
                    
                
            

        
        
    

1. DockPanel.Dock属性，为Top，让设置该属性的控件内容往上靠。
2. IsRightDrawerOpen ，通过设置该属性值来控制弹出层是否展开或关闭。

---

按钮点击命令写法

点击待办按钮时，通过前端 绑定命令的方式调用后台的方法，给isRightDrawerOpen 属性赋值来控制弹出层的展开或关闭。
例如：

1. 前端按钮绑定命令   Command="{Binding AddCommand}" />
2. 后端绑定命令代码实现

public class ToDoViewModel:BindableBase
 {
     public ToDoViewModel()
     {
         AddCommand = new DelegateCommand(Add);
     }

     private void Add()
     {
        //处理的逻辑
         throw new NotImplementedException();
     }

     public DelegateCommand AddCommand{ get; private set; }

 }

---

三.待办页面源码

ToDoView.xaml

    
        
            
            
                
                
                    
                    
                        
                        
                            待办
                            已完成
                        
                    
                    
                    
                    
                
            

            
                
                    
                    
                

                
                    
                    
                    
                        全部
                        待办
                        已完成
                    
                
                

                
                    
                        
                            
                        
                    
                    
                    
                        
                            
                            
                                
                                
                                    
                                    
                                
                                
                                
                                    
                                

                                
                                

                                
                                
                                
                                
                                    
                                    
                                
                            
                        
                    
                
            

        
        
    
   

 ToDoViewModel.cs

public class ToDoViewModel:BindableBase
 {
     public ToDoViewModel()
     {
         ToDoDtos = new ObservableCollection();
         CreateTodoList();
         AddCommand = new DelegateCommand(Add);
     }
     private bool isRightDrawerOpen;
     /// 

     /// 右侧编辑窗口是否展开
     /// 
     public bool IsRightDrawerOpen
     {
         get { return isRightDrawerOpen; }
         set { isRightDrawerOpen = value; RaisePropertyChanged(); }
     }


     public DelegateCommand AddCommand{ get; private set; }
     private ObservableCollection toDoDtos;
     /// 

     /// 创建数据的动态集合
     /// 
     public ObservableCollection ToDoDtos
     {
         get { return toDoDtos; }
         set { toDoDtos = value;RaisePropertyChanged(); }
     }
     void CreateTodoList()
     {
         for (int i = 0; i < 20; i++)
         {
             toDoDtos.Add(new ToDoDto()
             {
                 Title="标题"+i,
                 Content="测试数据..."
             });
         }
     }
     /// 

     /// 添加待办
     /// 
     /// 
     private void Add()
     {
         IsRightDrawerOpen=true;
     }

 }