WPF实战学习笔记05-首页界面
首页界面
新建文件
-
添加文件［类型：用户控件］
./Common/Models/TaskBars.cs
./Common/Models/ToDoDto.cs
./Common/Models/MemoDto.cs
新建类
TaskBars.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Mytodo.Common.Models
{public class TaskBar{private string? title;private string? content;private string? target;private string? color;private string? icon;public string? Icon{get { return icon; }set { icon = value; }}public string? Title{get { return title; }set { title = value; }}public string? Content{get { return content; }set { content = value; }}public string? Color{get { return color; }set { color = value; }}public string? Target{get { return target; }set { target = value; }}}
}
TodoDto.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Mytodo.Common.Models
{public class ToDoDto:BaseTodo{private string? title;private string? content;private int status;public int Status{get { return status; }set { status = value; }}public string? Content{get { return content; }set { content = value; }}public string? Title{get { return title; }set { title = value; }}}
}
MemoDto.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Mytodo.Common.Models
{/// <summary>/// 备忘录/// </summary>public class MemoDto:BaseTodo{private string? title;private string? content;private int status;public int Status{get { return status; }set { status = value; }}public string? Content{get { return content; }set { content = value; }}public string? Title{get { return title; }set { title = value; }}}
}BaseTodo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Mytodo.Common.Models
{public class BaseTodo{private int id;private DateTime createDate;private DateTime updateDate;/// <summary>/// 项修改日期/// </summary>public DateTime UpdateDate{get { return updateDate; }set { updateDate = value; }}/// <summary>/// 项创建时间/// </summary>public DateTime CreateDate{get { return createDate; }set { createDate = value; }}/// <summary>/// 项ID/// </summary>public int Id{get { return id; }set { id = value; }}}
}创建TaskBars集合变量并初始化
创建变量
-
IndexViewModel
private ObservableCollection<TaskBar> taskBars;
初始化
- IndexViewModel（代码在构造函数中）
TaskBars=new ObservableCollection<TaskBar>();
TaskBars.Add(new TaskBar { Icon = "CalendarBlankOutline", Title = "汇总", Color = "#FF00FF00", Content = "27", Target = "" });
TaskBars.Add(new TaskBar { Icon = "CalendarMultipleCheck", Title = "已完成", Color = "#6B238E", Content = "24", Target = "" });
TaskBars.Add(new TaskBar { Icon = "ChartLine", Title = "完成比例", Color = "#32CD99", Content = "100%", Target = "" });
TaskBars.Add(new TaskBar { Icon = "CheckboxMarked", Title = "备忘录", Color = "#5959AB", Content = "13", Target = "" });
创建todoDtos、memoDtos集合变量并初始化
-
IndexViewModel
private ObservableCollection<ToDoDto> todoDtos; private ObservableCollection<MemoDto> memoDtos; public ObservableCollection<MemoDto> MemoDtos {get { return memoDtos; }set { memoDtos = value; RaisePropertyChanged(); } }public ObservableCollection<ToDoDto> TodoDtos {get { return todoDtos; }set { todoDtos = value; RaisePropertyChanged(); } } void CreatTestData() {TodoDtos = new ObservableCollection<ToDoDto>();MemoDtos = new ObservableCollection<MemoDto>();for (int i = 0; i < 20; i++){TodoDtos.Add(new ToDoDto() { Title = "待办" + i, Content = "正在处理中....." });MemoDtos.Add(new MemoDto() { Title = "备忘" + i, Content = "正在忘记中....." });} } public IndexViewModel() {Title = "您好，2022";TaskBars=new ObservableCollection<TaskBar>();TaskBars.Add(new TaskBar { Icon = "CalendarBlankOutline", Title = "汇总", Color = "#FF00FF00", Content = "27", Target = "" });TaskBars.Add(new TaskBar { Icon = "CalendarMultipleCheck", Title = "已完成", Color = "#6B238E", Content = "24", Target = "" });TaskBars.Add(new TaskBar { Icon = "ChartLine", Title = "完成比例", Color = "#32CD99", Content = "100%", Target = "" });TaskBars.Add(new TaskBar { Icon = "CheckboxMarked", Title = "备忘录", Color = "#5959AB", Content = "13", Target = "" });CreatTestData(); }
定义界面
<UserControlx:Class="Mytodo.Views.IndexView"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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><Grid><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="auto" /><RowDefinition /></Grid.RowDefinitions><TextBlockMargin="20,10"FontSize="30"Text="{Binding Title}" /><ItemsControl Grid.Row="1" ItemsSource="{Binding TaskBars}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4" /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><BorderMargin="10"Background="{Binding Color}"CornerRadius="5"><Border.Style><Style TargetType="Border"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Effect"><Setter.Value><DropShadowEffectBlurRadius="10"ShadowDepth="1"Color="#dddddd" /></Setter.Value></Setter></Trigger></Style.Triggers></Style></Border.Style><Grid><StackPanel Margin="20"><materialDesign:PackIconWidth="25"Height="30"Margin="5"Kind="{Binding Icon}" /><TextBlockMargin="5"FontSize="10"Text="{Binding Title}" /><TextBlockMargin="5"FontSize="30"Text="{Binding Content}" /></StackPanel><Canvas 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></Grid></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl><Grid Grid.Row="2"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><BorderGrid.Column="0"Margin="10,20"Background="#bebebe"CornerRadius="5"Opacity="0.1" /><BorderGrid.Column="1"Margin="10,20"Background="#bebebe"CornerRadius="5"Opacity="0.1" /><DockPanel Margin="10,0"><DockPanelGrid.Column="0"Margin="10,20"DockPanel.Dock="Top"LastChildFill="False"><TextBlockMargin="10"FontFamily="微软雅黑"FontSize="25"FontWeight="Bold"Text="待办事项" /><ButtonWidth="30"Height="30"Margin="10"VerticalAlignment="Top"Content="{materialDesign:PackIcon Kind=Add}"DockPanel.Dock="Right"Style="{StaticResource MaterialDesignFloatingActionAccentButton}" /></DockPanel><ListBoxMargin="5"HorizontalContentAlignment="Stretch"ItemsSource="{Binding MemoDtos}"ScrollViewer.VerticalScrollBarVisibility="Hidden"><ListBox.ItemTemplate><DataTemplate><DockPanel LastChildFill="False"><ToggleButton Width="40" DockPanel.Dock="Right" /><StackPanel><TextBlock FontSize="14" Text="{Binding Title}" /><TextBlockFontSize="24"Opacity="0.5"Text="{Binding Content}" /></StackPanel></DockPanel></DataTemplate></ListBox.ItemTemplate></ListBox></DockPanel><DockPanel Grid.Column="1" Margin="10,0"><DockPanelMargin="10,20"DockPanel.Dock="Top"LastChildFill="False"><TextBlockMargin="10"FontFamily="微软雅黑"FontSize="25"FontWeight="Bold"Text="备忘录" /><ButtonWidth="30"Height="30"Margin="10"VerticalAlignment="Top"Content="{materialDesign:PackIcon Kind=Add}"DockPanel.Dock="Right"Style="{StaticResource MaterialDesignFloatingActionAccentButton}" /></DockPanel><ListBoxMargin="5"ItemsSource="{Binding TodoDtos}"ScrollViewer.VerticalScrollBarVisibility="Hidden"><ListBox.ItemTemplate><DataTemplate><StackPanel><TextBlock FontSize="14" Text="{Binding Title}" /><TextBlockFontSize="24"Opacity="0.5"Text="{Binding Content}" /></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></DockPanel></Grid></Grid>
</UserControl>