wpfxamlavalondock

How to change the color of the tab item pane using AvalonDock


I am working on a dark theme for my application and all my controls use AvalonDock. For the most part I've been successful in getting all of the other controls updated to my Dark mode. Except these tabitems (see image below)

enter image description here

Every tab item in my application has this skinning problem. This is due to the fact that this control is found within AvalonDock:DockingManager so I can simply create a style of target type TabControl or TabItem; I've tried it but to no avail.

This is how I have my DockingManager set up:

<avalonDock:DockingManager x:Name="DockingManager"
                                   Foreground="Black"
                                   DocumentsSource="{Binding Panes}"
                                   AnchorablesSource="{Binding Tools}"
                                   ActiveContent="{Binding MyActiveContent, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                   LayoutItemTemplateSelector="{StaticResource AvalonDockPaneDataTemplateSelector}"
                                   AllowMixedOrientation="True"
                                   Grid.Row="1">

            <avalonDock:DockingManager.LayoutItemContainerStyleSelector>
                <view:PaneStyleSelector>
                    
                    <view:PaneStyleSelector.ToolStyle>
                        <Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
                            
                            <Setter Property="Title"
                                    Value="{Binding Model.Title}" />
                            <!--<Setter Property="IconSource" Value="{Binding Model.IconSource}"/>-->
                            <Setter Property="Visibility"
                                    Value="{Binding Model.IsVisible, ConverterParameter={x:Static Visibility.Hidden}, Converter={StaticResource BooleanToVisibilityConverter}, Mode=TwoWay}" />
                            <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                            <Setter Property="IsActive" Value="{Binding Model.IsActive, Mode=TwoWay}"/>
                        </Style>
                    </view:PaneStyleSelector.ToolStyle>
                    
                    <view:PaneStyleSelector.PaneStyle>
                        <Style TargetType="{x:Type avalonDock:LayoutItem}">
                            
                            <Setter Property="Title"
                                    Value="{Binding Model.Title}"/>
                            <Setter Property="CloseCommand"
                                    Value="{Binding CloseCommand}" />                           
                            <!--<Setter Property="IconSource" Value="{Binding Model.IconSource}"/>-->
                            <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                        </Style>
                    </view:PaneStyleSelector.PaneStyle>
                    
                </view:PaneStyleSelector>
            </avalonDock:DockingManager.LayoutItemContainerStyleSelector>
            <avalonDock:LayoutRoot>             
                <avalonDock:LayoutPanel Orientation="Horizontal">
                    <avalonDock:LayoutDocumentPane />
                    <avalonDock:LayoutAnchorablePane Name="MyPane"
                                                     DockWidth="350" />

                </avalonDock:LayoutPanel>
            </avalonDock:LayoutRoot>
        </avalonDock:DockingManager>

How can I access the color/brush/Fill/Background of these controls?


Solution

  • Edit the document header template. Try this, it works fine on my side. You can change the background property of the TextBlock.

    <avalonDock:DockingManager.DocumentHeaderTemplate>
      <DataTemplate>
        <Grid>
          <TextBlock Text="..." HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" FontSize="18" Background="Black" Foreground="White"/>
        </Grid>
      </DataTemplate>
    </avalonDock:DockingManager.DocumentHeaderTemplate>