一言蔽之Template就是“外衣”——ControlTemplate是控件的外衣DataTemplate是数据的外衣。DataTemplate 它定义了一个数据对象的可视化结构继承了ItemConrol的控件对象如ListView、ListBox、DataGrid、TabControl等等都可以使用数据模板DataTemplate。数据模板的作用在于决定每个Item中的数据的展示形式。普通控件通过Template属性来定义模板而子项容器控件则通过ItemTemplate属性来定义子项模板。》》子项容器模板 》》》子项容器模板可以通过子项容器控件的ItemsPanel进行设置。数据模板决定了数据的展示形式而子项容器模板则决定了数据模板的展示形式。DataTemplate常用的地方有3处分别是ContentControl的ContentTemplate属性相当于给ContentControl的内容穿衣服。ItemsControl的 ItemTemplate属性相当于给ItemsControl的数据条目穿衣服。GridViewColumn的CellTemplate属性相当于给GridViewColumn单元格里的数据穿衣服。ItemsControlItemsSource{Binding xxx}ItemsControl.ItemTemplateDataTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsTextBlockText{}/TextBlockTextBlockText{}/TextBlock/Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl》》》 数据模板publicclassPerson{publicstringName{get;set;}publicintAge{get;set;}publicintGender{get;set;}publicdoubleLeft{get;set;}publicdoubleTop{get;set;}}Windowxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:localclr-namespace:WPFStudyWindow.Resources!--数据集合--x:ArrayTypelocal:Personx:Keypersonslocal:PersonNameHelloAge20Gender1Left10Top50/local:PersonNameSchuylerAge21Gender2/local:PersonNameCaiAge22Gender1Left100Top250//x:Array/Window.ResourcesGridItemsControlItemsSource{StaticResource persons}!--这里是子项容器模板--ItemsControl.ItemsPanelItemsPanelTemplateCanvas//ItemsPanelTemplate/ItemsControl.ItemsPanel!--这里是数据模板--ItemsControl.ItemTemplateDataTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsTextBlockText{Binding Name}/TextBlockText{Binding Age}Grid.Column1/TextBlockText{Binding Gender}Grid.Column2/TextBlockText{Binding Left}Grid.Column3/TextBlockText{Binding Top}Grid.Column4//Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid/Window》》》 子项容器模板数据模板决定了数据的展示形式而子项容器模板则决定了数据模板的展示形式。子项容器模板可以通过子项容器控件的ItemsPanel进行设置。Window.Resources!--数据集合--x:ArrayTypelocal:Personx:Keypersonslocal:PersonNameHelloAge20Gender1Left10Top50/local:PersonNameSchuylerAge21Gender2/local:PersonNameCaiAge22Gender1Left100Top250//x:Array/Window.ResourcesGridItemsControlItemsSource{StaticResource persons}!--这里是子项容器模板--ItemsControl.ItemsPanelItemsPanelTemplateCanvas//ItemsPanelTemplate/ItemsControl.ItemsPanel!--这里是数据模板--ItemsControl.ItemTemplateDataTemplateGrid Canvas.Top{Binding Top}Canvas.Left{Binding Left}Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsTextBlockText{Binding Name}/TextBlockText{Binding Age}Grid.Column1/TextBlockText{Binding Gender}Grid.Column2/TextBlockText{Binding Left}Grid.Column3/TextBlockText{Binding Top}Grid.Column4//Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/GridWindow.Resources!--数据集合--x:ArrayTypelocal:Personx:Keypersonslocal:PersonNameHelloAge20Gender1Left10Top50/local:PersonNameSchuylerAge21Gender2/local:PersonNameCaiAge22Gender1Left100Top250//x:Array!--数据模板--DataTemplatex:KeydateTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsTextBlockText{Binding Name}/TextBlockText{Binding Age}Grid.Column1/TextBlockText{Binding Gender}Grid.Column2/TextBlockText{Binding Left}Grid.Column3/TextBlockText{Binding Top}Grid.Column4//Grid/DataTemplate!--子项容器模板--ItemsPanelTemplatex:KeyitemsPanelTemplateCanvas//ItemsPanelTemplate!--子项容器样式--Stylex:KeyitemContainerStyleTargetTypeContentPresenterSetterPropertyCanvas.TopValue{Binding Top}/SetterPropertyCanvas.LeftValue{Binding Left}//Style/Window.ResourcesGridItemsControlItemsSource{StaticResource persons}ItemTemplate{StaticResource dateTemplate}ItemContainerStyle{StaticResource itemContainerStyle}ItemsPanel{StaticResource itemsPanelTemplate}/ItemsControl/GridStyle为了让同一种控件能担当起不同的角色程序员就要为它们设计多种外观样式和行为动作这就是Style。构成Style最重要的两种元素是Setter和TriggerSetter类帮助我们设置控件的静态外观风格Trigger类则帮助我们设置控件的行为风格。Windowx:ClassDemo7._3.WpfStyle.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:Demo7._3.WpfStylemc:IgnorabledTitleMainWindowHeight450Width800Window.ResourcesStylex:KeymyBtnStyleTargetTypeButtonStyle.SettersSetterPropertyBackgroundValueAliceBlue/SetterPropertyHeightValue50//Style.Setters/StyleStyleTargetTypeCheckBoxStyle.TriggersTriggerPropertyIsCheckedValueTrueTrigger.SettersSetterPropertyForegroundValueRed//Trigger.Setters/Trigger/Style.Triggers/Style/Window.ResourcesStackPanelButtonStyle{StaticResource myBtnStyle}/CheckBoxContent测试触发器//StackPanel/Window》》》添加触发器Windowx:ClassDemo7._3.WpfStyle.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:Demo7._3.WpfStylemc:IgnorabledTitleMainWindowHeight450Width800Window.ResourcesStylex:KeymyBtnStyleTargetTypeButtonStyle.SettersSetterPropertyBackgroundValueAliceBlue/SetterPropertyHeightValue50//Style.Setters/StyleStyleTargetTypeCheckBoxStyle.TriggersMultiTriggerMultiTrigger.ConditionsConditionPropertyIsCheckedValueTrue/ConditionPropertyContentValue测试触发器//MultiTrigger.ConditionsMultiTrigger.SettersSetterPropertyForegroundValueGreen//MultiTrigger.Setters/MultiTrigger/Style.Triggers/Style/Window.ResourcesStackPanelButtonStyle{StaticResource myBtnStyle}/CheckBoxContent测试触发器//StackPanel/Window》》ControlTemplate模板选择器
WPF 数据模板DataTemplate、控件模板ControlTemplate、Style、ItemsPreseter 容器模板
一言蔽之Template就是“外衣”——ControlTemplate是控件的外衣DataTemplate是数据的外衣。DataTemplate 它定义了一个数据对象的可视化结构继承了ItemConrol的控件对象如ListView、ListBox、DataGrid、TabControl等等都可以使用数据模板DataTemplate。数据模板的作用在于决定每个Item中的数据的展示形式。普通控件通过Template属性来定义模板而子项容器控件则通过ItemTemplate属性来定义子项模板。》》子项容器模板 》》》子项容器模板可以通过子项容器控件的ItemsPanel进行设置。数据模板决定了数据的展示形式而子项容器模板则决定了数据模板的展示形式。DataTemplate常用的地方有3处分别是ContentControl的ContentTemplate属性相当于给ContentControl的内容穿衣服。ItemsControl的 ItemTemplate属性相当于给ItemsControl的数据条目穿衣服。GridViewColumn的CellTemplate属性相当于给GridViewColumn单元格里的数据穿衣服。ItemsControlItemsSource{Binding xxx}ItemsControl.ItemTemplateDataTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsTextBlockText{}/TextBlockTextBlockText{}/TextBlock/Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl》》》 数据模板publicclassPerson{publicstringName{get;set;}publicintAge{get;set;}publicintGender{get;set;}publicdoubleLeft{get;set;}publicdoubleTop{get;set;}}Windowxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:localclr-namespace:WPFStudyWindow.Resources!--数据集合--x:ArrayTypelocal:Personx:Keypersonslocal:PersonNameHelloAge20Gender1Left10Top50/local:PersonNameSchuylerAge21Gender2/local:PersonNameCaiAge22Gender1Left100Top250//x:Array/Window.ResourcesGridItemsControlItemsSource{StaticResource persons}!--这里是子项容器模板--ItemsControl.ItemsPanelItemsPanelTemplateCanvas//ItemsPanelTemplate/ItemsControl.ItemsPanel!--这里是数据模板--ItemsControl.ItemTemplateDataTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsTextBlockText{Binding Name}/TextBlockText{Binding Age}Grid.Column1/TextBlockText{Binding Gender}Grid.Column2/TextBlockText{Binding Left}Grid.Column3/TextBlockText{Binding Top}Grid.Column4//Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid/Window》》》 子项容器模板数据模板决定了数据的展示形式而子项容器模板则决定了数据模板的展示形式。子项容器模板可以通过子项容器控件的ItemsPanel进行设置。Window.Resources!--数据集合--x:ArrayTypelocal:Personx:Keypersonslocal:PersonNameHelloAge20Gender1Left10Top50/local:PersonNameSchuylerAge21Gender2/local:PersonNameCaiAge22Gender1Left100Top250//x:Array/Window.ResourcesGridItemsControlItemsSource{StaticResource persons}!--这里是子项容器模板--ItemsControl.ItemsPanelItemsPanelTemplateCanvas//ItemsPanelTemplate/ItemsControl.ItemsPanel!--这里是数据模板--ItemsControl.ItemTemplateDataTemplateGrid Canvas.Top{Binding Top}Canvas.Left{Binding Left}Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsTextBlockText{Binding Name}/TextBlockText{Binding Age}Grid.Column1/TextBlockText{Binding Gender}Grid.Column2/TextBlockText{Binding Left}Grid.Column3/TextBlockText{Binding Top}Grid.Column4//Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/GridWindow.Resources!--数据集合--x:ArrayTypelocal:Personx:Keypersonslocal:PersonNameHelloAge20Gender1Left10Top50/local:PersonNameSchuylerAge21Gender2/local:PersonNameCaiAge22Gender1Left100Top250//x:Array!--数据模板--DataTemplatex:KeydateTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsTextBlockText{Binding Name}/TextBlockText{Binding Age}Grid.Column1/TextBlockText{Binding Gender}Grid.Column2/TextBlockText{Binding Left}Grid.Column3/TextBlockText{Binding Top}Grid.Column4//Grid/DataTemplate!--子项容器模板--ItemsPanelTemplatex:KeyitemsPanelTemplateCanvas//ItemsPanelTemplate!--子项容器样式--Stylex:KeyitemContainerStyleTargetTypeContentPresenterSetterPropertyCanvas.TopValue{Binding Top}/SetterPropertyCanvas.LeftValue{Binding Left}//Style/Window.ResourcesGridItemsControlItemsSource{StaticResource persons}ItemTemplate{StaticResource dateTemplate}ItemContainerStyle{StaticResource itemContainerStyle}ItemsPanel{StaticResource itemsPanelTemplate}/ItemsControl/GridStyle为了让同一种控件能担当起不同的角色程序员就要为它们设计多种外观样式和行为动作这就是Style。构成Style最重要的两种元素是Setter和TriggerSetter类帮助我们设置控件的静态外观风格Trigger类则帮助我们设置控件的行为风格。Windowx:ClassDemo7._3.WpfStyle.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:Demo7._3.WpfStylemc:IgnorabledTitleMainWindowHeight450Width800Window.ResourcesStylex:KeymyBtnStyleTargetTypeButtonStyle.SettersSetterPropertyBackgroundValueAliceBlue/SetterPropertyHeightValue50//Style.Setters/StyleStyleTargetTypeCheckBoxStyle.TriggersTriggerPropertyIsCheckedValueTrueTrigger.SettersSetterPropertyForegroundValueRed//Trigger.Setters/Trigger/Style.Triggers/Style/Window.ResourcesStackPanelButtonStyle{StaticResource myBtnStyle}/CheckBoxContent测试触发器//StackPanel/Window》》》添加触发器Windowx:ClassDemo7._3.WpfStyle.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:Demo7._3.WpfStylemc:IgnorabledTitleMainWindowHeight450Width800Window.ResourcesStylex:KeymyBtnStyleTargetTypeButtonStyle.SettersSetterPropertyBackgroundValueAliceBlue/SetterPropertyHeightValue50//Style.Setters/StyleStyleTargetTypeCheckBoxStyle.TriggersMultiTriggerMultiTrigger.ConditionsConditionPropertyIsCheckedValueTrue/ConditionPropertyContentValue测试触发器//MultiTrigger.ConditionsMultiTrigger.SettersSetterPropertyForegroundValueGreen//MultiTrigger.Setters/MultiTrigger/Style.Triggers/Style/Window.ResourcesStackPanelButtonStyle{StaticResource myBtnStyle}/CheckBoxContent测试触发器//StackPanel/Window》》ControlTemplate模板选择器