组合框中的 WPF 数据绑定彩色项目

Posted 2023-02-21

【中文标题】组合框中的 WPF 数据绑定彩色项目

【英文标题】：WPF databinding colored items in a combobox

【发布时间】：2016-07-09 12:42:58

【问题描述】：

我已阅读其他几篇文章，但没有一篇能够回答我的问题组合 我有一个 ComboBox，我想在其中显示不同颜色的项目，这可以通过使用 ComboBoxItem 并设置其背景来完成。当我想以不同的颜色存储我的 CategoryDTO 并且以后能够再次提取它们时，我的问题就出现了。我需要显示的只是我的 CategoryDTO 的颜色和 Name 属性。然后我必须能够从 SelectedItem 属性中获取 CategoryDTO 对象。我尝试了使用 ItemsSource、DisplayMemberPath 和 SelectedValuePath 的各种解决方案。但是只完成了这个 正如所见，它显示颜色，但仅显示所选 CategoryDTO 的名称，我什至还没有测试 SelectedItem 是否正常工作。 下面我将放置我使用的代码。

[Serializable]
public class CategoryDTO

    public string Name  get; set; 
    ...not important...



CategoryDTO[] categories = await _isd.GetCategoriesAsync();
comboBoxCategory.ItemsSource = categories.Select(c => new CategoryComboBoxItem(c)).ToList();
comboBoxCategory.DisplayMemberPath = "Name";
comboBoxCategory.SelectedValuePath = "Name";

public class CategoryComboBoxItem : ComboBoxItem

    public CategoryComboBoxItem(CategoryDTO category)
    
        this.Background = new SolidColorBrush(category.Color);
        this.Content = category;
    

我没有在 .xaml 中指定任何特殊内容，因此我将省略该部分。除此之外，我希望能够使用 Name 属性设置 SelectedItem。我非常喜欢代码隐藏的答案，但如果它是愚蠢的复杂 .xaml 只有答案也一样好。我对 MVVM 没有任何经验，我可以假设它会被建议。随着我对 WPF 的深入研究，我当然会扩展我对这件事的了解，但现在我只是希望它能够工作。这不是家庭作业

编辑：忘记列出我也遇到的错误

System.Windows.Data 错误：4：找不到与引用“RelativeSource FindAncestor，AncestorType='System.Windows.Controls.ItemsControl'，AncestorLevel='1''的绑定源。 BindingExpression:Path=Horizo​​ntalContentAlignment;数据项=空；目标元素是'CategoryComboBoxItem'（名称=''）；目标属性是“Horizo​​ntalContentAlignment”（类型“Horizo​​ntalAlignment”） System.Windows.Data 错误：4：找不到与引用'RelativeSource FindAncestor，AncestorType='System.Windows.Controls.ItemsControl'，AncestorLevel='1''进行绑定的源。 绑定表达式：路径=垂直内容对齐；数据项=空；目标元素是'CategoryComboBoxItem'（名称=''）；目标属性是“VerticalContentAlignment”（类型“VerticalAlignment”） System.Windows.Data 错误：26：ItemTemplate 和 ItemTemplateSelector 对于已经属于 ItemsControl 容器类型的项目被忽略；类型='CategoryComboBoxItem'

【问题讨论】：

您收到的错误是由于在您的 XAML 文件中设置的绑定错误。你能展示你的 XAML 标记吗？

嗨 Jay T。如上所述，我不在 XAML 中执行任何绑定。 XAML 中唯一的东西是空的 ComboBox。我相信错误来自在代码隐藏中滥用绑定。

【参考方案1】：

要使用 WPF 正确执行此操作，我认为您需要更好地了解 DataContext 及其工作原理。我为此写了一篇博文，只是为了在 SE 上链接：What is this "DataContext" you speak of?。我强烈建议您在使用 WPF 之前确保您了解 DataContext。

您的总体想法是要将ComboBox 绑定到CategoryDTO 项目列表，并将SelectedValue 属性设置为Name。

<!-- create a ComboBox -->
<ComboBox x:Name="MyComboBox" SelectedValuePath="Name">
    <!-- Add a custom Style to the individual items in combobox -->
    <ComboBox.ItemContainerStyle>
        <!-- In custom style, bind background color -->
        <Style TargetType="x:Type ComboBoxItem">
           <Setter Property="Background" Value="Binding Color"/>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

如果您的 DataContext 设置正确，您可以使用绑定为您的 ComboBox 设置项目

<ComboBox ItemsSource="Binding CategoryList" ..>

或者后面有代码

MyComboBox.ItemsSource = CategoryList;

这也会将您的ComboBox.SelectedItem 与列表中选定的CategoryDTO 项目同步，因此您可以直接将其投射以对其进行处理

CategoryDTO selected = (CategoryDTO)MyComboBox.SelectedItem;
DoSomethingWithSelected(selected);

或绑定它，以便从 DataContext 中轻松使用

<ComboBox SelectedItem="Binding SelectedCategory" ..>

// Can now use SelectedCategory directly
DoSomethingWithSelected(SelectedCategory);

注意：根据.Color 属性的数据类型，您可能需要使用Converter 将.Color 值转换为SolidColorBrush 的.Background 属性。应该有很多在线转换器的示例，或者只是询问您是否需要帮助。

【讨论】：

嗨，Rachel，感谢您的快速回答。我会尽快试用您的解决方案，然后回来提供反馈。我还将确保阅读您的文章，从您的回复来看，您对我的问题一针见血。

经过测试，效果很好。当然，颜色的东西会产生一些错误，但我只会按照建议添加一个转换器。考虑到我的 Color 属性是 System.Windows.Media.Color 类型，这应该很简单。谢谢，我会把这个标记为答案。

@LuqJensen 很高兴听到！祝你的项目好运:)