Search code examples
c#wpfstylingavalondockhigh-contrast

Restyling AvalonDock for high contrast themes?


I'm using AvalonDock in a project. For the sake of this example, it is structured as follows:

<ad:DockingManager>
    <ad:DockablePane>
        <ad:DockableContent Title="Test1">
        </ad:DockableContent>
        <ad:DockableContent Title="Test2">
        </ad:DockableContent>
    </ad:DockablePane>
</ad:DockingManager>

Normal tabs

This is fine, but unfortunately the tabs don't look so good on high contrast themes as shown below.

High contrast tabs

Ideally I would like to restyle the tabs to use a system color for the background (e.g. Window color). Is this possible?

Thanks, Alan


Solution

  • go to codeplex and download avalon bits. There you should be able to quickly find their XAML files for styles. Take one as a baseline and start mocking with it.

    you should see something like this (I'll include only one style)

    <!--DockingManager-->
    <Style x:Key="{x:Type ad:DockingManager}" TargetType="{x:Type ad:DockingManager}">
        <Setter Property="Background" Value="{StaticResource DockManagerBackground}"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ad:DockingManager}">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <StackPanel Name="PART_LeftAnchorTabPanel" 
                                Grid.Column="0" Grid.Row="1" Orientation="Vertical">
                            <StackPanel.Resources>
                                <Style TargetType="{x:Type ad:DockablePaneAnchorTabGroup}">
                                    <Setter Property="LayoutTransform">
                                        <Setter.Value >
                                            <RotateTransform Angle="90"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Margin" Value="0,2,2,0"/>
                                </Style>
                                <Style TargetType="Border">
                                    <Setter Property="CornerRadius" Value="0,0,3,3"/>
                                </Style>
                            </StackPanel.Resources>
                        </StackPanel>
                        <StackPanel Name="PART_RightAnchorTabPanel" Grid.Column="2" Grid.Row="1"  Orientation="Vertical">
                            <StackPanel.Resources>
                                <Style TargetType="{x:Type ad:DockablePaneAnchorTabGroup}">
                                    <Setter Property="LayoutTransform">
                                        <Setter.Value >
                                            <RotateTransform Angle="90"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Margin" Value="2,2,0,0"/>
                                </Style>
                                <Style TargetType="Border">
                                    <Setter Property="CornerRadius" Value="3,3,0,0"/>
                                </Style>
                            </StackPanel.Resources>
                        </StackPanel>
                        <StackPanel Name="PART_TopAnchorTabPanel" Grid.Column="1" Grid.Row="0" Orientation="Horizontal"/>
                        <StackPanel Name="PART_BottomAnchorTabPanel" Grid.Column="1" Grid.Row="2" Orientation="Horizontal"/>
                        <Border 
                            x:Name="PART_InternalContainer"
                            Background="{StaticResource DockManagerBorderBackground}"
                            Grid.Column="1" Grid.Row="1"
                            Padding="2">
                            <ContentPresenter />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    note that right on top of the file there will be a bunch of brushes, start with them, then start digging dipper