继续聊WPF——动态数据模板

我为啥称之为“动态数据模板”？先看看下面的截图，今天，我们就是要实现这种功能。

 

大概是这样的，我们定义的DataTemplate是通过触发器动态应用到 ComboBoxItem 上。

这个下拉列表控件绑定了一个Person集合，Person类的定义如下：

 

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Email { get; set; }
    public override string ToString()
    {
        return Name;
    }
}

 

这里重写了ToString方法，因为ComboBox生成的项是调用对象的ToString方法的，为了能不设置数据模板的前提下正确显示列表项，需要重写ToString方法，默认显示姓名属性。

然后，我们为ComboBoxItem定义一个处于高亮状态时使用的数据模板，也就是当鼠标移到项上时发生。

<Window.Resources>
    <!--
        当项高亮显示时使用的数据模板
    -->
    <DataTemplate x:Key="hightlightTmp">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <StackPanel Margin="0,5,0,0" Grid.Row="0" Orientation="Horizontal">
                <TextBlock Margin="2,0" FontWeight="Bold" FontSize="14">
                            <TextBlock.Text>
                                <Binding Path="Name"
                                         StringFormat="姓名：{0}"/>
                            </TextBlock.Text>
                </TextBlock>
                <TextBlock Margin="20,0">
                            <TextBlock.Text>
                                <Binding Path="Age"
                                         StringFormat="年龄：{0}"/>
                            </TextBlock.Text>
                </TextBlock>
            </StackPanel>
            <TextBlock Margin="0,2,0,5" Grid.Row="1">
                        <TextBlock.Text>
                            <Binding Path="Email"
                                     StringFormat="电邮：{0}"/>
                        </TextBlock.Text>
            </TextBlock>
        </Grid>
    </DataTemplate>
       ..............
</Window.Resources>

 

为 ComboBoxItem 定义一个样式。

<Window.Resources>
     ................
    <!-- 项样式 -->
    <Style x:Key="cmbStyle" TargetType="{x:Type ComboBoxItem}">
        <Style.Triggers>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter Property="ContentTemplate"
                        Value="{StaticResource hightlightTmp}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

 

在窗体中声明一个ComboBox。

<Grid>
    <ComboBox x:Name="cmb" Margin="10,10"
              Height="24" Width="200"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              ItemContainerStyle="{StaticResource cmbStyle}"/>
</Grid>

 

最后，切换到代码视图，完成设置数据源的C#代码。

public Window1()
{
    InitializeComponent();
    this.cmb.ItemsSource = new Person[]
    {
        new Person{Name="小李",Age=22,Email="suk211@163.com"},
        new Person{Name="小王",Age=20,Email="minat@126.com"},
        new Person{Name="黄涨",Age=21,Email="laned2@21cn.com"},
        new Person{Name="高产",Age=22,Email="ha@136.com"},
        new Person{Name="杜林",Age=21,Email="null@yaahoo.com"},
        new Person{Name="杨白姥",Age=50,Email="cYang@21cn.com"},
        new Person{Name="鸟人",Age=31,Email="bgl@ask.net.cn"},
        new Person{Name="宋小八",Age=28,Email="xde227@123h.com"}
    };
}

 

完成，这时候运行一下，你会看到上文中截图中的效果了。