Silverlight3系列（八）数据绑定 Data Binding 3 数据模板 Data Templates

　　8 数据模板

　　数据模板在xaml标记中是比较重要的，它定义了绑定对象如何显示。一共有两种类型的控件支持数据模板：

　　1）内容控件（具有Content属性的控件）通过ContentTemplate属性支持数据模板。用来显示你放在Content属性中的任何东西。

　　2）列表控件（从ItemsControl中继承而来的控件）通过ItemTemplate属性支持数据绑定。这个模板用来显示集合（你提供给ItemsSource属性的对象集合）中每一个Item。

　　列表模板是以内容模板为基础的，就好像ListBox的ListBoxItem，ComboBox的ComboBoxItem，等等。无论你是用什么ItemTemplate，你每一Item还是可以使用ContentTemplate。

　　 <ListBox >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ScrollViewer>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                    </ScrollViewer>
                </DataTemplate>
            </ListBox.ItemTemplate>
   
        </ListBox>

 

　　当你绑定产品集合Products到一个ListBox的时候（通过设置ItemsSource），每一个ListBoxItem都是一个Product对象。ListBoxItem.Content属性设置为一个Product对象，ListBoxItem.ContentTemplate来控制数据的显示，上面是绑定到产品名称Name。

　　

　　8.1 分离重用模板

　　就像样式一样，模板通常是定义在页面或者应用级别，而不是定义在一个list上面。分离通常是比较好的，尤其是你的模板很长，很复杂，或者在一个控件上面使用多个模板。同时你也可以统一你的界面风格，在任何地方都可以使用这个模板。

　　需要这么做的的话，你需要的就是在资源集合Resources Collection中定义并且给它一个唯一的名字。下面定义了一个模板资源

　　

 

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--> < UserControl.Resources  >
                 < DataTemplate  x:Key ="ProductDataTemplate" >
             < Border  Margin ="5"  BorderThickness ="1"  BorderBrush ="SteelBlue"  CornerRadius ="5" >
                 < Grid  Margin ="3" >
                     < Grid.RowDefinitions  >
                         < RowDefinition ></ RowDefinition >
                         < RowDefinition ></ RowDefinition >
                     </ Grid.RowDefinitions >
                     < TextBlock  FontWeight ="Bold"  Text =" {Binding ModelNumber} " ></ TextBlock >
                     < TextBlock  FontWeight ="Bold"  Grid.Row ="1"  Text =" {Binding ModelName} " ></ TextBlock >
                 </ Grid >
             </ Border >
         </ DataTemplate >
     </ UserControl.Resources >

 

　　下面是使用方法

　　 <ListBox Name="lstProducts" x:Name="lstProducts" HorizontalAlignment="Center"
                 ItemTemplate="{StaticResource ProductDataTemplate}"></ListBox>

　　Data templates不需要数据绑定，换句话说，你不需要ItemsSource属性来绑定数据到ListBox，你可以自己调用ListBox.Items.Add（）方法。

　　

　　8.2 高级绑定

　　当你使用一些基本控件，例如TextBlock，和数据绑定表达式expression的时候，你可以使用更复杂的控制功能，加事件处理，转换数据类型，和使用动画效果。

　　

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->   < UserControl.Resources  >
         < loc:ImagePathConverter  x:Key ="ImagePathConverter" ></ loc:ImagePathConverter >
                 < DataTemplate  x:Key ="ProductDataTemplate" >
             < Border  Margin ="5"  BorderThickness ="1"  BorderBrush ="SteelBlue"  CornerRadius ="5" >
                 < Grid  Margin ="3" >
                     < Grid.RowDefinitions  >
                         < RowDefinition ></ RowDefinition >
                         < RowDefinition ></ RowDefinition >
                     </ Grid.RowDefinitions >
                     < TextBlock  FontWeight ="Bold"  Text =" {Binding ModelNumber} " ></ TextBlock >
                     < TextBlock  FontWeight ="Bold"  Grid.Row ="1"  Text =" {Binding ModelName} " ></ TextBlock >
                     < Image  Margin ="5"  Grid.Row ="0"  Grid.Column ="0"  HorizontalAlignment ="Left"
            Source =" {Binding ProductImagePath, Mode=TwoWay, Converter={StaticResource ImagePathConverter}} " ></ Image >
                 </ Grid >
             </ Border >
         </ DataTemplate >
     </ UserControl.Resources >

　　

 

　　上面的绑定中实现了数据绑定和类型转换。

　　如果你的模板有错误，你不会收到任何异常，这时候控件不会显示数据，而是会空白。

　　

　　8.3 改变列表项的布局

　　

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--> < ListBox   Margin ="7,3,7,10"  Name ="lstProducts"  ItemTemplate =" {StaticResource ProductDataTemplate} " >
             < ListBox.ItemsPanel >
                 < ItemsPanelTemplate  >
                     < controlsToolkit:WrapPanel ></ controlsToolkit:WrapPanel >
                 </ ItemsPanelTemplate >
             </ ListBox.ItemsPanel >  
         </ ListBox >