Change style of existing theme (AvalonDock)

Question

I want to change the Metro theme color of AvalonDock. I also asked a related question on Codeplex but I didn't got an answer so far.

I identified the following XAML (source file) as the piece that, I guess, is responsible for the color I want to change:

<Style TargetType="avalonDockControls:AnchorablePaneTitle">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
      ...
        <ControlTemplate.Triggers>
        ...
        <DataTrigger Binding="{Binding Model.IsActive, RelativeSource={RelativeSource Mode=Self}}" Value="True">

          <!-- following XAML line -->
          <Setter Property="BorderBrush" Value="{DynamicResource AvalonDock_ThemeMetro_BaseColor3}" />

          <Setter Property="BorderThickness" Value="0,3,0,0"/>
        </DataTrigger>
        ...
        </ControlTemplate.Triggers>

    ...

You can see: the brush gets the BaseColor3 (a bluish color by default).

Now I changed the color like that in my XAML:

<Window.Resources>
  ...
  <SolidColorBrush x:Key="AvalonDock_ThemeMetroBaseColor3" Color="Red" />
</Window.Resources>

Nothing changes. The color stay bluish. Now I am confused. So it must be the wrong property to change or something prevents the color to change or/and internal it uses the old value or something...

Why is it not working? How can I discover such problems and fix it?

Strong

Answer 1

I guess the problem was this:

<avalon:DockingManager>
  <avalon:DockingManager.Theme>
    <avalon:MetroTheme />
  </avalon:DockingManager.Theme>

  ...

</avalon:DockingManager>

I removed the theme setting and created an own Resource dictionary (copied the style from the AvalonDock source). I had to fix some errors:

• BaseColorXX not found -> copy from VS2010 theme of an older AvalonDock version
• TargetType 'HwndHostInstance' not match with type of element "LayoutAutoHideWindowControl -> comment out the Style with x:Key="{x:Type avalonDockControls:LayoutAutoHideWindowControl}")
• Remove BasedOn="{Static Resource {x:Type MenuItem}}" (caused an error)
• Change the image paths to my own project path with the copied images

After that it worked.

Strong

Did you copy theme.xaml ? I've look at it, and it uses several BaseColorXX that don't even exist in brushes.xaml, how come? – Oppidan

@Oppidan I tried to copy everything, Theme.xaml included. I had to add some BaseColorXX definitions to Brushes.xaml. I copied these from an older Brushes.xaml from the source. For example this was the first commit of Brushes.xaml and contained all needed definitions. – Strong

Thanks, but you did change their values, right? For example, BaseColor31 (from your link) is yellowish which doesn't fit the metro style. – Oppidan

Another issue is that theme.xaml uses BaseColor33 which doesn't even appear in the link. I mean, where are those definitions? I hate codeplex, github is much easier to find :) – Oppidan

@Oppidan Yes, I changed some values. After a while I completely changed the brushes (replaced with some better named brush variables). I identified the brushes by replacing the colors with magenta. I created 3 different themes. – Strong

If it's helpful: An older version I used (link) for very light metro style thingy with not so much replaced variables. – Strong

Answer 2

The solution seems to be adding the SolidColorBrush to the DockingManager resources in the xaml file.

        <avalonDock:DockingManager Grid.Row="1" x:Name="DockingManager">
        <avalonDock:DockingManager.Resources>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor1" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor3" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor4" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor5" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor8" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor9" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor10" Color="Red"/>
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor11" Color="Red" />
            <SolidColorBrush x:Key="AvalonDock_Expression_BaseColor13" Color="Red"/>
        </avalonDock:DockingManager.Resources>
        <avalonDock:DockingManager.Theme>
            <avalonDock:ExpressionDarkTheme/>
        </avalonDock:DockingManager.Theme>

Godgiven