（五）待办和备忘录

待办

view层

 <md:DialogHost>
     <!--  为了添加右侧展开栏  -->
     <md:DrawerHost IsRightDrawerOpen="{Binding IsRightDrawerOpen}">
         <md:DrawerHost.RightDrawerContent>
             <DockPanel Width="300" LastChildFill="False">
                 <TextBlock
                     Padding="20,10"
                     DockPanel.Dock="Top"
                     FontSize="20"
                     FontWeight="Bold"
                     Text="添加待办" />

                 <StackPanel
                     Margin="20"
                     DockPanel.Dock="top"
                     Orientation="Horizontal">
                     <TextBlock VerticalAlignment="Center" Text="状态:   " />
                     <ComboBox>
                         <ComboBoxItem>待办</ComboBoxItem>
                         <ComboBoxItem>已完成</ComboBoxItem>
                     </ComboBox>
                 </StackPanel>

                 <TextBox
                     Margin="20,0"
                     md:HintAssist.Hint="请输入待办概要"
                     DockPanel.Dock="top" />
                 <TextBox
                     Margin="20"
                     MinHeight="100"
                     md:HintAssist.Hint="请输入待办内容"
                     DockPanel.Dock="top" />

                 <Button
                     Margin="20,0"
                     Content="添加到待办"
                     DockPanel.Dock="top" />
             </DockPanel>
         </md:DrawerHost.RightDrawerContent>
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="auto" />
                 <RowDefinition />
             </Grid.RowDefinitions>

             <StackPanel Margin="15,0,0,0" Orientation="Horizontal">
                 <TextBox
                     Width="250"
                     VerticalAlignment="Center"
                     md:HintAssist.Hint="查找待办事项..."
                     md:TextFieldAssist.HasClearButton="True" />
                 <TextBlock
                     Margin="10,0"
                     VerticalAlignment="Center"
                     Text="筛选:" />
                 <ComboBox SelectedIndex="0">
                     <ComboBoxItem>全部</ComboBoxItem>
                     <ComboBoxItem>待办</ComboBoxItem>
                     <ComboBoxItem>已完成</ComboBoxItem>
                 </ComboBox>
             </StackPanel>

             <Button
                 Margin="10,5"
                 HorizontalAlignment="Right"
                 Command="{Binding AddCommand}"
                 Content="+添加待办" />

             <ItemsControl
                 Grid.Row="1"
                 HorizontalAlignment="Center"
                 ItemsSource="{Binding ToDoDtos}">
                 <ItemsControl.ItemsPanel>
                     <ItemsPanelTemplate>
                         <!--容器会自动换行-->
                         <WrapPanel />
                     </ItemsPanelTemplate>
                 </ItemsControl.ItemsPanel>

                 <ItemsControl.ItemTemplate>
                     <DataTemplate>
                         <Grid
                             Width="220"
                             MinHeight="180"
                             MaxHeight="250"
                             Margin="8">
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="auto" />
                                 <RowDefinition />
                             </Grid.RowDefinitions>
                             <md:PopupBox HorizontalAlignment="Right" Panel.ZIndex="1">
                                 <Button Content="删除" />
                             </md:PopupBox>

                             <Border
                                 Grid.RowSpan="2"
                                 Background="Green"
                                 CornerRadius="3" />

                             <TextBlock
                                 Padding="10,5"
                                 FontWeight="Bold"
                                 Text="{Binding Title}" />
                             <TextBlock
                                 Grid.Row="1"
                                 Padding="10,5"
                                 Text="{Binding Content}" />

                             <!--  圆圈图案  -->
                             <Canvas Grid.RowSpan="2" ClipToBounds="True">
                                 <Border
                                     Canvas.Top="10"
                                     Canvas.Right="-50"
                                     Width="120"
                                     Height="120"
                                     Background="White"
                                     CornerRadius="100"
                                     Opacity="0.1" />
                                 <Border
                                     Canvas.Top="80"
                                     Canvas.Right="-30"
                                     Width="120"
                                     Height="120"
                                     Background="White"
                                     CornerRadius="100"
                                     Opacity="0.1" />
                             </Canvas>
                         </Grid>
                     </DataTemplate>
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
         </Grid>
     </md:DrawerHost>
 </md:DialogHost>

viewmodel层

只是测试代码

public class ToDoViewModel : BindableBase
{
    public ToDoViewModel()
    {
        ToDoDtos = new ObservableCollection<ToDoDto>();
        CreateToDoList();
        AddCommand = new DelegateCommand(Add);
    }

    private bool isRightDrawerOpen;
    //右侧编辑窗口是否展开
    public bool IsRightDrawerOpen
    {
        get { return isRightDrawerOpen; }
        set { isRightDrawerOpen = value; RaisePropertyChanged(); }
    }
    //添加待办
    private void Add()
    {
        IsRightDrawerOpen = true;
    }

