Wpf 使用 Prism 实战开发Day06

首页设计二，创建ListBox列表数据

1.效果图: 

一.首页鼠标悬停效果

  • 使用触发器来实现

首先，上面的图标文本框是使用 Border 来实现的，那么就要在 Border 中重写该样式。

* 所有的控件，触发器固定写法应该都是这样，只需要通过TargetType 来指定目标控件类型即可

 <Border.Style><Style TargetType="Border"><Style.Triggers></Style.Triggers></Style></Border.Style>
  • 接着为触发器添加动作属性，例如，当前要实现的是如果鼠标悬停时，给Border 设置一个阴影效果，鼠标悬停触发器属性设置如下
<Trigger Property="IsMouseOver" Value="True"></Trigger>
  • 添加阴影 Effect 属性 ，通过设置阴影的阴影效果属性  DropShadowEffect 来实现，阴影效果主要的几个属性
  1. Color  颜色
  2. ShadowDepth 深度
  3. BlurRadius 阴影模糊程度
 <Border.Style><Style TargetType="Border"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Effect"><Setter.Value><DropShadowEffect Color="#DDDDDD" ShadowDepth="1" BlurRadius="10" /></Setter.Value></Setter></Trigger></Style.Triggers></Style></Border.Style>
  • 以下都是写触发器设置一些效果的固定的写法
 --Property="xx" 设置鼠标悬停属性，或者是鼠标其他属性
<Trigger Property="xx" Value="True">
-- Property="xxx"  需要设置的属性，例如当前是阴影属性<Setter Property="xxx">
-- 那么就再加一层这个  Setter.Value<Setter.Value>
--- 然后这里就具体设置阴影的一些属性<xxx /></Setter.Value></Setter></Trigger>

反正我是这样理解 的，错了就错了，无关要紧。博客不做任何教程提供，只做为学习笔记!

 二.ListBox 创建数据模板并添加数据

1.首先，给待办事项列表和备忘录列表添加实体类，并且把一些共用属性抽离出来，做为父类。

  • 父类属性
public class BaseDto
{private int id;public int Id{get { return id; }set { id = value; }}private DateTime createDate;public DateTime CreateDate{get { return createDate; }set { createDate = value; }}private DateTime updateDate;public DateTime UpdateDate{get { return updateDate; }set { updateDate = value; }}}
  • 待办事项属性，并且继承了父类的共用属性
public class ToDoDto: BaseDto
{private string title;/// <summary>/// 标题/// </summary>public string Title{get { return title; }set { title = value; }}private string content;/// <summary>/// 内容/// </summary>public string Content{get { return content; }set { content = value; }}private int status;/// <summary>/// 状态/// </summary>public int Status{get { return status; }set { status = value; }}
}
  • 备忘录属性，同样继承自父类
 /// <summary>/// 备忘录属性/// </summary>public class MemoDto:BaseDto{private string title;/// <summary>/// 标题/// </summary>public string Title{get { return title; }set { title = value; }}private string content;/// <summary>/// 内容/// </summary>public string Content{get { return content; }set { content = value; }}private int status;/// <summary>/// 状态/// </summary>public int Status{get { return status; }set { status = value; }}}

