Add additional info on a combobox item with different colors

Question

First this is my code behind:

conn.Open();
DataTable data = new DataTable();
string sql = "SELECT * FROM itemsTbl";
SQLiteCommand command = new SQLiteCommand(sql, conn);
SQLiteDataAdapter adapter = new SQLiteDataAdapter(command);
adapter.Fill(data);
cmb_items.ItemsSource = data.DefaultView;
cmb_items.DisplayMemberPath = "item_description";
cmb_items.SelectedValuePath = "item_id";
conn.Close();

And this is my xaml:

<ComboBox x:Name="cmb_items"
    VerticalAlignment="Top" VerticalContentAlignment="Center" 
    FontSize="14" 
    Foreground="#666"
    Height="30" 
    Margin="20,20,20,10" 
    IsEditable="True" 
    ItemsSource="{Binding}" 
    TextSearch.Text="{Binding Path=item_description}" />

It's fine and working but I would like to add some information on the combobox item so that the user would already know if there's stock or is it by packs or pcs or something like that. Also if possible, change the color of zero stock to red.

This is my current combobox:

This is my goal (photoshop):

I need the extra info only on the combobox items, but if the user clicks the item, only the item_description will show, like this:

I honestly don't know what to do here, I tried to add a combobox.itemtemplate but when I choose an item it shows "System.Data.DataRowView". Also the combobox is searchable. Should I change my approach and add the items through loop? I'm kinda new to wpf, I tried wpf before but I stopped because of busy work, so any help is really appreciated thanks!

score 0 · Accepted Answer · edited May 23 '17 at 12:33

1.In order to display extra info you can use ItemTemplate and DataTrigger:

     <ComboBox.ItemTemplate>
            <DataTemplate DataType="wpfApplication1:Item">
                <StackPanel Orientation="Horizontal">
                    <TextBlock  Text="{Binding item_id}"/>
                    <TextBlock  Text="{Binding item_description}" Margin="300,0,0,0">
                        <TextBlock.Style>
                            <Style>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding item_description}" Value="0">
                                        <Setter Property="TextBox.Foreground" Value="Red"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>

2.In order to have different display to the selected item from other items you can use DataTemplateSelector: https://stackoverflow.com/a/33421573/3955716

Add additional info on a combobox item with different colors

1 Answers1