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>

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

性能测试你还不会做？看看这篇文章你就懂了！

性能测试你还不会做？看看这篇文章你就懂了！

性能测试的概述 性能&#xff1a;百度百科定义&#xff1a;器物的性质与效用。 生活中&#xff1a;买手机&#xff0c;买电脑&#xff0c;买车 –》 性能好&#xff1a;快&#xff08;时间短&#xff09;、资源 软件的性能&#xff1a;软件在允许的范围内使用过程中的反应的…
阅读更多...
在国外怎么申请香港优才计划项目？和在内地申请有何区别？

在国外怎么申请香港优才计划项目？和在内地申请有何区别？

在国外怎么申请香港优才计划项目&#xff1f;和在内地申请有何区别&#xff1f; 随着香港优才计划的热度持续上升&#xff0c;也吸引了不少优秀人才想要申请。如果你现在人在新加坡、加拿大、马来西亚、澳大利亚或者其他国家&#xff0c;想申请香港优才计划拿香港身份&#xff…
阅读更多...
最新版灵沐V3.3微信资源类小程序源码支持流量主

最新版灵沐V3.3微信资源类小程序源码支持流量主

源码简介 最新版灵沐V3.3微信资源类小程序源码支持流量主&#xff0c;一套不错的流量主变现资源下载小程序&#xff0c;它支持在微信、QQ和抖音平台上运行。这次更新主要集中在全局UI设计的升级&#xff0c;并依然注重资源下载和激励视频变现的功能。另外&#xff0c;还新增了…
阅读更多...
外地人可以在上海当老师吗

外地人可以在上海当老师吗

随着社会的发展&#xff0c;越来越多的人涌入大城市&#xff0c;其中也包括上海。在这个繁华的城市里&#xff0c;许多人都梦想成为一名老师&#xff0c;但是外地人可以在上海当老师吗&#xff1f; 首先需要了解上海的教育政策。根据相关规定&#xff0c;外地人可以在上海当老师…
阅读更多...
淘宝返利APP草柴如何绑定淘宝账号？

淘宝返利APP草柴如何绑定淘宝账号？

草柴APP是一款淘宝、天猫、京东大额优惠券领取及购物返利省钱工具。通过草柴APP绑定淘宝账号&#xff0c;可领取淘宝大额内部隐藏优惠券&#xff0c;领取成功再购物可享券后价优惠&#xff0c;确认收货后可获得淘宝返利。 淘宝返利APP草柴如何绑定淘宝账号&#xff1f; 1、手…
阅读更多...
知虾：揭秘Shopee大数据采集及分析平台的全方位运营利器

知虾：揭秘Shopee大数据采集及分析平台的全方位运营利器

Shopee是如今备受瞩目的电商平台之一&#xff0c;而要在这个竞争激烈的市场中脱颖而出&#xff0c;了解市场趋势、选择畅销商品、分析竞争对手等是至关重要的。这就是为什么Shopee推出了知虾&#xff0c;一个强大的大数据采集及分析平台。本文将详细介绍知虾的功能和优势&#…
阅读更多...
pip安装tkinter模块失败 No matching distribution found for tkinter

pip安装tkinter模块失败 No matching distribution found for tkinter

我想使用Python创建一个简单的桌面应用程序， 这个应用程序依赖于tkinter， 然而，当我尝试安装过程时，出现了错误。 $ pip install tkinter ERROR: Could not find a version that satisfies the requirement tkinter (from versions: none) ERROR: No matching distributio…
阅读更多...
YOLOv8使用自己训练的模型，将检测图片进行可视化：效果超过YOLOv5模型，丰富改进模型的检测展示

YOLOv8使用自己训练的模型，将检测图片进行可视化：效果超过YOLOv5模型，丰富改进模型的检测展示

💡更多改进内容📚 芒果专栏 💡🚀🚀🚀内含改进源代码 按步骤操作运行改进后的代码即可💡更方便的统计更多实验数据，方便写作 YOLOv8使用自己训练的模型，将检测图片进行可视化：效果超过YOLOv5模型，丰富改进模型的检测展示 文章目录 核心代码改进新增代码部分修…
阅读更多...
头发的方向图（2D和3D）与合成

头发的方向图（2D和3D）与合成

首先&#xff0c;我们从一个不受光照限制的环境中拍摄一组输入图像&#xff0c;这些图像包含了头发的不同视角和姿态。我们对这些图像进行半自动的分割&#xff0c;将头发从背景中分离出来&#xff0c;然后使用PMVS &#xff0c;一种先进的多视角立体算法&#xff0c;来重建一个…
阅读更多...
环卫大姐张建娜：用实际行动诠释英语学习重要性

环卫大姐张建娜：用实际行动诠释英语学习重要性

