Wpf 使用 Prism 实战开发Day05

首页设计

1.效果图

一.代码现实

• 根据页面布局，可以将页面设计成3行，每行中分多少列，看需求而定
• 根据页面内容，设计Model 实体类，以及View Model

 1.Index.xaml 页面布局设计

•  RowDefinition 分行（Row）属性，分几行就写几个
• ColumnDefinition 分列（Column ）属性，分几列就写几个
•  Height 属性，Row (行)属性只有Height (高度)，没有宽度。并且Height 设置成 auto 时，根据内容适应高度。
• Width 属性，Column (列) 只有Width (宽度)，没有Height （高度）
• Grid.Row 属性，将控件放置在第几行
• Grid.Column 属性，将控件放置在第几列
• FontWeight 属性，设置成 Bold (加粗)
• Opacity 属性，透明度
• ItemsSource 属性，数据源绑定
• ClipToBounds 裁剪属性，在Canvas 控件中使用，ClipToBounds 设置成True后，超出的内容会被裁剪掉

---

• 第一行设计，放置显示的文本控件 TextBlock。

FontSize 属性，控件显示的字体大小

---

• 第二行设计，使用 ItemsControl 控件，并且固定4列。

1. 在的Grid 控件中，每定义的每行（Row）中还可以划分成更细的行和列。根据需求自由灵活定义使用。
2. ItemsControl 控件：它允许您将任何类型的数据绑定到其中，并为每个数据项显示一个模板

 ItemsControl 控件固定的写法。比如，要分4列

ItemsControl  列固定完后，接着进行固定内容模板的设计。内容设计固定的写法

1. 进行模板内容设计的时候，首先要清楚模板中都要有那些内容
2. 例如，当前的模板：有图标，标题文本，内容，背景颜色，还有2个白色的图标

---

1.  外层使用Border ，要设计圆角
2. Border 里面放置Grid，方便设计。因为Grid 中可以放置多个控件
3. 右边白色的圆图标，使用Canvas 控件

 1.1 模板设计完成后，进行数据内容动态渲染。

• 创建首页内容数据集合实体类模型 TaskBar

/// 

/// 首页任务栏
/// 
public class TaskBar: BindableBase
{
	private string icon;

	/// 

	/// 图标
	/// 
	public string Icon
	{
		get { return icon; }
		set { icon = value; }
	}
	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 string color;
	/// 

	/// 背景颜色
	/// 
	public string Color
	{
		get { return color; }
		set { color = value; }
	}
	private string target;
	/// 

	/// 触发目标
	/// 
	public string Target
	{
		get { return target; }
		set { target = value; }
	}

}

• 接着，在ViewModel 中，创建出TaskBar数据的动态集合，给页面展示数据

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

     public ObservableCollection TaskBars
     {
         get { return taskBars; }
         set { taskBars = 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 = "" });
     }
 }

•  最后，在ItemsControl 中，进行数据绑定

---

• 第三行设计，当前行，分两列放置内容

1. LastChildFill 属性，设置成False,不填允最后一列
2. Button 按钮，样式希望变成图角，可以使用组件带的默认样式来实现，如下

Style="{StaticResource MaterialDesignFloatingActionAccentButton}"

 二.Index.xaml 完整源码