Model

控件中每定义的每行Row中还可以划分成更细的行和列。

根据需求自由灵活定义使用。

ItemsControl

控件它允许您将任何类型的数据绑定到其中并为每个数据项显示一个模板

ItemsControl

ItemsControlItemsControl.ItemsPanelItemsPanelTemplateUniformGrid

Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel

/ItemsControl

ItemsControl.ItemTemplateDataTemplate/DataTemplate

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

外层使用Border

Grid.Row1ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid

Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel!--模板内容设计--ItemsControl.ItemTemplateDataTemplateBorderGridStackPanel!--图标--materialDesign:PackIcon

KindAbacus

FontWeightBold//StackPanel!--白色背景底色控件--CanvasBorder

Canvas.Top10

Opacity0.1//Canvas/Grid/Border/DataTemplate/ItemsControl.ItemTemplate

/ItemsControl

IndexViewModel:BindableBase{public

ObservableCollectionTaskBar();CreateTaskBars();}private

taskBars;public

CreateTaskBars(){TaskBars.Add(new

TaskBar()

IconClockFast,Title汇总,Content9,Color#FF0CA0FF,Target});TaskBars.Add(new

TaskBar()

TaskBars}ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid

Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel!--模板内容设计--ItemsControl.ItemTemplateDataTemplateBorder

Background{Binding

Margin20,10!--图标--materialDesign:PackIcon

Kind{Binding

FontSize40//StackPanel!--白色背景底色控件--Canvas

Canvas.Top10

Opacity0.1//Canvas/Grid/Border/DataTemplate/ItemsControl.ItemTemplate

/ItemsControl

MaterialDesignFloatingActionAccentButton}

Grid

Margin0,10Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitions!--外边框--Border

Margin10,0

MaterialDesignFloatingActionAccentButton}

KindAdd

//Button/DockPanel!--数据列表区域--ListBox

Grid.Column1

MaterialDesignFloatingActionAccentButton}

KindAdd

//Button/DockPanel!--数据列表区域--ListBox

//DockPanel

x:ClassMyToDo.Views.IndexViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006

xmlns:dhttp://schemas.microsoft.com/expression/blend/2008

xmlns:localclr-namespace:MyToDo.Viewsmc:Ignorabled

xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/***mesd:DesignHeight450

d:DesignWidth800GridGrid.RowDefinitionsRowDefinition

Heightauto/RowDefinition//Grid.RowDefinitionsTextBlock

Margin15,10

TaskBars}ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid

Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel!--模板内容设计--ItemsControl.ItemTemplateDataTemplateBorder

Background{Binding

Margin20,10!--图标--materialDesign:PackIcon

Kind{Binding

FontSize40//StackPanel!--白色背景底色控件--Canvas

Canvas.Top10

Opacity0.1//Canvas/Grid/Border/DataTemplate/ItemsControl.ItemTemplate/ItemsControlGrid

Grid.Row2

Margin0,10Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitions!--外边框--Border

Margin10,0

MaterialDesignFloatingActionAccentButton}

KindAdd

//Button/DockPanel!--数据列表区域--ListBox

Grid.Column1

MaterialDesignFloatingActionAccentButton}

KindAdd

//Button/DockPanel!--数据列表区域--ListBox

/UserControl