Template、ItemsPanel、ItemContainerStyle、ItemTemplate

简介: 原文:Template、ItemsPanel、ItemContainerStyle、ItemTemplate 先来看一张图(网上下的图,加了几个字) 实在是有够“乱”的,慢慢来理一下; 1、Template是指控件的样式 在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自FrameworkElementdl类的TextBlock等控件无)。
原文: Template、ItemsPanel、ItemContainerStyle、ItemTemplate

先来看一张图(网上下的图,加了几个字)


实在是有够“乱”的,慢慢来理一下;

1、Template是指控件的样式

在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自FrameworkElementdl类的TextBlock等控件无)。Template用于定义控件结构(Visual Tree),和Style有点容易混淆,每个控件初始没有Style属性,而在WPF中所有的控件都有默认的Template。Style也做样式解释,但是它改变的只是控件原来的属性,比如长宽颜色之类的,而Template可以改变控件的形状外形,还可以根据需要往里面添加其他的控件来丰富当前的控件。Style可以用来定义一定范围内的所有对应控件的样式,所以平时多为两者结合使用。

<Style x:Key="ListBoxStyle1" TargetType="ListBox">
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
//............相关代码

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
 

2、ItemsPanel是指控件的子项的布局样式,只有那些有item的控件才有此属性,如ListBox ,Combox,TreeView,DataGrid,TabelControl等,后面的两个也是如此。

eg:在不做设置的时候,ListBox的Item子项是纵向排列的,但是可以通过设置ItemPanell来实现横向排列或者其他更复杂的排列方式。

<ListBox >  
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
  <VirtualizingStackPanel Orientation="Horizontal"/>//横向排列
</ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

3、ItemContainerStyle是控件子项的样式,在ListBox里即ListBoxItem的Style属性,只是在ListBox设ItemContainerStyle表示当前控件的所有子项都默认了这个style,它的格式就是对应子项控件的Style。

<ListBox  ItemContainerStyle="{StaticResource  ListBoxItemStyle}">  

<ListBoxItem />

<ListBoxItem />
</ListBox>

<ListBox >  

<ListBoxItem  Style="{StaticResource  ListBoxItemStyle}"/>

<ListBoxItem  Style="{StaticResource  ListBoxItemStyle}"/>
</ListBox>

等价,但是显然前者要方便很多。


4、ItemTemplate是控件子项的样式,说法和1里面的相同,用法和3里面的相同,即与子项的Template属性等价,但是这个显然也是比较方便的。



目录
相关文章
|
4月前
|
前端开发 开发者
Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `it
Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `it
112 1
|
存储 数据挖掘 开发者
Multilndex 与 Panel|学习笔记
快速学习 Multilndex 与 Panel
147 0
ng-repeat part1 - how UI is rendered from {{name}} to actual value
ng-repeat part1 - how UI is rendered from {{name}} to actual value
ng-repeat part1 - how UI is rendered from {{name}} to actual value
how is opportunity detail page display first item by default
how is opportunity detail page display first item by default
72 0
how is opportunity detail page display first item by default
try to navigate from button to line item page
Created by Wang, Jerry, last modified on Feb 15, 2015
114 0
try to navigate from button to line item page
SAP UI5 click list item to navigate to detail page
Created by Wang, Jerry, last modified on Mar 23, 2015
78 0
SAP UI5 click list item to navigate to detail page
try to navigate from SAP UI5 button to line item page
Created by Wang, Jerry, last modified on Feb 15, 2015
try to navigate from SAP UI5 button to line item page
|
JavaScript 前端开发
ext的treePanel触发tabPanel
最终的效果如下图所描述上述效果的实现过程如下所示直接上代码如上图所示,我们点击treePanel触发tabPanel的变化,因此肯定是treePanel中添加了事件响应的代码没错,就是这个它的具体代码如下 //鼠标点击treePanel的item,然后触发tabPanel新增tab,所以必须首先获取tabPanel的对象 var tab = Ext.
1186 0
|
C#
Styling a ListView with a Horizontal ItemsPanel and a Header
原文 http://eblog.cloudplush.com/2012/05/23/styling-a-listview-with-a-horizontal-itemspanel-and-a-header/ I had to create a specific ListView for my WPF project.
973 0