Добавить цветное поле слева от моего элемента в ComboBox

Question

Вот как я сейчас заполняю поле со списком. Есть ли способ использовать список вроде этого, но также добавить небольшое поле предварительного просмотра цвета слева от элемента?

private void PantsColor_ComboBox_Loaded(object sender, RoutedEventArgs e)
{
    List<string> data = new List<string>();
    data.Add("Blue");
    data.Add("Red");
    data.Add("Green");
    data.Add("Orange");
    data.Add("Pink");
    data.Add("Purple");

    var pantsColorComboBox = sender as ComboBox;
    pantsColorComboBox.ItemsSource = data;
    pantsColorComboBox.SelectedIndex = 0;
}

Answer 1

Цветное окно предварительного просмотра слева от элемента может быть добавлено в ComboBox.ItemTemplate:

private void ColorComboBoxLoaded(object sender, RoutedEventArgs e)
{
    var cbo = sender as ComboBox;
    if (cbo == null)
        return;
    cbo.ItemsSource = new List<string> { "Blue", "Red", "Green", "Orange", "Pink", "Purple" };
}

<ComboBox SelectedIndex="0"
          Loaded="ColorComboBoxLoaded">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

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

Результат:

обратите внимание, что SelectedIndex может быть установлен в xaml. также обратите внимание, что даже если для параметра Background задано значение string, оно по-прежнему применяется правильно, поскольку имеется встроенный конвертер, который создает Brush из имени цвета (или шестнадцатеричного кода ARGB).

---

также все элементы могут быть установлены в xaml без каких-либо обработчиков событий в коде:

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

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

    <ComboBox.Items>
        <system:String>Blue</system:String>
        <system:String>Red</system:String>
        <system:String>Green</system:String>
        <system:String>Orange</system:String>
        <system:String>Pink</system:String>
        <system:String>Purple</system:String>
    </ComboBox.Items>
</ComboBox>

Answer 2

Вам нужно использовать Datatemplate для предметов Combobox.

<ComboBox x:Name="pantsColorComboBox" Height="30" Width="200">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="20" Height="20" Background="{Binding Key}"></TextBlock>
                    <TextBlock Text="{Binding Value}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

Ваш источник предметов будет изменен на словарь.

        var data = new Dictionary<SolidColorBrush,string>();
        data.Add(Brushes.Blue,"Blue");
        data.Add(Brushes.Red,"Red");
        data.Add(Brushes.Green, "Green");
        data.Add(Brushes.Orange, "Orange");
        data.Add(Brushes.Pink, "Pink");
        data.Add(Brushes.Purple, "Purple");

        var pantsColorComboBox = sender as ComboBox;

        pantsColorComboBox.ItemsSource = data;
        pantsColorComboBox.SelectedIndex = 0;