Стиль TabControl выглядит иначе с Binding vs Direct Children

Question

При установке моего ItemsSource в TabControl стиль отличается от того, когда я использую фиксированный TabItems.Как я могу это исправить?

Я пытался поместить стиль в сам TabControl под TabControl.Resources, но он не работает.

Это мои стили, которые я использую, и TabControl.

<Style TargetType="{x:Type TabItem}" x:Key="TabItem">
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Foreground" Value="{StaticResource SelectedTabColor}"/>
        <Setter Property="FontSize" Value="13pt"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="Root">
                        <Border x:Name="Border" BorderThickness="0" Background="#FF404040" Margin="0,0,5,5">
                            <ContentPresenter x:Name="ContentSite"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                ContentSource="Header"
                                Margin="12,2,12,2"
                                RecognizesAccessKey="True"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedTabColor}"/>
                            <Setter Property="Foreground" Value="{StaticResource TabColor}"/>
                            <Setter TargetName="Border" Property="Margin" Value="0,0,0,5"/>
                            <Setter TargetName="Border" Property="Panel.ZIndex" Value="0"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="{StaticResource TabColor}" />
                            <Setter Property="Foreground" Value="{StaticResource SelectedTabColor}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="TabControl" x:Key="MainTabControl">
        <Setter Property="TabStripPlacement" Value="Left"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid x:Name="templateRoot" ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition0"/>
                            <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                            <RowDefinition x:Name="RowDefinition1" Height="*"/>
                        </Grid.RowDefinitions>
                        <DockPanel x:Name="HeaderPanel" 
                                   IsItemsHost="True" 
                                   Panel.ZIndex="0" 
                                   Margin="0,5,0,0" 
                                   Background="Transparent" 
                                   Grid.Column="0" 
                                   Grid.Row="0" 
                                   KeyboardNavigation.TabIndex="1" 
                                   HorizontalAlignment="Stretch" 
                                   VerticalAlignment="Stretch"
                                   Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"
                                   LastChildFill="False"
                                   />

                        <DockPanel x:Name="ContentPanel" 
                              Background="{StaticResource SelectedTabColor}" 
                              KeyboardNavigation.DirectionalNavigation="Contained" 
                              Grid.Row="0"
                              Grid.Column="1"
                              KeyboardNavigation.TabIndex="2" 
                              KeyboardNavigation.TabNavigation="Local" 
                              Panel.ZIndex="50" 
                              Margin="0,5,0,0"
                              Height="{Binding Height, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">

                            <ContentPresenter x:Name="PART_SelectedContentHost" 
                                              DockPanel.Dock="Top"
                                              ContentTemplate="{TemplateBinding SelectedContentTemplate}" 
                                              Content="{TemplateBinding SelectedContent}" 
                                              ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 
                                              ContentSource="SelectedContent" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              />
                        </DockPanel>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<!--Show correct-->
    <TabControl Grid.Row="1" 
                Grid.Column="0" 
                Grid.RowSpan="7" 
                Grid.ColumnSpan="5" 
                ItemsSource="{Binding Path=Tabs}" 
                Style="{DynamicResource MainTabControl}">
        <TabItem Header="Bla 1" Style="{StaticResource TabItem}" DockPanel.Dock="Top"/>
        <TabItem Header="Bla 1" Style="{StaticResource TabItem}" DockPanel.Dock="Top"/>
        <TabItem Header="Bla 1" Style="{StaticResource TabItem}" DockPanel.Dock="Top"/>
    </TabControl>

<!--Show incorrect-->
    <TabControl Grid.Row="1" 
                Grid.Column="0" 
                Grid.RowSpan="7" 
                Grid.ColumnSpan="5" 
                ItemsSource="{Binding Path=Tabs}" 
                Style="{DynamicResource MainTabControl}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TabItem Header="{Binding Path=Name}" DockPanel.Dock="Top" Style="{DynamicResource TabItem}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <usercontrols:SubMenuTabContent VM="{Binding Path=HTC}"/>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

Правильно: https://imgur.com/1bqy3aS

Неправильно: https://imgur.com/5g3vwez

Возможно, я упускаю что-то очевидное здесь.

Надеюсь, кто-нибудь может мне помочь.

Заранее спасибо!:)

Answer 1

Вам нужно установить DockPanel.Dock не внутри ItemTemplate, а внутри ItemContainerStyle.

<TabControl.ItemContainerStyle>
    <Style>
        <Setter Property="DockPanel.Dock" Value="Top"/>
    </Style>
</TabControl.ItemContainerStyle>
<TabControl.ItemTemplate>
    <DataTemplate>
        <TabItem Header="{Binding Path=Name}" Style="{DynamicResource TabItem}"/>
    </DataTemplate>
</TabControl.ItemTemplate>

Всякий раз, когда вам нужно установить свойство для элементов из ItemsControl который влияет на расположение этих элементов в ItemsControl, вам нужно манипулировать ItemContainerStyle.