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

设置待办事项界面

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

TodoViewModel：

c# 复制代码

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 = "正在处理中....." });
            }
        }

    }
}

创建绑定右侧命令、变量

c# 复制代码

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);
}

设置界面

xaml 复制代码

<UserControl
    x: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>
                <DockPanel
                    MinWidth="200"
                    MaxWidth="240"
                    Margin="2"
                    LastChildFill="False">
                    <TextBlock
                        Margin="10"
                        DockPanel.Dock="Top"
                        FontFamily="微软雅黑"
                        FontSize="20"
                        FontWeight="Bold"
                        Text="添加待办" />
                    <StackPanel
                        Margin="10"
                        DockPanel.Dock="Top"
                        Orientation="Horizontal">
                        <TextBlock
                            Margin="5"
                            VerticalAlignment="Center"
                            FontFamily="微软雅黑"
                            FontSize="14"
                            Text="状态" />
                        <ComboBox Margin="5">
                            <ComboBoxItem Content="已完成" FontSize="12" />
                            <ComboBoxItem Content="未完成" FontSize="12" />
                        </ComboBox>
                    </StackPanel>
                    <TextBox
                        Margin="10"
                        md:HintAssist.Hint="待办事项标题"
                        DockPanel.Dock="Top"
                        FontFamily="微软雅黑"
                        FontSize="12" />
                    <TextBox
                        MinHeight="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">
                    <TextBox
                        Width="200"
                        FontFamily="微软雅黑"
                        FontSize="14"
                        md:HintAssist.Hint="查找待办事项" />
                    <TextBlock
                        Margin="10"
                        FontSize="14"
                        Text="筛选" />
                    <ComboBox
                        Width="auto"
                        MinWidth="30"
                        FontFamily="微软雅黑"
                        FontSize="14">
                        <ComboBoxItem Content="全部" />
                        <ComboBoxItem Content="已完成" />
                        <ComboBoxItem Content="未完成" />
                    </ComboBox>


                </StackPanel>
                <Button
                    Margin="10,0"
                    HorizontalAlignment="Right"
                    Command="{Binding OpenRightContentCmd}"
                    Content="+ 添加到待办"
                    FontFamily="微软雅黑"
                    FontSize="14" />
                <ItemsControl
                    Grid.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">
                                        <TextBlock
                                            Margin="10,10"
                                            FontFamily="黑体"
                                            FontSize="14"
                                            Text="{Binding Title}" />
                                        <md:PackIcon
                                            Margin="10,10"
                                            VerticalContentAlignment="Top"
                                            DockPanel.Dock="Right"
                                            Kind="More" />
                                    </DockPanel>
                                    <TextBlock
                                        Grid.Row="1"
                                        Margin="10,5"
                                        FontFamily="黑体"
                                        FontSize="12"
                                        Opacity="0.7"
                                        Text="{Binding Content}" />
                                    <Canvas Grid.RowSpan="2" ClipToBounds="True">
                                        <Border
                                            Canvas.Top="10"
                                            Canvas.Right="-50"
                                            Width="120"
                                            Height="120"
                                            Background="#FFFFFF"
                                            CornerRadius="100"
                                            Opacity="0.1" />
                                        <Border
                                            Canvas.Top="80"
                                            Canvas.Right="-30"
                                            Width="120"
                                            Height="120"
                                            Background="#FFFFFF"
                                            CornerRadius="100"
                                            Opacity="0.1" />
                                    </Canvas>
                                    <Border
                                        Grid.RowSpan="2"
                                        Background="#ffcccc"
                                        CornerRadius="5"
                                        Opacity="0.3" />
                                </Grid>

                            </Border>

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