TabControl which is bound to an ObservableCollection MVVM

Question

I am currently working on a project using MVVM pattern and can't find anywhere a solution how to bind an ObservableCollection to a TabControl which has a template for an item of it.

For example, this is where I got so far:

<TabControl ItemsSource="{Binding ConnStringBufferOC}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                <Grid>
                   <TextBox Text="{Binding Username}"/>
                   <!-- Controls here -->
                </Grid>
                </DataTemplate>
            </TabContro.ItemTemplate>
</TabControl>

This however only partialy works. It creates controls in the tab header area instead of the tab content area. I would want to bind each item to a new tab which has a header of a bound source from OC, for example:

Header="{Binding Name}"

And in the content area of each tab I would like to have controls, which have contents bound from the ObservableCollection in this example ConnStringBufferOC. So every tab has same controls only content bound to the controls is different.

Answer 1

You need to specify ContentTemplate for tab content and ItemTemplate for tab header

<TabControl ItemsSource="{Binding ConnStringBufferOC}">
    <TabControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <TextBox Text="{Binding Username}"/>
                <!-- Controls here -->
            </Grid>
        </DataTemplate>
    </TabControl.ContentTemplate>
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>