2. 实体类创建完成，创建数据，并渲染在ListBox中

  • 在 IndexViewModel.cs 中，创建两个集合的静态数据
 public class IndexViewModel:BindableBase{public IndexViewModel(){TaskBars=new ObservableCollection<TaskBar>();CreateTaskBars();CreateTestDate();}private ObservableCollection<TaskBar> taskBars;public ObservableCollection<TaskBar> TaskBars{get { return taskBars; }set { taskBars = value; RaisePropertyChanged(); }}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 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 = "9%", Color = "#FF02C6DC", Target = "" });TaskBars.Add(new TaskBar() { Icon = "PlaylistStar", Title = "备忘录", Content = "18", Color = "#FFFFA000", Target = "" });}void CreateTestDate(){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. 把渲染数据在ListBox中

  • 在 ListBox 绑定数据
 <ListBox ItemsSource="{Binding ToDoDtos}" />
  • 修改ListBox 控件模板,这个写法是固定的
<ListBox ItemsSource="{Binding ToDoDtos}" ><ListBox.ItemTemplate><DataTemplate></DataTemplate></ListBox.ItemTemplate>
</ListBox>
  • 待办事项
<ListBox ItemsSource="{Binding ToDoDtos}" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch" ><ListBox.ItemTemplate><DataTemplate><DockPanel MaxHeight="80" LastChildFill="False"><ToggleButton DockPanel.Dock="Right"/><StackPanel><TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold"/><TextBlock Text="{Binding Content}" Margin="0,5" Opacity="0.5" /></StackPanel></DockPanel></DataTemplate></ListBox.ItemTemplate>
</ListBox>
  • 备忘录
<ListBox  ItemsSource="{Binding MemoDtos}"  ScrollViewer.VerticalScrollBarVisibility="Hidden" ><ListBox.ItemTemplate><DataTemplate><StackPanel MaxHeight="80"><TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold"/><TextBlock Text="{Binding Content}" Margin="0,5" Opacity="0.5" /></StackPanel></DataTemplate></ListBox.ItemTemplate>
</ListBox>
  1. ListBox 隐藏滚动条属性：ScrollViewer.VerticalScrollBarVisibility 设置成 Hidden
ScrollViewer.VerticalScrollBarVisibility="Hidden"

    2. 待办事项里面，有一个ToggleButton 按钮，并且内容是分左右2个部分，所以外层可以使用DockPanel  包着，并且使用 DockPanel.Dock="Right" 属性来控制 按钮向右移动。

   3. 还需要设置 List Box 一个HorizontalContentAlignment 属性，为Stretch。这样ToggleButton 才会往右移动。

 三.源码

  • IndexView.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:MyToDo.Views"mc:Ignorable="d" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"d:DesignHeight="450" d:DesignWidth="800"><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><TextBlock Margin="15,10" FontSize="22" Text="你好,WPF! 今天是2023-11-12 星期天"/><ItemsControl Grid.Row="1" ItemsSource="{Binding TaskBars}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--模板内容设计--><ItemsControl.ItemTemplate><DataTemplate><Border Background="{Binding Color}" CornerRadius="5" Margin="10"><Border.Style><Style TargetType="Border"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Effect"><Setter.Value><DropShadowEffect Color="#DDDDDD" ShadowDepth="1" BlurRadius="10" /></Setter.Value></Setter></Trigger></Style.Triggers></Style></Border.Style><Grid><StackPanel Margin="20,10"><!--图标--><materialDesign:PackIcon Kind="{Binding Icon}" Width="30" Height="30" /><!--标题文本--><TextBlock Text="{Binding Title}" Margin="0,15" FontSize="15"/><!--内容--><TextBlock Text="{Binding Content}" FontWeight="Bold" FontSize="40"/></StackPanel><!--白色背景底色控件--><Canvas ClipToBounds="True"><Border Canvas.Top="10" CornerRadius="100" Canvas.Right="-50" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/><Border Canvas.Top="80" CornerRadius="100" Canvas.Right="-30" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/></Canvas></Grid></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl><Grid Grid.Row="2" Margin="0,10"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition/></Grid.ColumnDefinitions><!--外边框--><Border Margin="10,0" Background="#BEBEBE" CornerRadius="5" Opacity="0.1"/><Border Grid.Column="1" Margin="10,0" Background="#BEBEBE" CornerRadius="5" Opacity="0.1"/><!--主体内容左--><DockPanel Margin="10,0"><DockPanel Margin="10,5" LastChildFill="False" DockPanel.Dock="Top"><TextBlock Text="待办事项" FontSize="20" FontWeight="Bold"/><Button Width="30" Height="30" VerticalAlignment="Top" DockPanel.Dock="Right" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" ><materialDesign:PackIcon Kind="Add" /></Button></DockPanel><!--数据列表区域--><ListBox ItemsSource="{Binding ToDoDtos}" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch" ><ListBox.ItemTemplate><DataTemplate><DockPanel MaxHeight="80" LastChildFill="False"><ToggleButton DockPanel.Dock="Right"/><StackPanel><TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold"/><TextBlock Text="{Binding Content}" Margin="0,5" Opacity="0.5" /></StackPanel></DockPanel></DataTemplate></ListBox.ItemTemplate></ListBox></DockPanel><!--主体内容右--><DockPanel  Grid.Column="1" Margin="10,0"><DockPanel Margin="10,5" LastChildFill="False" DockPanel.Dock="Top"><TextBlock Text="备忘录" FontSize="20" FontWeight="Bold"/><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 Text="{Binding Title}" FontSize="16" FontWeight="Bold"/><TextBlock Text="{Binding Content}" Margin="0,5" Opacity="0.5" /></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></DockPanel></Grid></Grid>
</UserControl>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/210834.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SOLIDWORKS Explorer是什么？

SOLIDWORKS Explorer是什么？

前几天小编在微信上跟人聊天的时候被问到这样的问题&#xff1a; 这个是干什么用的&#xff1f;看着好像没有建模的功能。。。。。 当时我的内心是这样的 。。。。。。。抱歉&#xff0c;是没做好普及工作的小编的锅。。。。。。这个就不是用来建模用的&#xff0c;通常只有…
阅读更多...
关于实时云渲染并发问题的分享，实时云渲染到底能不能省显卡？

关于实时云渲染并发问题的分享，实时云渲染到底能不能省显卡？

近期遇到很多客户咨询实时云渲染技术中的并发问题&#xff0c;在这里点量小芹针对这个问题的几个常见疑惑进行集中的解答分享&#xff0c;希望对有迷惑的朋友有所启发和帮助。 第一个问题&#xff0c;实时云渲染能否扩展一张显卡支持的并发数&#xff1f; 实时云渲染是一个新兴…
阅读更多...
3、如何从0到1去建设数据仓库

3、如何从0到1去建设数据仓库

1、数仓实施过程 1.1 数据调研 数据调研包括&#xff1a;业务调研、需求调研 业务调研 需要调研企业内有哪些业务线、业务线的业务是否还有相同点和差异点 各个业务线有哪些业务模块&#xff0c;每个模型下有哪些业务流程&#xff0c;每个流程下产生的数据 是怎样存储的 业务调…
阅读更多...
张弛语言课奇幻剧配音，一场特殊的体验

张弛语言课奇幻剧配音，一场特殊的体验

在为奇幻剧进行配音时&#xff0c;配音艺术家要将自己投入到一个充斥着魔法、幻想生物和超自然现象的虚构世界中。奇幻剧侧重于构建一个超越现实的幻境&#xff0c;因此配音工作要求既要呈现角色的个性化特征&#xff0c;也要与剧中的奇幻氛围相得益彰。以下是进行奇幻剧配音的…
阅读更多...
【C/C++】排序算法代码实现

【C/C++】排序算法代码实现

这里&#xff0c;汇总了常见的排序算法具体代码实现。使用C语言编写。 排序算法实现 插入排序冒泡排序选择排序快速排序希尔排序归并排序 插入排序 #include <stdio.h> #include <stdlib.h>void InsertSort(int arr[],int n){int i,j,temp;for(i 1;i < n;i){ …
阅读更多...
Windows如何使用key登录Linux服务器

Windows如何使用key登录Linux服务器

场景&#xff1a;因为需要回收root管理员权限&#xff0c;禁止root用户远程登录&#xff0c;办公环境只允许普通用户远程登录&#xff0c;且不允许使用密码登录。 一、生成与配置ssh-key 1.使用root管理员权限登录到目标系统。 2.创建一个新的普通用户&#xff0c;和设置密码用…
阅读更多...
css渐变详解（重复性线性渐变、径向渐变、重复性径向渐变的使用）

css渐变详解（重复性线性渐变、径向渐变、重复性径向渐变的使用）

目录 线性渐变 重复性线性渐变 径向渐变 重复性径向渐变的使用 线性渐变 线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。 其语法格式为&#xff1a; background-image: linear-gradient(side-or-corner|angle, linear-color-stop); 参数说明如下&#xff1a; …
阅读更多...
OpenCV入门10——特征点检测与匹配

OpenCV入门10——特征点检测与匹配

文章目录 特征检测的基本概念Harris角点检测Shi-Tomasi角点检测SIFT关键点检测SIFT计算描述子SURF特征检测OBR特征检测暴力特征匹配FLANN特征匹配实战flann特征匹配图像查找图像拼接基础知识图像拼接实战 特征点检测与匹配是计算机视觉中非常重要的内容。不是所有图像操作都是对…
阅读更多...
无人智能货柜：提升购物体验

无人智能货柜：提升购物体验

无人智能货柜&#xff1a;提升购物体验 随着移动支付的普及&#xff0c;人们日常生活中的主要场景已经渗透了这一支付方式。同时&#xff0c;无人智能货柜作为购物的重要渠道&#xff0c;正在崭露头角。通过人工智能、图像识别和物联网技术的应用&#xff0c;无人智能货柜将使购…
阅读更多...
软件开发及交付的项目管理角色

软件开发及交付的项目管理角色

在软件开发及交付过程中&#xff0c;通常会涉及不同的角色和职责&#xff0c;包括业务角色、技术角色和管理角色。这些角色在项目管理中发挥着不同的作用&#xff0c;以确保项目的成功和交付高质量的产品。 业务角色&#xff1a;包括产品经理、业务分析师和业务运营人员等职位…
阅读更多...
基于框架的线性回归

基于框架的线性回归

线性回归是机器学习中最简单和最常用的回归方法之一。它建立了自变量和因变量之间的线性关系&#xff0c;并通过拟合一条直线或超平面来预测和分析数据。 基于框架的线性回归是构建线性回归模型的一种常见方法&#xff0c;它利用现有的机器学习框架来实现线性回归模型的建立、…
阅读更多...
【史上最细教程】服务器MySQL数据库完成主从复制

【史上最细教程】服务器MySQL数据库完成主从复制

文章目录 MySQL完成主从复制教程准备&#xff1a;原理&#xff1a;步骤&#xff1a; 推荐文章 MySQL完成主从复制教程 主从复制&#xff08;也称 AB 复制&#xff09;就是将一个服务器&#xff08;主服务器&#xff09;的数据复制到一个或多个MySQL数据库服务器&#xff08;从…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023