Bind Color Preview квадратов в ComboBox

Question

Я пытаюсь сделать ComboBox с текстовыми элементами и цветной рамкой рядом с каждым.

Я хочу связать Array цветов с ComboBox.ItemTemplate Border Background.

• [красное] яблоко
• [зеленый] груша
• [фиолетовый] виноград

Я сделал этот пример в Photoshop:

---

Задача

Однако цвета фона не отображаются.

Это может быть List вместо Array, но я не знаю, какой метод цвета использовать, Color, Colors, Brush, Brushes, SolidColorBrush, String и как заставить его связываться и отображаться правильно.

Я получил идею отсюда https://stackoverflow.com/a/51096379/6806643
Но это привязывается к имени цвета текста в ComboBox. Если слово не цветное, оно будет отображаться пустым.

---

C #

public static SolidColorBrush[] _cboColor_Previews = new SolidColorBrush[] {
    new SolidColorBrush(Colors.Red),
    new SolidColorBrush(Colors.Green),
    new SolidColorBrush(Colors.Purple),
};
public static SolidColorBrush[] cboColor_Previews
{
    get { return _cboColor_Previews; }
    set { _cboColor_Previews = value; }
}

XAML

<ComboBox x:Name="cboColors" 
          HorizontalAlignment="Left"
          Margin="0,2,0,0" 
          VerticalAlignment="Top" 
          Width="100"
          Height="22" >

    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Background="{Binding cboColor_Previews}" 
                        Height="12" 
                        Width="12" 
                        Margin="2"/>
                <TextBlock Grid.Column="1" 
                           Margin="5,0" 
                           VerticalAlignment="Center" 
                           Text="{Binding}"/>
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>

    <System:String>Apple</System:String>
    <System:String>Pear</System:String>
    <System:String>Grape</System:String>
</ComboBox>

Answer 1

На самом деле вам не нужно определять кисти.

Я бы определил класс для представления ваших фруктов следующим образом:

public class Fruits
{
    public string Fruit { get; set; }
    public Color Color { get; set; }
    public string ColorStr { get { return Color.ToString(); } }
    public Fruits(string fruit, Color color)
    {
        Fruit = fruit;
        Color = color;
    }
}

Класс Color - это класс System.Windows.Media.Color. Когда вы делаете связывание в XAML, связывание со строкой Hex, которая представляет цвет, работает, и Color.ToString() делает именно это.

Так что теперь у меня есть список вашего Fruits класса:

public partial class MainWindow : Window
{
    public List<Fruits> FruitList { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        FruitList = new List<Fruits>()
        {
            new Fruits("Apple", Colors.Red),
            new Fruits("Pear", Colors.Green),
            new Fruits("Grape", Colors.Purple)
        };

        cboColors.ItemsSource = FruitList;
    }
}

Установите ComboBox.ItemsSource в наш список, как показано выше.

А ваши ComboBox привязки должны выглядеть так:

<ComboBox x:Name="cboColors" HorizontalAlignment="Center" Margin="0,20,0,0" 
          VerticalAlignment="Top" Width="100" Height="22">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Background="{Binding ColorStr}" Height="12" Width="12" Margin="2"/>
                <TextBlock Grid.Column="1" Margin="5,0" VerticalAlignment="Center" Text="{Binding Fruit}"/>
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Окончательный вывод:

---

EDIT

Получение выбранного предмета. На данный момент ваш ComboBox.ItemsSource связан с вашим FruitList списком. Поэтому всякий раз, когда пользователь выбирает элемент из раскрывающегося списка, выбирается объект типа Fruist.

Поэтому, если вы хотите выбрать предмет, вы можете, например, использовать событие ComboBox_SelectionChanged и привести ComboBox.SelectedItem к типу Fruits.

private void CboColors_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Casting the selected item to type Fruits
    var selected = (Fruits)cboColors.SelectedItem;
    // Here I'm setting window title to the selected fruit to illustrate.
    // You can use this however you like.
    this.Title = selected.Fruit;
}

Я думаю, что для вас будет хорошей идеей погрузиться в мир DataBinding и изучить основы. Это и , это может быть хорошей отправной точкой.