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>