Wpf 使用 Prism 实战开发Day08

备忘录页面设计

1.效果图

一.布局设计跟第7章节一样，只是内容方面发生变化，其他样式都一样。直接把代码粘出来了

MemoView.xaml 页面代码

二.后端测试数据生成，基本也跟第7章节一样，只是对应的实体类名称不一样。当前 MemoViewModel.cs 类源码如下：

  public class MemoViewModel : BindableBase
   {
       public MemoViewModel()
       {
           MemoDtos = new ObservableCollection();
           CreateMemoList();
           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 memoDtos;
       /// 

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

       /// 添加备忘录
       /// 
       /// 
       private void Add()
       {
           IsRightDrawerOpen = true;
       }

   }

三.添加页面滚动条，目前整个页面，如果内容超出页面范围，是不能进行滚动的。

     1. 在 ItemsControl 中，添加滚动条 ScrollViewer

 这样使用ScrollViewer 把内容区域包裹起来，就能让内容区域支持滚动了

      2. 添加滚动条后的效果图如下： 

---

四.添加动画，打开设备录或待办事项页面时，显示一个动画效果。

使用md 中的一个自带动画 md:TransitioningContent 来实现该功能 

• 需要设置一个属性，OpeningEffect：打开的效果。并且该属性的值有很多种动画类型。例如，当前设置动画效果，Kind=ExpandIn

     1.在 DataTemplate 数据模板中，添加 md:TransitioningContent，表示在展示数据的时候添加一个动画效果。最后效果如下：

五.MemoView.xaml 完整源码