Use 2 ObservableCollection to fill TabControl : one for items, one for Content

Question

In my ViewModel, I have 2 ObservableCollection of different types (ListeEquipements and ListeTypeEquipements). What I try to do is using my first collection to create Items of my Tabcontrol, and fill each tab content with properties of my second collection.

Details of my window (actually my UserControl) :

<UserControl.DataContext>
    <vm:EquipementsViewModel/>
</UserControl.DataContext>
<TabControl Grid.Row="1" 
                    TabStripPlacement="Bottom"
                    ItemsSource="{Binding ListeTypeEquipements}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Nom}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <DataGrid ItemsSource="{Binding ListeEquipements}">
                            <DataGrid.Columns>
                            <DataGridTextColumn Header="Tag" Binding="{Binding ListeEquipements.Tag}" />
                            </DataGrid.Columns>
                    </DataGrid>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

Tricky question, take a look on mine, I think you can reuse if you change it a little bit. Main points are the `ContentTemplateSelector` (this will be your ListeTypeEquipements) and `DataTemplate` in the `TabControl.Resources` (that will be your ListeEquipements), you will not need the `CompositeCollection` or the `CollectionViewSource` https://stackoverflow.com/questions/48665847/create-tabitems-with-different-usercontrols-in-tabcontrol?noredirect=1&lq=1 — Nekeniehl, Feb 19 '18 at 09:09
It's unclear to me whether you want to use the same list inside the content of multiple tab or if you want to maintain two lists of equal size and create the content from an individual list item that somehow relates to the selected tab header item. — grek40, Feb 19 '18 at 12:17
Each tab will have different content. For exemple, my first tab will be labeled "Valve", and the its content will be the list of valves and their properties. The second tab named "motor', containing a list of motors and their properties. — hervai, Feb 19 '18 at 12:20
Not sure if i've been clear : i've 2 `ObservableCollection` in my viewmodel : the first contains objects whose name will be used to name tabs. The second contains other objects, whose properties will be used to fill tab's content. — hervai, Feb 19 '18 at 12:48
Sorry its not really clear. It sounds as if you would need to maintain two lists of equal size (header and content items) with the content containing a nested list of sub-items to be displayed inside a specific tab content. Thats more than two lists if I have to count it. Maybe you could give a better example __including the viewmodel classes__ in your question. — grek40, Feb 19 '18 at 21:01

hervai · Answer 1 · 2018-02-19T10:57:16.723

I've managed to make it work a bit better, doing like that :

<TabControl Grid.Row="1" 
                    TabStripPlacement="Bottom"
                    ItemsSource="{Binding ListeTypeEquipements}"          
         >
            <TabControl.Resources>
                <CollectionViewSource x:Key="Equipements" Source="{Binding ListeEquipements}"/>
             </TabControl.Resources>
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Nom}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Label Content="{Binding Source={StaticResource Equipements}, Path=Tag}"/>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

My new problem is that i want my ContentTemplate to list each Equipement of ListeEquipement, by now i can only display the first member.

Use 2 ObservableCollection to fill TabControl : one for items, one for Content

1 Answers1