20 WPF格式化绑定数据
数据绑定回顾
见601页。
数据转换
使用StringFormat属性
StringFormat属性适用于显示数字为文本。
使用Binding对象的StringFormat属性，可以将绑定对象的属性转化为指定格式的文本：
<TextBox Margin="5" Grid.Row="2" Grid.Column="1" Text="{Binding Path=UnitCost, StringFormat={}{0:C}}"> </TextBox>
StrngFormat值开始的成对花括号，是逃跑序列，表式StringFormat值不是标记扩展。
顺便，只有StringFormat值以花括号开头时，才需要{}逃跑序列。
WPF列表控件也支持字符串格式化列表项目。为使用它，你简单地设置列表的ItemStringFormat属性（定义在ItemsControl类）。这是一个例子，列出产品价格：
<ListBox Name="lstProducts" DisplayMemberPath="UnitCost" ItemStringFormat="{}{0:C}"> </ListBox>
介绍值转换器
值转换器负责源数据和目标的转换。恰好在源数据被显示之前转换，以及在两路绑定的情况下，恰好在目标值被应用回源数据之前转换。
创造值转换器，需要4步：
- 创造实现IValueConverter接口的类
- 添加特性ValueConversion属性到类声明，指定目标数据类型。
- 实现Convert()方法，此方法改变数据，从原始格式到显示格式。
- 实现ConvertBack()方法，此方法反向改变值，从显示格式到本地格式。
这是处理价格的完整的值转换器类：
[ValueConversion(typeof(decimal), typeof(string))] public class PriceConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var price = (decimal) value; return price.ToString("C", culture); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { var price = value.ToString(); decimal result; if (Decimal.TryParse(price, NumberStyles.Any, culture, out result)) { return result; } return value; } }
应用转换器，创建一个PriceConverter实例，将它赋值给绑定对象的转换器属性：
<TextBlock Margin="7" Grid.Row="2">Unit Cost:</TextBlock> <TextBox Margin="5" Grid.Row="2" Grid.Column="1"> <TextBox.Text> <Binding Path="UnitCost"> <Binding.Converter> <local:PriceConverter></local:PriceConverter> </Binding.Converter> </Binding> </TextBox.Text> </TextBox>
在许多情况下，相同的转换器被用于多个绑定。在这种情况下，为每个绑定创造转换器的一个实例毫无意义。而是，在Resources集合创造转换器对象，如下所示：
<Window.Resources> <local:PriceConverter x:Key="PriceConverter"></local:PriceConverter> </Window.Resources>
然后引用资源：
<TextBox Margin="5" Grid.Row="2" Grid.Column="1" Text="{Binding Path=UnitCost, Converter={StaticResource PriceConverter}}"> </TextBox>
用值转换器创建对象
值转换器是连接数据类和窗口显示的桥梁。
这是实现文件路径到BitmapImage对象转换的类：
public class ImagePathConverter : IValueConverter { private string imageDirectory = Directory.GetCurrentDirectory(); public string ImageDirectory { get { return imageDirectory; } set { imageDirectory = value; } } public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var imagePath = Path.Combine(ImageDirectory, (string)value); return new BitmapImage(new Uri(imagePath)); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotSupportedException("The method or operation is not implemented."); } }
为了使用这个转换器，添加它到资源：
<Window.Resources> <local:ImagePathConverter x:Key="ImagePathConverter"></local:ImagePathConverter> </Window.Resources>
创造一个使用此转换器的绑定表达式：
<Image Margin="5" Grid.Row="2" Grid.Column="1" Stretch="None" HorizontalAlignment="Left" Source= "{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}"> </Image>
注意，Image.Source属性期待一个ImageSource对象，而BitmapImage类派生自ImageSource类。
应用条件格式
例如，你希望标记高价的项目，给他们一个不同的背景颜色：
public class PriceToBackgroundConverter : IValueConverter { public decimal MinimumPriceToHighlight {get; set;} public Brush HighlightBrush{get; set;} public Brush DefaultBrush{get; set;} public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var price = (decimal)value; if (price >= MinimumPriceToHighlight) return HighlightBrush; else return DefaultBrush; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotSupportedException(); } }
定义资源对象：
<local:PriceToBackgroundConverter x:Key="PriceToBackgroundConverter" DefaultBrush="{x:Null}" HighlightBrush="Orange" MinimumPriceToHighlight="50"> </local:PriceToBackgroundConverter>
在元素上应用值转换器：
<Border Background= "{Binding Path=UnitCost, Converter={StaticResource PriceToBackgroundConverter}}" ... >
估值多个属性
这个过程是不可逆的，也就是只能将多个值合并为一个结果。而不能将结果分解为多个属性。
结合多个属性的第一个方法是使用MultiBinding。下面例子：
<TextBlock> <TextBlock.Text> <MultiBinding StringFormat="{1}, {0}"> <Binding Path="FirstName"></Binding> <Binding Path="LastName"></Binding> </MultiBinding> </TextBlock.Text> </TextBlock>
第二个方法是使用值转换器，实现的是IMultiValueConverter。
MultiBinding使用源对象的UnitCost和UnitsInStock属性，并且使用一个值转换器结合他们：
<TextBlock>Total Stock Value: </TextBlock> <TextBox> <TextBox.Text> <MultiBinding Converter="{StaticResource ValueInStockConverter}"> <Binding Path="UnitCost"></Binding> <Binding Path="UnitsInStock"></Binding> </MultiBinding> </TextBox.Text> </TextBox>
注意Convert()方法的values是一个对象数组，按照他们在MultiBinding中的顺序放置这些值。在前一个示例中，首先出现UnitCost，然后是UnitsInStock。
public class ValueInStockConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { var unitCost = (decimal)values[0]; var unitsInStock = (int)values[1]; return unitCost * unitsInStock; } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotSupportedException(); } }
列表类控件
所有列表控件的基类是ItemsControl。
ItemsControl类的格式化相关的属性
| 名称 | 描述 |
| ItemsSource | 绑定数据源（你希望显示在列表的集合或DataView）。 |
| DisplayMemberPath | 你希望为每个数据项目显示的属性。对于一个更世故的表示法或为使用属性的一个联合，使用ItemTemplate代替。 |
| ItemStringFormat | .NET格式字符串，如果设置，将被用于格式化每个项目的文本。通常，这技术被用来转换数字或日期值到一个合适的显示表示法，确切地为Binding.StringFormat属性。 |
| ItemContainerStyle | 一个样式允许你设置包裹每个项目容器的属性。容器取决于列表的类型（例如，对于ListBox类它是ListBoxItem，对于ComboBox类ComboBoxItem）。当列表被填充时，这些包裹器对象被自动地创造。 |
| ItemContainerStyleSelector | StyleSelector。使用代码为每个列表项目的包裹器选择一个样式。这允许你为不同的列表项目给出不同的样式。你必须自己创造一个自定义StyleSelector。 |
| AlternationCount | 在你的数据中交替集合的数目。例如，2交替2行样式，3交替3行样式，等等。 |
| ItemTemplate | 一个模板，从你的绑定对象提取合适的数据，并且排列它到合适的控件联合里。 |
| ItemTemplateSelector | DataTemplateSelector，使用代码为每个列表项目选择一个模板。这允许你为不同的项目给出不同的模板。你必须自己创造一个自定义DataTemplateSelector类。 |
| ItemsPanel | 定义被创造持有列表项目面板。所有的项目包装被添加到这容器。通常，VirtualizingStackPanel带有一个垂直的（自顶到底）方向被使用。 |
| GroupStyle | 如果你使用分组，这是一个样式那定义每个组应该如何被格式化。当使用分组时，项目包装（ListBoxItem，ComboBoxItem，等等）被添加在GroupItem包装那表示每个组，和这些组是然后添加到列表。 |
| GroupStyleSelector | StyleSelector。使用代码为每个组选择一个样式。这允许你为不同的组给不同的样式。你必须自己创造一个自定义StyleSelector。 |
ItemsControl类的下一级是Selector类，它添加了一组属性描述被选择的项目。
Selector类添加的属性包括：SelectedItem，SelectedIndex，SelectedValue，SelectedValuePath。
注意，Selector类不支持多选。ListBox通过SelectionMode和SelectedItems属性支持多选。
列表样式
ItemContainerStyle
如果ItemContainerStyle被设置，当项目被创造时，样式将向下传递到列表控件的每个项目。在列表框控件的情况，每个项目是一个ListBoxItem对象。（在组合框，它是ComboBoxItem，等等。）因而，你用ListBox.ItemContainerStyle属性应用任何样式被用来设置每个ListBoxItem对象的属性。
<ListBox Name="lstProducts" Margin="5" DisplayMemberPath="ModelName"> <ListBox.ItemContainerStyle> <Style> <Setter Property="ListBoxItem.Background" Value="LightSteelBlue" /> <Setter Property="ListBoxItem.Margin" Value="5" /> <Setter Property="ListBoxItem.Padding" Value="5" /> </Style> </ListBox.ItemContainerStyle> </ListBox>
带触发器的样式，样式中的触发器是在满足某个前提条件的情况下，设置控件的属性：
<ListBox Name="lstProducts" Margin="5" DisplayMemberPath="ModelName"> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Background" Value="LightSteelBlue" /> <Setter Property="Margin" Value="5" /> <Setter Property="Padding" Value="5" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="DarkRed" /> <Setter Property="Foreground" Value="White" /> <Setter Property="BorderBrush" Value="Black" /> <Setter Property="BorderThickness" Value="1" /> </Trigger> </Style.Triggers> </Style> </ListBox.ItemContainerStyle> </ListBox>
带复选框或单选按钮的列表框
基本技术是修改代表每个列表项目容器的控件模板。不要修改ListBox.Template属性，因为它是列表框的模板。你需要修改ListBoxItem.Template属性。这里是带有单选按钮的模板：
<Window.Resources> <Style x:Key="RadioButtonListStyle" TargetType="{x:Type ListBox}"> <Setter Property="ItemContainerStyle"> <Setter.Value> <Style TargetType="{x:Type ListBoxItem}" > <Setter Property="Margin" Value="2" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <RadioButton Focusable="False" IsChecked="{Binding Path=IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent} }"> <ContentPresenter></ContentPresenter> </RadioButton> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> </Style> </Window.Resources>
直接设置列表框的样式：
<ListBox Style="{StaticResource RadioButtonListStyle}" Name="lstProducts" DisplayMemberPath="ModelName">
复选框样式的列表框建立方法与单选列表框基本相同。只是允许列表框多选：
<Style x:Key="CheckBoxListStyle" TargetType="{x:Type ListBox}"> <Setter Property="SelectionMode" Value="Multiple"></Setter> <Setter Property="ItemContainerStyle"> <Setter.Value> <Style TargetType="{x:Type ListBoxItem}" > <Setter Property="Margin" Value="2" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <CheckBox Focusable="False" IsChecked="{Binding Path=IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent} }"> <ContentPresenter></ContentPresenter> </CheckBox> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> </Style>
交替项目样式
AlternationCount是形成一个序列的项目数，在此数目以后样式交替。默认情况下，AlternationCount被设置为0，并且不使用交替格式化。如果你设置AlternationCount为1，列表将在每个项目以后交替，这允许你应用偶奇格式化模式。
给每个ListBoxItem一个AlternationIndex属性，允许你决定它在交替项目的序列如何编号。假设你设置AlternationCount为2，第一ListBoxItem获得一个AlternationIndex的0，第二获得一个AlternationIndex的1，第三获得一个AlternationIndex的0，第四获得一个AlternationIndex的1，等等。
<ListBox Name="lstProducts" Margin="5" DisplayMemberPath="ModelName" AlternationCount=”2”> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Background" Value="LightSteelBlue" /> <Setter Property="Margin" Value="5" /> <Setter Property="Padding" Value="5" /> <Style.Triggers> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="LightBlue" /> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="DarkRed" /> <Setter Property="Foreground" Value="White" /> <Setter Property="BorderBrush" Value="Black" /> <Setter Property="BorderThickness" Value="1" /> </Trigger> </Style.Triggers> </Style> </ListBox.ItemContainerStyle> </ListBox>
样式选择器
必须用代码方式实现，从StyleSelector派生一个专用的类，覆盖SelectStyle()方法，选择合适的样式。
这里是一个基本的选择器，二样式选择一个：
public class ProductByCategoryStyleSelector : StyleSelector { public override Style SelectStyle(object item, DependencyObject container) { var product = (Product)item; var window = Application.Current.MainWindow; if (product.CategoryName == "Travel") { return (Style)window.FindResource("TravelProductStyle"); } else { return (Style)window.FindResource("DefaultProductStyle"); } } }
下面代码使用了反射，更为通用的一个样式选择器：
public class SingleCriteriaHighlightStyleSelector : StyleSelector { public Style DefaultStyle { get; set; } public Style HighlightStyle { get; set; } public string PropertyToEvaluate { get; set; } public string PropertyValueToHighlight { get; set; } public override Style SelectStyle(object item, DependencyObject container) { Product product = (Product)item; // 使用反射获得要检测的属性 Type type = product.GetType(); PropertyInfo property = type.GetProperty(PropertyToEvaluate); // 根据属性值决定是否这个产品应该被高亮 if (property.GetValue(product, null).ToString() == PropertyValueToHighlight) { return HighlightStyle; } else { return DefaultStyle; } } }
定义代码中用到的两个样式：
<Window.Resources> <Style x:Key="DefaultStyle" TargetType="{x:Type ListBoxItem}"> <Setter Property="Background" Value="LightYellow" /> <Setter Property="Padding" Value="2" /> </Style> <Style x:Key="HighlightStyle" TargetType="{x:Type ListBoxItem}"> <Setter Property="Background" Value="LightSteelBlue" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Padding" Value="2" /> </Style> </Window.Resources>
内联使用样式选择器：
<ListBox Name="lstProducts" HorizontalContentAlignment="Stretch"> <ListBox.ItemContainerStyleSelector> <local:SingleCriteriaHighlightStyleSelector DefaultStyle="{StaticResource DefaultStyle}" HighlightStyle="{StaticResource HighlightStyle}" PropertyToEvaluate="CategoryName" PropertyValueToHighlight="Travel" > </local:SingleCriteriaHighlightStyleSelector> </ListBox.ItemContainerStyleSelector> </ListBox>
样式选择过程，当第一次绑定列表时，被执行一次。如果，由于修改了决定样式的数据，样式不会自动改变。只能用暴力的方法强制样式更新：
var selector = lstProducts.ItemContainerStyleSelector; lstProducts.ItemContainerStyleSelector = null; lstProducts.ItemContainerStyleSelector = selector;
数据模板
每个ListBoxItem只能绑定一个字段，没有办法结合多个字段。如果要显示多个字段，这就需要用到数据模板。数据模板是一块XAML标记。它定义了应该如何显示一个绑定数据对象。二类型的控件支持数据模板：
- 内容控件通过ContentTemplate属性支持数据模板。内容模板被用来显示Content属性。
- 列表控件通过ItemTemplate属性支持数据模板。这模板被用来显示集合每个项目。集合通过ItemsSource提供。
列表项目是一个内容控件。
数据模板应该包括数据绑定表达式。
这是一个例子，用一个导圆角的边界包裹每个项目，显示二片信息，并且使用粗体的格式化高亮模型数：
<ListBox Name="lstProducts" HorizontalContentAlignment="Stretch"> <ListBox.ItemTemplate> <DataTemplate> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock FontWeight="Bold" Text="{Binding Path=ModelNumber}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock> </Grid> </Border> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
分离和重用模板
提取前一个例子的模板：
<Window.Resources> <DataTemplate x:Key="ProductDataTemplate"> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock FontWeight="Bold" Text="{Binding Path=ModelNumber}"> </TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"> </TextBlock> </Grid> </Border> </DataTemplate> </Window.Resources>
现在，你能添加你的数据模板到列表，使用一个静态资源：
<ListBox Name="lstProducts" HorizontalContentAlignment="Stretch" ItemTemplate="{StaticResource ProductDataTemplate}"></ListBox>
自动地在不同的类型的控件重用同一个数据模板。设置DataTemplate.DataType属性为绑定数据的类型。例如，前一个例子，移除Key并指定绑定Product对象：
<Window.Resources> <DataTemplate DataType="{x:Type local:Product}"> </DataTemplate> </Window.Resources>
使用更高级的模板
第一个例子，
<Window.Resources> <local:ImagePathConverter x:Key="ImagePathConverter"></local:ImagePathConverter> <DataTemplate x:Key="ProductTemplate"> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock FontWeight="Bold" Text="{Binding Path=ModelNumber}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock> <Image Grid.Row="2" Grid.RowSpan="2" Source= "{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}"> </Image> </Grid> </Border> </DataTemplate> </Window.Resources>
直接一个模板内部放置控件。例如，一列种类。挨着每个种类是一个View按钮。你能使用按钮发射另一个窗口恰好匹配在那种类产品。
处理按钮点击。明显地，所有的按钮将被链接到同样的事件处理器，你在模板内部定义它。但是，你需要决定哪一个列表项目被点击。一个解决方案是存储一些额外的识别信息在按钮的Tag属性，如下所示：
<DataTemplate> <Grid Margin="3"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Path=CategoryName}"></TextBlock> <Button Grid.Column="2" HorizontalAlignment="Right" Padding="2" Click="cmdView_Clicked" Tag="{Binding Path=CategoryID}">View ...</Button> </Grid> </DataTemplate>
你能取回Tag属性，在事件处理器中：
private void cmdView_Clicked(object sender, RoutedEventArgs e) { var cmd = (Button)sender; var categoryID = (int)cmd.Tag; ... }
当你定义绑定时，遗漏Path属性，你能抓取整个数据对象：
<Button HorizontalAlignment="Right" Padding="1" Click="cmdView_Clicked" Tag="{Binding}">View ...</Button>
传递整个的对象使更新列表选择更容易。当点击View按钮之前，移动选择到按钮被点击的列表项目。如下所示：
var cmd = (Button)sender; var product = (Product)cmd.Tag; lstCategories.SelectedItem = product;
不同的模板
以不同的方式呈现列表项目：
- 数据触发器
- 值转换器
- 模板选择器
数据触发器。基于数据项目的一个属性，设置模板元素的一个属性。例如，基于相应产品对象的CategoryName属性，你能改变包裹每个列表项目的自定义边界的背景。这是一个例子，用红字高亮在工具目录中的产品：
<DataTemplate x:Key="DefaultTemplate"> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Path=CategoryName}" Value="Tools"> <Setter Property="ListBoxItem.Foreground" Value="Red"></Setter> </DataTrigger> </DataTemplate.Triggers> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock FontWeight="Bold" Text="{Binding Path=ModelNumber}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock> </Grid> </Border> </DataTemplate>
值转换器方法：
<Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4" Background= "{Binding Path=CategoryName, Converter={StaticResource CategoryToColorConverter}">
模板选择器
你需要创造一个派生自DataTemplateSelector类。检查绑定对象并且使用你提供逻辑选择一个合适的模板。
public class SingleCriteriaHighlightTemplateSelector : DataTemplateSelector { public DataTemplate DefaultTemplate { get; set; } public DataTemplate HighlightTemplate { get; set; } public string PropertyToEvaluate { get; set; } public string PropertyValueToHighlight { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { Product product = (Product)item; // Use reflection to get the property to check. Type type = product.GetType(); PropertyInfo property = type.GetProperty(PropertyToEvaluate); // Decide if this product should be highlighted // based on the property value. if (property.GetValue(product, null).ToString() == PropertyValueToHighlight) { return HighlightTemplate; } else { return DefaultTemplate; } } }
这里是创建两个数据模板的标记：
<Window.Resources> <DataTemplate x:Key="DefaultTemplate"> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Text="{Binding Path=ModelNumber}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock> </Grid> </Border> </DataTemplate> <DataTemplate x:Key="HighlightTemplate"> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" Background="LightYellow" CornerRadius="4"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock FontWeight="Bold" Text="{Binding Path=ModelNumber}"></TextBlock> <TextBlock Grid.Row="1" FontWeight="Bold" Text="{Binding Path=ModelName}"></TextBlock> <TextBlock Grid.Row="2" FontStyle="Italic" HorizontalAlignment="Right"> *** Great for vacations ***</TextBlock> </Grid> </Border> </DataTemplate> </Window.Resources>
这里是应用模板选择器的标记：
<ListBox Name="lstProducts" HorizontalContentAlignment="Stretch"> <ListBox.ItemTemplateSelector> <local:SingleCriteriaHighlightTemplateSelector DefaultTemplate="{StaticResource DefaultTemplate}" HighlightTemplate="{StaticResource HighlightTemplate}" PropertyToEvaluate="CategoryName" PropertyValueToHighlight="Travel" > </local:SingleCriteriaHighlightTemplateSelector> </ListBox.ItemTemplateSelector> </ListBox>
模板与选择
例1，修改选中项目的背景色：
Foreground属性使用属性继承，所以你添加到模板任何元素自动地获得白颜色。Background属性不使用属性继承，但是默认背景颜色是透明。
首先，设置项目容器的样式：
<ListBox Name="lstProducts" HorizontalContentAlignment="Stretch"> <ListBox.ItemContainerStyle> <Style> <Setter Property="Control.Padding" Value="0"></Setter> <Style.Triggers> <Trigger Property="ListBoxItem.IsSelected" Value="True"> <Setter Property="ListBoxItem.Background" Value="DarkRed" /> </Trigger> </Style.Triggers> </Style> </ListBox.ItemContainerStyle> </ListBox>
然后，修改数据模板：
<DataTemplate> <Grid Margin="0" Background="White"> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4" Background="{Binding Path=Background, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem} }}" > <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock FontWeight="Bold" Text="{Binding Path=ModelNumber}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=ModelName}"></TextBlock> </Grid> </Border> </Grid> </DataTemplate>
例2，选中项目后，显示此项目的细节：
在数据模板中，使用Binding的RelativeSource属性搜索目前的ListBoxItem。如果它没有被选择，设置额外信息的Visibility属性，你能隐藏它。
使用一个数据触发器，当ListBoxItem的IsSelected属性被改变，修改容器的Visibility属性。
数据触发器只需要放在要隐藏的容器内。
这是还没有自动扩展功能的简化版：
<DataTemplate> <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4"> <StackPanel Margin="3"> <TextBlock Text="{Binding Path=ModelName}"></TextBlock> <StackPanel> <TextBlock Margin="3" Text="{Binding Path=Description}" TextWrapping="Wrap" MaxWidth="250" HorizontalAlignment="Left"></TextBlock> <Image Source="{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}"> </Image> <Button FontWeight="Regular" HorizontalAlignment="Right" Padding="1" Tag="{Binding}">View Details...</Button> </StackPanel> </StackPanel> </Border> </DataTemplate>
最内层的StackPanel包含着只对选中项目显示的内容，所以设置这个容器的样式：
<StackPanel> <StackPanel.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem} }}" Value="False"> <Setter Property="StackPanel.Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </StackPanel.Style> </StackPanel>
在这个例子中，你需要使用DataTrigger而不是一个普通的触发器，因为你需要的属性在祖先元素中（ListBoxItem），并且唯一访问它的办法是使用数据绑定表达式。
改变项目布局
使用任何从System.Windows.Controls.Panel派生的类，设置ListBox的ItemsPanelTemplate属性，可以改变项目布局。
下面例子，使用WrapPanel改变项目布局：
<ListBox Margin="7,3,7,10" Name="lstProducts" ItemTemplate="{StaticResource ItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel></WrapPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox>
你必须也设置ScrollViewer.HorizontalScrollBarVisibility附加属性为Disabled。这确保ScrollViewer从不使用水平的scrollbar。
VirtualizingStackPanel对于大量数据项目有更好的性能。
组合框
默认，ComboBox是只读的。当设置IsReadOnly属性为假并且IsEditable属性为真，选择框变成文本框，你能键入任何文本。
组合框有自动完成的功能。要关闭它，设置ComboBox.IsTextSearchEnabled属性为假。此属性位于ItemsControl类。
如果IsEditable属性是假（这是默认值），选择框将显示一个项目的精确视觉副本。
重要的细节是组合框显示的内容是什么，而不是它的数据源是什么。例如，用Product对象填充一个组合框控件，并且设置DisplayMemberPath属性为ModelName。如此，组合框显示每个项目的ModelName属性。即组合框从一组Product对象获取信息，你的标记创造的是一个普通的文本列表。它将显示当前产品的ModelName，并且如果IsEditable是真并且IsReadOnly是假，它将允许你编辑那值。
如果IsEditable属性是真，选择框显示一个它的一个逐字的表示法。就是简单地调用ToString()到项目。一般情况下，显示一个类名的全称。
纠正这个问题最简单的方法是，设置TextSearch.TextPath附着属性指明组合框应该使用的内容。
<ComboBox IsEditable="True" IsReadOnly="True" TextSearch.TextPath="ModelName" ...>