CODEWITHSUNDEEP
c#wpf
Samuel Cabrera
Samuel Cabrera

Reputation: 73

How can one apply an itemtemplate to default TabItems?

I have the following TabControl with 2 default tabitems.

<TabControl>
    <TabControl.ItemTemplate>
        <DataTemplate>
            <ScrollViewer VerticalScrollBarVisibility="Auto" Height="300" Content="{Binding}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabItem Header="Conexión"><local:ConnectionSettings/></TabItem>
    <TabItem Header="Cuestionario"><local:QuestionEditor/></TabItem>
</TabControl>

The current xaml doesn't apply the ItemTemplate, for that to happen each tabitem would need to be "naked", like this:

<TabControl>
    <TabControl.ItemTemplate>
        <DataTemplate>
            <ScrollViewer VerticalScrollBarVisibility="Auto" Height="300" Content="{Binding}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <!-- The ItemTemplate is only applied if tabitems are not wrapped in TabItem tags -->
    <local:ConnectionSettings/>
    <local:QuestionEditor/>
</TabControl>

But if I do that, then I can't specify the header.

I would like for every TabItem to be wrapped in a ScrollViewer (as specified in the ItemTemplate), but at the same be able to specify the header.

Is there a way to apply the ItemTemplate to <TabItem Header="MyHeader"/> tags?

Upvotes: 0

Views: 77

Answers (1)

Fruchtzwerg
Fruchtzwerg

Reputation: 11399

ItemTemplate is the template to format the ItemsSource the headers on top of your tab control. ContentTemplate is the template to format the content of the tabs. To wrap your defined content to the scroll viewer, just make use of a new content control inside your template. Here is a minimal sample:

<TabControl>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ScrollViewer>
                <ContentControl Content="{TemplateBinding Property=ContentControl.Content}"/>
            </ScrollViewer>
        </DataTemplate>
    </TabControl.ContentTemplate>
    <TabItem>
        <Button Content="Button1"/>
    </TabItem>
    <TabItem>
        <Button Content="Button2"/>
    </TabItem>
</TabControl>

Upvotes: 2

Related Questions