（四）首页设计
第一部分
效果：
1.先确定框架
2.完善model层和viewmodel层
- 创建实体类
//任务栏
public class TaskBar : BindableBase
{
private string icon;//图标
private string title;//标题
private string content;//内容
private string color;//背景颜色
private string target;//触发目标
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; }
}
}
- 创建任务栏
IndexViewModel.cs
public IndexViewModel()
{
TaskBars = new ObservableCollection<TaskBar>();
CreateTaskBars();
}
private ObservableCollection<TaskBar> taskBars;
public ObservableCollection<TaskBar> TaskBars
{
get { return taskBars; }
set { taskBars = value; RaisePropertyChanged(); }
}
private void CreateTaskBars()
{
TaskBars.Add(new TaskBar() { Icon = "ClockFast", Title = "汇总", Content = "9", Color = "#FF0CA0FF", Target = "" });
TaskBars.Add(new TaskBar() { Icon = "ClockCheckOutline", Title = "已完成", Content = "9", Color = "#FF1ECA3A", Target = "" });
TaskBars.Add(new TaskBar() { Icon = "ChartLineVariant", Title = "完成比例", Content = "100%", Color = "#FF02C6DC", Target = "" });
TaskBars.Add(new TaskBar() { Icon = "PlaylistStar", Title = "备忘录", Content = "19", Color = "#FFFFA000", Target = "" });
}
- 和view层绑定
![image]()
3.样式休整
- 调节元素边距，大小，格式（是否加粗）
- 调节容器边距，样式（如圆角）
- 背景圆角
- ClipToBounds="True"切割外部图案
- CornerRadius设置圆角100最圆
- 第一行文字格式修改
4. 第三行内容
- 框架:第二行分2列
![image]()
- 具体内容见完整代码
第二部分 列表部分
1. 创建实体类
//待办
public class ToDoDto : BaseDto
{
private string title;//标题
private string content;//内容
private int status; //状态
public string Title
{
get { return title; }
set { title = value; }
}
public string Content
{
get { return content; }
set { content = value; }
}
public int Status
{
get { return status; }
set { status = value; }
}
}
//备忘录
public class MemoDto : BaseDto
{
private string title;//标题
private string content;//内容
private int status; //状态
public string Title
{
get { return title; }
set { title = value; }
}
public string Content
{
get { return content; }
set { content = value; }
}
public int Status
{
get { return status; }
set { status = value; }
}
}
//公共信息类
public class BaseDto
{
private int id;
private DateTime createDate;
private DateTime updateDate;
public int Id
{
get { return id; }
set { id = value; }
}
public DateTime CreateDate
{
get { return createDate; }
set { createDate = value; }
}
public DateTime UpdateDate
{
get { return updateDate; }
set { updateDate = value; }
}
}
2. 在业务层写测试代码，以后会替换
private ObservableCollection<ToDoDto> toDoDtos;
public ObservableCollection<ToDoDto> ToDoDtos
{
get { return toDoDtos; }
set { toDoDtos = value; RaisePropertyChanged(); }
}
private ObservableCollection<MemoDto> memoDtos;
public ObservableCollection<MemoDto> MemoDtos
{
get { return memoDtos; }
set { memoDtos = value; RaisePropertyChanged(); }
}
void CreateTestData()//放在构造函数里面测试
{
ToDoDtos = new ObservableCollection<ToDoDto>();
MemoDtos = new ObservableCollection<MemoDto>();
for (int i = 0; i < 10; i++)
{
ToDoDtos.Add(new ToDoDto() { Title = "待办" + i, Content = "正在处理中..." });
MemoDtos.Add(new MemoDto() { Title = "备忘" + i, Content = "我的密码..." });
}
}
3. view层框架
用listbox实现
tip:ScrollViewer.VerticalScrollBarVisibility="Hidden"滚动条隐藏
本节全部代码
<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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyToDo.Views"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--第一行字-->
<TextBlock
Margin="15,10"
FontSize="20" Text="你好，灰灰！今天是2023-9-26，星期二"/>
<!--ItemsControl是一个基于标记的循环 - 需要应用所有样式和模板。-->
<ItemsControl Grid.Row="1" ItemsSource="{Binding TaskBars}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--UniformGrid 是一种横向的网格分割、纵向的网格分割分别是均等的分割的布局类型，故称为 " 均分布局 "。-->
<UniformGrid Columns="4"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border
CornerRadius="5"
Background="{Binding Color}"
Margin="10">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<!--阴影效果（DropShadowEffect）-->
<DropShadowEffect
BlurRadius="10"
ShadowDepth="1"
Color="#DDDDDD"/>
<!--阴影的颜色-->
<!--ShadowDepth 确定阴影离开内容的距离，0的时候是晕圈-->
<!--Opacity 阴影的透明效果，取值0~1-->
<!--BlurRadius 模糊半径，以像素为单位的正直，标识模糊开始处到边缘的距离-->
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<StackPanel Margin="20,10">
<materialDesign:PackIcon
Width="30"
Height="30"
Margin="10,0" Kind="{Binding Icon}" />
<TextBlock Margin="10,15"
FontSize="15"
Text="{Binding Title}"/>
<TextBlock
FontWeight="Bold"
Margin="10,0"
FontSize="40"
Text="{Binding Content}"/>
</StackPanel>
<!--圆圈图案-->
<Canvas 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>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--第二行分2列-->
<Grid Grid.Row="2" Margin="0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border
Margin="10,0"
Background="#BEBEBE"
CornerRadius="5"
Opacity="0.1"/>
<DockPanel Margin="10,0">
<DockPanel
Margin="10,10"
DockPanel.Dock="Top"
LastChildFill="False">
<TextBlock
FontSize="18"
FontWeight="Bold"
Text="待办事项"/>
<Button
Width="30"
Height="30"
VerticalAlignment="Top"
DockPanel.Dock="Right"
Style="{StaticResource MaterialDesignFloatingActionAccentButton}">
<materialDesign:PackIcon Kind="Add"/>
<!--插件自带的加号-->
</Button>
</DockPanel>
<ListBox
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding ToDoDtos}"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel MaxHeight="80" LastChildFill="False">
<StackPanel>
<TextBlock
FontSize="16"
FontWeight="Bold"
Text="{Binding Title}"/>
<TextBlock
Margin="0,5"
Text="{Binding Content}" Opacity="0.5"/>
</StackPanel>
<ToggleButton DockPanel.Dock="Right"/>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
<Border
Grid.Column="1"
Margin="10,0"
Background="#BEBEBE"
CornerRadius="5"
Opacity="0.1"/>
<DockPanel Grid.Column="1" Margin="10,0">
<DockPanel
Margin="10,10"
DockPanel.Dock="Top"
LastChildFill="False">
<TextBlock
FontSize="18"
FontWeight="Bold"
Text="待办事项"/>
<Button
Width="30"
Height="30"
VerticalAlignment="Top"
DockPanel.Dock="Right"
Style="{StaticResource MaterialDesignFloatingActionAccentButton}">
<materialDesign:PackIcon Kind="Add"/>
<!--插件自带的加号-->
</Button>
</DockPanel>
<ListBox ItemsSource="{Binding MemoDtos}" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel MaxHeight="80">
<TextBlock
FontSize="16"
FontWeight="Bold"
Text="{Binding Title}"/>
<TextBlock
Margin="0,5"
Text="{Binding Content}" Opacity="0.5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</Grid>
</Grid>
</UserControl>
浙公网安备 33010602011771号