WPF实战学习笔记06-设置待办事项界面

设置待办事项界面

创建待办待办事项集合并初始化

• TodoViewModel：

using Mytodo.Common.Models;
using Prism.Commands;
using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Mytodo.ViewModels
{public class TodoViewModel:BindableBase{private ObservableCollection<ToDoDto>? todoDtos;/// <summary>/// todo集合/// </summary>public ObservableCollection<ToDoDto>? TodoDtos{get { return todoDtos; }set { todoDtos = value; RaisePropertyChanged(); }}public TodoViewModel(){//创建测试数据CreatTestData();OpenRightContentCmd = new DelegateCommand(Add);}void CreatTestData(){TodoDtos = new ObservableCollection<ToDoDto>();for (int i = 0; i < 20; i++){TodoDtos.Add(new ToDoDto() { Title = "待办" + i, Content = "正在处理中....." });}}}
}

创建绑定右侧命令、变量

private bool isRightOpen;public bool IsRightOpen
{get { return isRightOpen; }set { isRightOpen = value; RaisePropertyChanged(); }
}
public DelegateCommand OpenRightContentCmd { set; get; }
void Add()
{IsRightOpen = true;
}
public TodoViewModel()
{//创建测试数据OpenRightContentCmd = new DelegateCommand(Add);
}

设置界面

<UserControlx:Class="Mytodo.Views.TodoView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:Mytodo.Views"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><md:DialogHost><md:DrawerHost IsRightDrawerOpen="{Binding IsRightOpen}"><md:DrawerHost.RightDrawerContent><DockPanelMinWidth="200"MaxWidth="240"Margin="2"LastChildFill="False"><TextBlockMargin="10"DockPanel.Dock="Top"FontFamily="微软雅黑"FontSize="20"FontWeight="Bold"Text="添加待办" /><StackPanelMargin="10"DockPanel.Dock="Top"Orientation="Horizontal"><TextBlockMargin="5"VerticalAlignment="Center"FontFamily="微软雅黑"FontSize="14"Text="状态" /><ComboBox Margin="5"><ComboBoxItem Content="已完成" FontSize="12" /><ComboBoxItem Content="未完成" FontSize="12" /></ComboBox></StackPanel><TextBoxMargin="10"md:HintAssist.Hint="待办事项标题"DockPanel.Dock="Top"FontFamily="微软雅黑"FontSize="12" /><TextBoxMinHeight="50"Margin="10"md:HintAssist.Hint="待办事项内容"DockPanel.Dock="Top"FontFamily="微软雅黑"FontSize="12"TextWrapping="Wrap" /></DockPanel></md:DrawerHost.RightDrawerContent><Grid><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition /></Grid.RowDefinitions><StackPanel Margin="15,10" Orientation="Horizontal"><TextBoxWidth="200"FontFamily="微软雅黑"FontSize="14"md:HintAssist.Hint="查找待办事项" /><TextBlockMargin="10"FontSize="14"Text="筛选" /><ComboBoxWidth="auto"MinWidth="30"FontFamily="微软雅黑"FontSize="14"><ComboBoxItem Content="全部" /><ComboBoxItem Content="已完成" /><ComboBoxItem Content="未完成" /></ComboBox></StackPanel><ButtonMargin="10,0"HorizontalAlignment="Right"Command="{Binding OpenRightContentCmd}"Content="+ 添加到待办"FontFamily="微软雅黑"FontSize="14" /><ItemsControlGrid.Row="1"Margin="10"ItemsSource="{Binding TodoDtos}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><Border MinWidth="200" Margin="10"><Grid MinHeight="150"><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition /></Grid.RowDefinitions><DockPanel LastChildFill="False"><TextBlockMargin="10,10"FontFamily="黑体"FontSize="14"Text="{Binding Title}" /><md:PackIconMargin="10,10"VerticalContentAlignment="Top"DockPanel.Dock="Right"Kind="More" /></DockPanel><TextBlockGrid.Row="1"Margin="10,5"FontFamily="黑体"FontSize="12"Opacity="0.7"Text="{Binding Content}" /><Canvas Grid.RowSpan="2" ClipToBounds="True"><BorderCanvas.Top="10"Canvas.Right="-50"Width="120"Height="120"Background="#FFFFFF"CornerRadius="100"Opacity="0.1" /><BorderCanvas.Top="80"Canvas.Right="-30"Width="120"Height="120"Background="#FFFFFF"CornerRadius="100"Opacity="0.1" /></Canvas><BorderGrid.RowSpan="2"Background="#ffcccc"CornerRadius="5"Opacity="0.3" /></Grid></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid></md:DrawerHost></md:DialogHost>
</UserControl>