[WPF Series]-Data bonding datatemplate style and template processing for ItemsControl

Introduction

Even though ItemsControl is not the only control type used by DataTemplate, it is still common to bind ItemsControl to collections. In the DataTemplate section, we discussed that your DataTemplate definition should be related only to data representations.

in order to identify when it is not appropriate to use DataTemplate, it is necessary to understand the different styles and template properties provided by ItemsControl.

Example Demo

The following example is intended to demonstrate the functionality of each of these properties. The ItemsControl in this example is bound to the Tasks collection in the previous example.

For illustrative purposes, the styles and templates in this example are declared inline.

<ItemsControlMargin= "Ten"ItemsSource="{Binding Source={staticresource mytodolist}}">  <!--The ItemsControl has no default visual appearance. Use the Template property to specify a ControlTemplate to define the appearance of a ItemsControl. The itemspresenter uses the specified itemspaneltemplate (see below) to layout the items. If an itemspaneltemplate isn't specified, the default is used. (For ItemsControl, the default was an itemspaneltemplate that specifies a StackPanel. -  <itemscontrol.template>    <ControlTemplateTargetType= "ItemsControl">      <BorderBorderBrush= "Aqua"borderthickness= "1"Cornerradius= " the">        <Itemspresenter/>      </Border>    </ControlTemplate>  </itemscontrol.template>  <!--Use the Itemspanel-Specify an itemspaneltemplate, that defines the panel, that's used to-hold the gen      erated items. In other words, use the if want to affect how the items is laid out. -  <Itemscontrol.itemspanel>    <itemspaneltemplate>      <WrapPanel/>    </itemspaneltemplate>  </Itemscontrol.itemspanel>  <!--Use the ItemTemplate to set a DataTemplate to define the visualization of the data objects. This DataTemplate specifies, each data object appears with the Proriity and TaskName on top of a silver Elli PSE. -  <itemscontrol.itemtemplate>    <DataTemplate>      <datatemplate.resources>        <StyleTargetType= "TextBlock">          <Setter Property= "FontSize"Value= "+"/>          <Setter Property= "HorizontalAlignment"Value= "Center"/>        </Style>      </datatemplate.resources>      <Grid>        <EllipseFill= "Silver"/>        <StackPanel>          <TextBlockMargin= "3,3,3,0"Text="{Binding path=priority}"/>          <TextBlockMargin= "3,0,3,7"Text="{Binding Path=taskname}"/>        </StackPanel>      </Grid>    </DataTemplate>  </itemscontrol.itemtemplate>  <!--Use the Itemcontainerstyle property to specify the appearance of the element that contains the data. This itemcontainerstyle gives each item container a margin and a width. There is also a trigger so sets a tooltip that shows the description of the the data object when the mouse hovers Over the item container. -  <Itemscontrol.itemcontainerstyle>    <Style>      <Setter Property= "Control.width"Value= "+"/>      <Setter Property= "Control.margin"Value= "5"/>      <style.triggers>        <Trigger Property= "Control.ismouseover"Value= "True">          <Setter Property= "Control.tooltip"Value="{Binding relativesource={x:static relativesource.self}, path=content.description}"/>        </Trigger>      </style.triggers>    </Style>  </Itemscontrol.itemcontainerstyle></ItemsControl>

The effect shows:

Please note that you can use Itemtemplateselector instead of ItemTemplate. Similarly, you can choose to use Itemcontainerstyleselector instead of Itemcontainerstyle.

The other two style-related properties of ItemsControl are not shown here, and they are GroupStyle and groupstyleselector.

Reference

http://msdn.microsoft.com/zh-cn/library/ms742521 (v=vs.110). aspx

[WPF Series]-Data bonding datatemplate style and template processing for ItemsControl