    public DelegateCommand AddCommand { get; private set; }
    private ObservableCollection<ToDoDto> toDoDtos;

    public ObservableCollection<ToDoDto> ToDoDtos
    {
        get { return toDoDtos; }
        set { toDoDtos = value; RaisePropertyChanged(); }
    }

    void CreateToDoList()
    {
        for (int i = 0; i < 20; i++)
        {
            ToDoDtos.Add(new ToDoDto()
            {
                Title = "标题" + i,
                Content = "测试数据..."
            });
        }
    }
}

备忘录

view层

同待办稍作改动

<md:DialogHost>
    <!--  为了添加右侧展开栏  -->
    <md:DrawerHost IsRightDrawerOpen="{Binding IsRightDrawerOpen}">
        <md:DrawerHost.RightDrawerContent>
            <DockPanel Width="300" LastChildFill="False">
                <TextBlock
                    Padding="20,10"
                    DockPanel.Dock="Top"
                    FontSize="20"
                    FontWeight="Bold"
                    Text="添加备忘录" />

                <TextBox
                    Margin="20,0"
                    md:HintAssist.Hint="请输入备忘录概要"
                    DockPanel.Dock="top" />
                <TextBox
                    MinHeight="100"
                    Margin="20"
                    md:HintAssist.Hint="请输入备忘录内容"
                    DockPanel.Dock="top" />

                <Button
                    Margin="20,0"
                    Content="添加到备忘录"
                    DockPanel.Dock="top" />
            </DockPanel>
        </md:DrawerHost.RightDrawerContent>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition />
            </Grid.RowDefinitions>

            <StackPanel Margin="15,0,0,0" Orientation="Horizontal">
                <TextBox
                    Width="250"
                    VerticalAlignment="Center"
                    md:HintAssist.Hint="查找备忘录..."
                    md:TextFieldAssist.HasClearButton="True" />
            </StackPanel>

            <Button
                Margin="10,5"
                HorizontalAlignment="Right"
                Command="{Binding AddCommand}"
                Content="+添加备忘录" />

            <ScrollViewer Grid.Row="1">
                <ItemsControl HorizontalAlignment="Center" ItemsSource="{Binding MemoDtos}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <!--  容器会自动换行  -->
                            <WrapPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <md:TransitioningContent OpeningEffect="{md:TransitionEffect Kind=ExpandIn}">
                                <Grid
                                    Width="220"
                                    MinHeight="180"
                                    MaxHeight="250"
                                    Margin="8">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <md:PopupBox HorizontalAlignment="Right" Panel.ZIndex="1">
                                        <Button Content="删除" />
                                    </md:PopupBox>

                                    <Border
                                        Grid.RowSpan="2"
                                        Background="Green"
                                        CornerRadius="3" />

                                    <TextBlock
                                        Padding="10,5"
                                        FontWeight="Bold"
                                        Text="{Binding Title}" />
                                    <TextBlock
                                        Grid.Row="1"
                                        Padding="10,5"
                                        Text="{Binding Content}" />

                                    <!--  圆圈图案  -->
                                    <Canvas Grid.RowSpan="2" ClipToBounds="True">
                                        <Border
                                            Canvas.Top="10"
                                            Canvas.Right="-50"
                                            Width="120"
                                            Height="120"
                                            Background="White"
                                            CornerRadius="100"
                                            Opacity="0.1" />
                                        <Border
                                            Canvas.Top="80"
                                            Canvas.Right="-30"
                                            Width="120"
                                            Height="120"
                                            Background="White"
                                            CornerRadius="100"
                                            Opacity="0.1" />
                                    </Canvas>
                                </Grid>
                            </md:TransitioningContent>

                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </md:DrawerHost>
</md:DialogHost>

viewmodel层

 public class MemoViewModel : BindableBase
 {
     public MemoViewModel()
     {
         MemoDtos = new ObservableCollection<MemoDto>();
         CreateToDoList();
         AddCommand = new DelegateCommand(Add);
     }

     private bool isRightDrawerOpen;
     //右侧编辑窗口是否展开
     public bool IsRightDrawerOpen
     {
         get { return isRightDrawerOpen; }
         set { isRightDrawerOpen = value; RaisePropertyChanged(); }
     }
     //添加备忘录
     private void Add()
     {
         IsRightDrawerOpen = true;
     }

     public DelegateCommand AddCommand { get; private set; }
     private ObservableCollection<MemoDto> memoDtos;

     public ObservableCollection<MemoDto> MemoDtos
     {
         get { return memoDtos; }
         set { memoDtos = value; RaisePropertyChanged(); }
     }

     void CreateToDoList()
     {
         for (int i = 0; i < 20; i++)
         {
             MemoDtos.Add(new MemoDto()
             {
                 Title = "标题" + i,
                 Content = "测试数据..."
             });
         }
     }
 }

注意添加动画和滚动条