wpfxamlvisual-studio-2013tabcontroldynamicresource

Tab background with DynamicResource not working in Visual Studio 2013 extension


I am developing a Visual Studio 2013 extension. Every control I use in a ToolWindowPane uses the same background than the current loaded Theme in Visual Studio, using this:

Background="{DynamicResource {x:Static vsfx:VsBrushes.ToolboxBackgroundKey}}"

I added tabs to one of the user control and I specified the background both in the TabControl, in the StackPanel inside the ItemTemplate and in a Style in TabControl.Resources, as follows:

<TabControl
    Background="{DynamicResource {x:Static vsfx:VsBrushes.ToolboxBackgroundKey}}"
    >

<TabControl.Resources>
    <Style TargetType="{x:Type TabPanel}">
        <Setter Property="Background" Value="{DynamicResource {x:Static vsfx:VsBrushes.ToolboxBackgroundKey}}" />
        </Style>
</TabControl.Resources>

<TabControl.ItemTemplate>
    <DataTemplate >
        <StackPanel Orientation="Horizontal"
                    Background="{DynamicResource {x:Static vsfx:VsBrushes.ToolboxBackgroundKey}}">

But the headers still look like this:

Tabs with a background color not fitting the whole header space

Is there a way to apply the Tab header style from Visual Studio to my TabControl, so it looks the same that the Visual Studio tabs?

Is there at least a way to remove this "white" background arround the styled part in the header?

Thanks

Edit:

Paulo pointed me in the correct direction: I had to redefine the template for the TabItem. I followed the answer from this post: How to make WPF TabItem Headers' Background transparent?. I removed the corner radius and the margin when selected, and also used the VsBrushes for the colors:

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border
                            Name="TabItemBorder"
                            Margin="0,0,-4,0"
                            Background="{DynamicResource {x:Static vsfx:VsBrushes.FileTabInactiveDocumentBorderBackgroundKey}}"
                            BorderThickness="1,1,1,1"
                            >
                            <ContentPresenter
                                x:Name="TabItemContentSite"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                ContentSource="Header"
                                Margin="5,2,5,2"
                                RecognizesAccessKey="True"
                                />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter TargetName="Border" Property="Background" Value="{DynamicResource {x:Static vsfx:VsBrushes.FileTabSelectedBackgroundKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
       </Setter>
   </Style>

And the result looks like this:

Tabs that look almost like the visual studio 2013 ones


Solution

  • I think that you gonna need to style the TabItem. If you use only the ItemTemplate, the system will replace just a small part of the default style.

    With a new style you gonna have more control of what you are showing.

    It looks like, the take control cannot have a valid VS theme.

    Paulo Aboim Pinto