继续聊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"}
            };
        }

 

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