首页界面
新建文件
-
添加文件[类型:用户控件]
./Common/Models/TaskBars.cs
./Common/Models/ToDoDto.cs
./Common/Models/MemoDto.cs
新建类
TaskBars.cs
c#
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
c#
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
c#
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
c#
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
c#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
c#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(); }
定义界面
xaml
<UserControl
x: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>
<TextBlock
Margin="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>
<Border
Margin="10"
Background="{Binding Color}"
CornerRadius="5">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect
BlurRadius="10"
ShadowDepth="1"
Color="#dddddd" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<StackPanel Margin="20">
<materialDesign:PackIcon
Width="25"
Height="30"
Margin="5"
Kind="{Binding Icon}" />
<TextBlock
Margin="5"
FontSize="10"
Text="{Binding Title}" />
<TextBlock
Margin="5"
FontSize="30"
Text="{Binding Content}" />
</StackPanel>
<Canvas 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>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Margin="10,20"
Background="#bebebe"
CornerRadius="5"
Opacity="0.1" />
<Border
Grid.Column="1"
Margin="10,20"
Background="#bebebe"
CornerRadius="5"
Opacity="0.1" />
<DockPanel Margin="10,0">
<DockPanel
Grid.Column="0"
Margin="10,20"
DockPanel.Dock="Top"
LastChildFill="False">
<TextBlock
Margin="10"
FontFamily="微软雅黑"
FontSize="25"
FontWeight="Bold"
Text="待办事项" />
<Button
Width="30"
Height="30"
Margin="10"
VerticalAlignment="Top"
Content="{materialDesign:PackIcon Kind=Add}"
DockPanel.Dock="Right"
Style="{StaticResource MaterialDesignFloatingActionAccentButton}" />
</DockPanel>
<ListBox
Margin="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}" />
<TextBlock
FontSize="24"
Opacity="0.5"
Text="{Binding Content}" />
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
<DockPanel Grid.Column="1" Margin="10,0">
<DockPanel
Margin="10,20"
DockPanel.Dock="Top"
LastChildFill="False">
<TextBlock
Margin="10"
FontFamily="微软雅黑"
FontSize="25"
FontWeight="Bold"
Text="备忘录" />
<Button
Width="30"
Height="30"
Margin="10"
VerticalAlignment="Top"
Content="{materialDesign:PackIcon Kind=Add}"
DockPanel.Dock="Right"
Style="{StaticResource MaterialDesignFloatingActionAccentButton}" />
</DockPanel>
<ListBox
Margin="5"
ItemsSource="{Binding TodoDtos}"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock FontSize="14" Text="{Binding Title}" />
<TextBlock
FontSize="24"
Opacity="0.5"
Text="{Binding Content}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</Grid>
</Grid>
</UserControl>