Wpf 使用 Prism 实战开发Day06

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

1.效果图: 

---

一.首页鼠标悬停效果

• 使用触发器来实现

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

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

---

• 接着为触发器添加动作属性，例如，当前要实现的是如果鼠标悬停时，给Border 设置一个阴影效果，鼠标悬停触发器属性设置如下

• 添加阴影 Effect 属性 ，通过设置阴影的阴影效果属性  DropShadowEffect 来实现，阴影效果主要的几个属性

1. Color  颜色
2. ShadowDepth 深度
3. BlurRadius 阴影模糊程度

---

• 以下都是写触发器设置一些效果的固定的写法

 --Property="xx" 设置鼠标悬停属性，或者是鼠标其他属性

-- Property="xxx"  需要设置的属性，例如当前是阴影属性
     
-- 那么就再加一层这个  Setter.Value
         
--- 然后这里就具体设置阴影的一些属性
             
         
     
 

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

---

 二.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;
    /// 

    /// 标题
    /// 
	public string Title
	{
		get { return title; }
		set { title = value; }
	}
    private string content;
    /// 

    /// 内容
    /// 
    public string Content
    {
        get { return content; }
        set { content = value; }
    }

    private int status;
    /// 

    /// 状态
    /// 
    public int Status
    {
        get { return status; }
        set { status = value; }
    }
}

• 备忘录属性，同样继承自父类

 /// 

 /// 备忘录属性
 /// 
 public class MemoDto:BaseDto
 {
     private string title;
     /// 

     /// 标题
     /// 
		public string Title
     {
         get { return title; }
         set { title = value; }
     }
     private string content;
     /// 

     /// 内容
     /// 
     public string Content
     {
         get { return content; }
         set { content = value; }
     }

     private int status;
     /// 

     /// 状态
     /// 
     public int Status
     {
         get { return status; }
         set { status = value; }
     }
 }

---

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

• 在 IndexViewModel.cs 中，创建两个集合的静态数据

 public class IndexViewModel:BindableBase
 {
     public IndexViewModel()
     {
         TaskBars=new ObservableCollection();
         CreateTaskBars();
         CreateTestDate();
     }
     private ObservableCollection taskBars;

     public ObservableCollection TaskBars
     {
         get { return taskBars; }
         set { taskBars = value; RaisePropertyChanged(); }
     }
     private ObservableCollection toDoDtos;

     public ObservableCollection ToDoDtos
     {
         get { return toDoDtos; }
         set { toDoDtos = value; RaisePropertyChanged(); }
     }
     private ObservableCollection memoDtos;

     public ObservableCollection 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();
         MemoDtos = new ObservableCollection();
         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 控件模板,这个写法是固定的

• 待办事项

• 备忘录

---

1. ListBox 隐藏滚动条属性：ScrollViewer.VerticalScrollBarVisibility 设置成 Hidden

ScrollViewer.VerticalScrollBarVisibility="Hidden"

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

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

 三.源码

• IndexView.xaml