c# - Editable combo box containing an image and a number

Question

I'm in trouble with one combobox. The goal is:

• Combo must be editable and it should accept digits only (because ItemSource is an array of integers)
• Combo displays 2 information: one is rectangle showing predefined color, other one is an integer value
• Colors have to loop, except the one with 0 index (e.g. we've got 3 colors, if user inputs 4, expected color is the second, then third, then second and so on)
• Rectangle should be visible and changing color during typing the number

What is the problem is that while I change combo IsEditable to true, data template is no longer followed. It simply shows the integer value. I'm using a converter to translate integer to actual color and this part seems to work correctly.

I've got no idea what to do about it now. Please help.

XAML:

<Window x:Class="WPFCustomControls.MainWindow" 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local="clr-namespace:WPFCustomControls" 
   Title="MainWindow" Height="350" Width="604">
    <StackPanel>
        <ComboBox 
            x:Name = "customControl"  
            Width = "Auto"
            Height="Auto"
            VerticalContentAlignment="Top"
            VerticalAlignment="Stretch"
            IsEditable="True">
            <ComboBox.ItemsSource>
                <Int32Collection>0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18</Int32Collection>
            </ComboBox.ItemsSource>
            <ComboBox.Resources>
                <ResourceDictionary>
                    <local:IntToColorConverter x:Key="conv"/>
                </ResourceDictionary>
            </ComboBox.Resources>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0 0 0 2">
                        <Rectangle Width="28" Height="8" Fill="{Binding Converter={StaticResource conv}}" Stroke="#5C5A6B"/>
                        <TextBlock Margin="3 0 0 0" Text="Class "/>
                        <TextBlock Text="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </StackPanel>
</Window> 

Converter:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;

namespace WPFCustomControls
{
    public class IntToColorConverter : IValueConverter
    {
        static List<SolidColorBrush> Colors => new List<SolidColorBrush>()
        {
            new SolidColorBrush(Color.FromRgb(  0,   0,   0)),
            new SolidColorBrush(Color.FromRgb(157, 157, 169)),
            new SolidColorBrush(Color.FromRgb(231,  83,  92)),
        };

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is int i && i >= 0)
            {
                if (i <= Colors.Count - 1) 
                    return Colors[i];
                return i % (Colors.Count - 1) == 0 ? Colors[Colors.Count - 1] : Colors[i % (Colors.Count - 1)];
            }
            return Colors[0];
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

question from:https://stackoverflow.com/questions/65847953/editable-combo-box-containing-an-image-and-a-number

Answer 1

Waitting for answers