近日,一位身穿橘黄色工作服,手拿扫把服务于三里屯使馆区的环卫大姐张建娜,凭借一口流利的英语为外国人指路的视频在网上引起关注。不仅引发了大家对她“英语说的真好”的感叹,还有对如何学好英语的思考,以及引发了人们重新审视英语在日常生活中的重要性。 张建娜表示,其实英语…
阅读更多...
玻色量子“揭秘”之可满足性问题（SAT）与QUBO建模

玻色量子“揭秘”之可满足性问题（SAT）与QUBO建模

​ 摘要&#xff1a;布尔可满足性问题&#xff08;Boolean Satisfiability Problem&#xff0c;简称SAT问题&#xff09;是逻辑学和计算机科学中的一个问题&#xff0c;它的目的是确定是否存在一种解释&#xff0c;使给定的布尔公式成立。换句话说&#xff0c;它询问给定布尔公…
阅读更多...
会议动态 | 祝贺2023 中国商品混凝土年会在上海隆重召开！

会议动态 | 祝贺2023 中国商品混凝土年会在上海隆重召开！

2023年11月19日-21日&#xff0c;由&#xff08;国家&#xff09;建筑材料工业技术情报研究所、中国散装水泥推广发展协会混凝土专委会主办的"笃信固本 行稳致远"——2023 第十九届全国商品混凝土可持续发展论坛暨2023中国商品混凝土年会在上海隆重召开&#xff01; …
阅读更多...
内测分发平台的合作生态和生态效应如何

内测分发平台的合作生态和生态效应如何

大家好&#xff0c;我是咕噜-凯撒&#xff0c;随着移动互联网和智能设备的快速发展&#xff0c;越来越多的开发者和企业开始关注产品的质量和体验。而内测分发平台则成为了一种重要的工具&#xff0c;能够帮助他们更好地测试、优化和推广产品。在此过程中&#xff0c;内测分发平…
阅读更多...
Flink 替换 Logstash 解决日志收集丢失问题

Flink 替换 Logstash 解决日志收集丢失问题

在某客户日志数据迁移到火山引擎使用 ELK 生态的案例中&#xff0c;由于客户反馈之前 Logstash 经常发生数据丢失和收集性能较差的使用痛点&#xff0c;我们尝试使用 Flink 替代了传统的 Logstash 来作为日志数据解析、转换以及写入 ElasticSearch 的组件&#xff0c;得到了该客…
阅读更多...
完美解决：在Ubuntu18.04下ROS Melodic基于python3的cv_bridge的一点子歪门邪道

完美解决：在Ubuntu18.04下ROS Melodic基于python3的cv_bridge的一点子歪门邪道

由于在Ubuntu18.04下ROS Melodic是运行在python 2.7环境下&#xff0c;而我的程序需要运行在anaconda创建的python 3.x环境里&#xff0c;这就需要用到cv_bridge这个库&#xff0c;而不出意外的&#xff0c;各种报错&#xff0c;比如&#xff1a; from cv_bridge.boost.cv_bri…
阅读更多...
SOLIDWORKS Explorer是什么？

SOLIDWORKS Explorer是什么？

前几天小编在微信上跟人聊天的时候被问到这样的问题&#xff1a; 这个是干什么用的&#xff1f;看着好像没有建模的功能。。。。。 当时我的内心是这样的 。。。。。。。抱歉&#xff0c;是没做好普及工作的小编的锅。。。。。。这个就不是用来建模用的&#xff0c;通常只有…
阅读更多...
Raptor安装

Raptor安装

Raptor官网:https://raptor.martincarlisle.com/ 进入官网后&#xff0c;下拉找到 Download RAPTOR&#xff0c;windows系统的选择Windows Users 下载完成后打开&#xff0c;选择“next” 修改一下路径&#xff0c;不要放到C: 继续next 完结撒花
阅读更多...
Thread类常用成员方法

Thread类常用成员方法

点击链接返回标题-> Java线程的学习-CSDN博客 目录 前言 有关线程名字的成员方法&#xff1a; String getName() void setName(String name) Thread(String name) 获取线程对象的成员方法&#xff1a; static Thread currentThread() 让线程睡眠的成员方法&#xff1…
阅读更多...
Python基础【三】--数据类型-Number【2023.11.23】

Python基础【三】--数据类型-Number【2023.11.23】

1.数值类型 Number数据类型只要包括三个分别是&#xff1a;整型&#xff08;int&#xff09;、浮点型&#xff08;float&#xff09;、复数&#xff08;complex&#xff09; 整型&#xff1a;包括正整数、负整数。如&#xff1a;1024、-1024。整型有四种进制表示&#xff0c;分…
阅读更多...
Rust语言入门教程(二) - 变量与作用域

Rust语言入门教程(二) - 变量与作用域

变量与作用域 变量的声明与初始化 Rust的基本语法格式如下&#xff1a; fn main(){let bunnies 2; }语句以分号结尾&#xff0c;用花括号包含语句块。 Rust的语法其实借鉴了很多其他的语言&#xff0c;比如C语言和Python&#xff0c; 所以变量定义的格式看起来也跟很多我们…
阅读更多...
最新文章

Copyright @ 2022~2023