|
WPF的模板基类叫FrameworkTemplate,它是一个抽象类,它有三个子类,分别是ControlTemplate(控件模板)、ItemsPanelTemplate(元素面板模板)和DataTemplate(数据模板)
ControlTemplate控件模板用于定义控件的外观,也就是Control基类的Template属性,而绝大多数控件都继承于Control基类,意味着我们都可以去重新定义它们的视觉外观。
DataTemplate数据模板即数据的外衣。用于从一个对象中提取数据,并在内容控件或列表控件的各个项中显示数据。比如ContentControl基类中的ContentTemplate属性,或者集合控件ItemsControl基类ItemTemplate属性,它们都是DataTemplate数据模板,用来定义数据的外观(数据的呈现形式)。
ItemsPanelTemplate元素面板模板也是用于ItemsControl控件或ItemsControl的子类控件中,因为在集合控件中要考虑每个元素之间的布局方式,所以可以采用ItemsPanelTemplate去定义。ItemsControl基类有一个ItemsPanel属性,它就是一个ItemsPanelTemplate模板。
ControlTemplate控件模板
默认情况下,Button按钮的内容只能显示文字,我们可以设置它的Content属性即可。也可以设置它的Width和Height,改变它的尺寸,但是,它始终是一个矩形的按钮。假如我们希望得到一个圆形的按钮、或者带图标的按钮,这个时候就需要去改变按钮的内部结构外观——ControlTemplate控件模板
FrameworkElement基类有一个Template属性就是指控件的ControlTemplate模板,这就意味着,几乎所有的WPF控件都是可以修改它的结构和外观(可视化树)的。注意,不能仅替换控件的可视化树的一部分;若要更改控件的可视化树,必须将该控件的 Template 属性设置为新的完整 ControlTemplate
查看控件的默认模板:点击button-->鼠标单击右键-->编辑模板-->编辑副本,会弹出一个对话框,点击确定。- <Window.Resources>
-
- <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
- <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
- <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
- <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
- <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
- <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
- <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
- <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
- <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
-
- </Window.Resources>
复制代码 我们关注一下Setter项目设置Template属性的写法,因为Template属性是ContorlTemplate类型,所以在上面的代码中实例化了一个ControlTemplate对象,并且,TargetType="{x:Type Button}",表示这个ContorlTemplate实例是给Button定义的模板。
而在ContorlTemplate对象中,定义了一棵可视化树。
这里定义了一个Border装修器,里面有一个ContentPresenter对象。什么是ContentPresenter对象?
ContentPresenter继承于FrameworkElement,说明它也是一个控件。从命名上看,它叫内容主持者,本质上它只是一个占座的,为谁占座?为ContentControl内容控件占座。因为Button继承于ContentControl,所以Button也有Content属性,在ContentTemplate中的ContentPresenter可视为等于Content属性
控件模板的几种设置方式:
1.将ControlTemplate定义在在控件中- <Button Content="将ControlTemplate定义在在控件中"
- Width="280" Height="40" Margin="10" Foreground="#747787">
- <Button.Template>
- <ControlTemplate TargetType="Button">
- <Border Background="Transparent" CornerRadius="5" BorderThickness="1" BorderBrush="#C9CCD5">
- <Button Content="将ControlTemplate定义在Style样式中"
- Width="280" Height="40" Margin="10" Foreground="White">
- <Button.Style>
-
- </Button.Style>
- </Button><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
- </Border>
- </ControlTemplate>
- </Button.Template>
- </Button>
复制代码 2.将ControlTemplate定义在资源中- <Window.Resources>
- <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
- <Border Background="#C6D2FC" CornerRadius="5" BorderThickness="1" BorderBrush="#545BAD">
- <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
- </Border>
- </ControlTemplate>
- </Window.Resources>
-
- <Button Content="将ControlTemplate定义在资源中"
- Template="{StaticResource ButtonTemplate}"
- Width="280" Height="40" Margin="10" Foreground="#707CA5"/>
复制代码 3.将ControlTemplate定义在Style样式中- <Button Content="将ControlTemplate定义在Style样式中"
- Width="280" Height="40" Margin="10" Foreground="White">
- <Button.Style>
-
- </Button.Style>
- </Button>
复制代码
DataTemplate数据模板
DataTemplate 继承于FrameworkTemplate基类,它有3个属性,分别是DataType 、Triggers 和DataTemplateKey 。DataType表示当前数据模板所针对的数据类型,Triggers 是触发器集合。
在ItemsControl集合控件中就有一个ItemTemplate属性,它的类型就是DataTemplate 。说明所有继承于ItemsControl的集合子控件都可以设置数据模板。
案列:
ItemsPanelTemplate布局模板
ItemsPanelTemplate用于指定集合控件中元素与元素之间的布局的方式,所以,ItemsPanelTemplate其实就是一个布局面板,而我们在前面的章节中已经学习了WPF的面板控件,它们都继承于Panel基类,分别是Grid、UniformGrid、StackPanel、WrapPanel、DockPanel、Canvas等。而在使用ItemsPanelTemplate模板去设置某一个集合控件的元素布局面板时,默认使用StackPanel布局,或者WrapPanel。
例如在上的ItemsControl控件中,我们有4个元素,它们都是垂直排列的。我们可以修改ItemsPanel属性,用以设置元素以瀑布流的方式排列显示。- <Button Content="将ControlTemplate定义在Style样式中"
- Width="280" Height="40" Margin="10" Foreground="White">
- <Button.Style>
-
- </Button.Style>
- </Button>
复制代码 此时ItemsControl中的元素便随着Window窗体大小的改变,而自适应水平排列其中的元素
来源:https://www.cnblogs.com/MingQiu/p/17996525
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作! |
|