How to add grid to my combobox and display obervableCollection data?

Question

I use a combobox and I would like to proceed as follows: I choose an element in cmb1, this allows to display in cmb2 a Collection.

This code allows me to retrieve the data I want ( result A = ObservableCollectionA, result B = ObservableCollection B...)

    <ComboBox Name="cmbResultatListe" 
              Margin="0,10,0,10"              
              Grid.Row="4"
              Grid.Column="2"
              Height="25"
              Width="250" >
        <ComboBox.Style>
            <Style TargetType="{x:Type ComboBox}">
                <Setter Property="ItemsSource" Value="{Binding Sections}"></Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedChoiceList}" Value="Etablissement">
                        <Setter Property="ItemsSource" Value="{Binding Etablissements}"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedChoiceList}" Value="Service">
                        <Setter Property="ItemsSource" Value="{Binding Services}"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ComboBox.Style>
    </ComboBox>

I would now like to divide my combobox into three grids, so that I can proceed as follows:

If result A is selected => cmb2 grid0 = ObservableCollectionA.ID, cmb2 grid1 = observableCollectionA.Name...

If result B is selected => cmb2 grid0 = ObservableCollectionB.Name, cmb2 grid1 = observableCollectionB.Years...

And i don't know how can i do that.

Any tips ?

Thank you for your help.

Edit :

c# code :

    private ObservableCollection<Etablissement> _EtablissementsUtilisateur;
    public ObservableCollection<Etablissement> EtablissementsUtilisateur
    {
        get
        {
            return _EtablissementsUtilisateur;
        }
        set
        {
            if (value != _EtablissementsUtilisateur)
            {
                _EtablissementsUtilisateur = value;
                RaisePropertyChanged(nameof(EtablissementsUtilisateur));
            }
        }
    }

    private ObservableCollection<ServiceSectionModel> _Services;
    public ObservableCollection<ServiceSectionModel> Services
    {
        get
        {
            return _Services;
        }
        set
        {
            if (value != _Services)
            {
                _Services = value;
                RaisePropertyChanged(nameof(Services));
            }
        }
    }

    private ObservableCollection<ServiceSectionModel> _Sections;
    public ObservableCollection<ServiceSectionModel> Sections
    {
        get
        {
            return _Sections;
        }
        set
        {
            if (value != _Sections)
            {
                _Sections = value;
                RaisePropertyChanged(nameof(Sections));
            }
        }
    }         
    private string _SelectedChoiceList;
    public string SelectedChoiceList
    {
        get
        {
            return _SelectedChoiceList;
        }
        set
        {
            if (value != _SelectedChoiceList)
            {
                _SelectedChoiceList = value;
                RaisePropertyChanged(nameof(SelectedChoiceList));
            }
        }
    }            

Etablissements = new ObservableCollection<Etablissement>((await _dataService.GetEtablissements().ConfigureAwait(false)));
Services = await _dataService.GetServicesAsync(false).ConfigureAwait(false);
Sections = await _dataService.GetSectionsAsync(_dataService.ParamGlobaux.IDEtablissement).ConfigureAwait(false);

Etablissement contain ID, Name, Years.

Service contain Color, ID, Name.

Section contain Color, ID, SectionName.

Edit 2 : I would like something like this exemple :

        <ComboBox Name="CbService" HorizontalAlignment="Left" Margin="115,67,0,0" VerticalAlignment="Top" Width="150" ItemsSource="{Binding}" SelectionChanged="CbRecherche_SelectionChanged" KeyboardNavigation.TabIndex="1" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Libelle}" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <ComboBox.ItemContainerStyle>
            <Style TargetType="{x:Type ComboBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid x:Name="gd" TextElement.Foreground="Black" Background="White">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="50"/>
                                    <ColumnDefinition Width="Auto" MinWidth="50" />
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Fill="{Binding Fond}" Grid.Column="0"/>
                                <TextBlock Margin="5" Grid.Column="0" Text="{Binding ID}"/>
                                <TextBlock Margin="5" Grid.Column="1" Text="{Binding Libelle}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ComboBox.ItemContainerStyle>

Currently my combobox displays a string. I want something like this :

In this example, there is an ID, a color only in the ID part, and a Name. I can't do that with my string at the moment.

You may be able to achieve this by using Datatemplates, I can write an example if you show me the C# codes. — Dark Templar, Oct 14 '19 at 09:05
https://stackoverflow.com/questions/561166/binding-a-wpf-combobox-to-a-custom-list have a look this question. — nzrytmn, Oct 14 '19 at 09:30
I don't really understand how he defines the "grid" in the combobox. I have to create three DataTemplates, one for each collection and display? — Sephystos, Oct 14 '19 at 09:50
Well I could write an example of how to use DataTemplates but I have to admit it looks a little bit over complicated to me, Observable Collections already contain the INotifyPropertyChanged interface, is there any reason to use the RaisePropertyChanged event? — Dark Templar, Oct 14 '19 at 11:03
Not if you have another solution. I used to work with String and only use `ItemsSource` and `SelectedValue`, and INotifyPropertyChanged was used to display the changes. I just edit with a picture of what i want, if this can help. Thanks again for your time. — Sephystos, Oct 14 '19 at 11:15

Dark Templar · Accepted Answer · 2019-10-14T12:17:21.900

I belive you may be able to reduce the size of your codes by removing the RaisePropertyChanged event as ObservableCollections already contain the INotifyPropertyChanged interface, I have made a simple example of how to use Datatemplate to display information from ObservableCollections.

Step 1: C# codes:

namespace WpfApp1
{

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        ComboBox1.ItemsSource = Services;
        Services.Add(new ServiceSectionModel { Color = Brushes.Red, ID = "Clem", Name = "Clementine" });
        Services.Add(new ServiceSectionModel { Color = Brushes.White, ID = "011", Name = "Logistique" });
        Services.Add(new ServiceSectionModel { Color = Brushes.Green, ID = "MBT", Name = "Montbrilland" });
    }

    public class ServiceSectionModel
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public SolidColorBrush Color { get; set; }
    }

    ObservableCollection<ServiceSectionModel> Services = new ObservableCollection<ServiceSectionModel>();
}

}

Step 2: XAML codes:

    <ComboBox x:Name="ComboBox1" HorizontalAlignment="Center" VerticalAlignment="Center">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Background="{Binding Color}" Text="{Binding ID}" Margin="0,0,10,0" Padding="5,2,10,2"></TextBlock>
                    <TextBlock Text="{Binding Name}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

Okay, thanks for your help already. I understand your code, but I'm not sure how to incorporate it into my DataTrigger. I have to make a DataTemplate for each collection, right? — Sephystos, Oct 14 '19 at 12:59
Not necessarily, for example you can just add more TextBlocks or other Controls like another ComboBox inside, think of DataTemplates as a way that let you shape how you want to display the data. — Dark Templar, Oct 14 '19 at 14:54

How to add grid to my combobox and display obervableCollection data?

1 Answers1