[英]Displaying an Image and Text in a ComboBox in a DataGridComboBoxColumn
I have a DataGrid with a column that is a DataGridComboBoxColumn.我有一个 DataGrid,其中有一列是 DataGridComboBoxColumn。 For the items in those combo boxes I need to display an image and some text.
对于那些组合框中的项目,我需要显示图像和一些文本。 Below is what I was able to do.
以下是我能够做的。 But the initial binding isn't working.
但是初始绑定不起作用。 And once I select an item in the combobox the images all disappear in all the comboboxes.
一旦我 select combobox 中的一个项目,图像就会在所有组合框中消失。
Is what I am doing on the right path to getting this to work with some sort of trigger or binding I am missing?我正在做的事情是否正确,可以使它与我缺少的某种触发器或绑定一起工作? Or is there a better way to display both an image and text in a combobox in a datagrid?
或者是否有更好的方法在数据网格中的 combobox 中显示图像和文本?
<DataGridComboBoxColumn Header="Status" SelectedValueBinding="{Binding Status}" SelectedItemBinding="{Binding Status}" SelectedValuePath="Tag" xmlns:s="clr-namespace:System;assembly=mscorlib"
>
<DataGridComboBoxColumn.ItemsSource>
<x:Array Type="{x:Type StackPanel}">
<StackPanel Orientation="Horizontal">
<Image Source="{DynamicResource DispatchedImage}">
</Image>
<TextBlock Text="DISP"/>
<StackPanel.Tag>
<s:String>"1"</s:String>
</StackPanel.Tag>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="{DynamicResource ConfirmedImage}">
</Image>
<TextBlock Text="CONF"/>
<StackPanel.Tag>
<s:String>"2"</s:String>
</StackPanel.Tag>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="{DynamicResource PickedUpImage}">
</Image>
<TextBlock Text="P/U"/>
<StackPanel.Tag>
<s:String>"3"</s:String>
</StackPanel.Tag>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="{DynamicResource DeliveredImage}">
</Image>
<TextBlock Text="DEL"/>
<StackPanel.Tag>
<s:String>"4"</s:String>
</StackPanel.Tag>
</StackPanel>
</x:Array>
</DataGridComboBoxColumn.ItemsSource>
</DataGridComboBoxColumn>
You should bind the ItemsSource
of the ComboBox
to an IEnumerable<T>
where T
is a type that has a property for the display value and the id value:您应该将
ComboBox
的ItemsSource
绑定到IEnumerable<T>
,其中T
是具有显示值和 id 值属性的类型:
public class CustomerComboBoxItem
{
public string Name { get; set; }
public int Value { get; set; }
}
Add the following property to your view model:将以下属性添加到您的视图 model:
public CustomerComboBoxItem[] Items { get; } = new CustomerComboBoxItem[]
{
new CustomerComboBoxItem(){ Name ="DISP", Value = 1 },
new CustomerComboBoxItem(){ Name ="CONF", Value = 2 },
new CustomerComboBoxItem(){ Name ="P/U", Value = 3 },
new CustomerComboBoxItem(){ Name ="DEL", Value = 4 }
};
...and use an ItemTemplate
: ...并使用
ItemTemplate
:
<DataGrid ...>
<DataGrid.Resources>
<DataTemplate x:Key="template">
<StackPanel Orientation="Horizontal">
<Image>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Text}" Value="DISP">
<Setter Property="Source" Value="{DynamicResource DispatchedImage}" />
</DataTrigger>
<DataTrigger Binding="{Binding Text}" Value="CONF">
<Setter Property="Source" Value="{DynamicResource ConfirmedImage}" />
</DataTrigger>
<DataTrigger Binding="{Binding Text}" Value="P/U">
<Setter Property="Source" Value="{DynamicResource PickedUpImage}" />
</DataTrigger>
<DataTrigger Binding="{Binding Text}" Value="DEL">
<Setter Property="Source" Value="{DynamicResource DeliveredImage}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridComboBoxColumn Header="Status"
SelectedValueBinding="{Binding Status}"
SelectedValuePath="Id">
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="ItemsSource" Value="{Binding Path=DataContext.Items, RelativeSource={RelativeSource AncestorType=DataGrid}}" />
<Setter Property="ItemTemplate" Value="{StaticResource template}" />
</Style>
</DataGridComboBoxColumn.ElementStyle>
<DataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="ItemsSource" Value="{Binding Path=DataContext.Items, RelativeSource={RelativeSource AncestorType=DataGrid}}" />
<Setter Property="ItemTemplate" Value="{StaticResource template}" />
</Style>
</DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>
...
</DataGrid.Columns>
</DataGrid>
See the section on data templating in the docs for more information.有关详细信息,请参阅文档中有关数据模板的部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.