This project has moved. For the latest updates, please go here.

Customise AvalonDock style

Jul 1, 2015 at 2:53 PM
I would like to be able to customise the style, e.g. colours, of the AvalonDock controls.

However I don't want to just edit the supplied style file, e.g. generic.xaml. My application allows the user to change the theme at runtime, so I supply two ResourceDictionary files which have different colour definitions for a number of controls.
It is in these ResourceDictionary files that I would like to override the default AvalonDock colours but I can't seem to get it to work.

I can see a change in colour if I add say
    <Setter Property="Background" Value="Red"/>
in generic.xaml i.e.
<!--DocumentPaneControlStyle-->
<Style x:Key="DocumentPaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutDocumentPaneControl}">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentPaneControl}">
....

but if I do something similar in my ResourceDictionary nothing happens.

Any help much appreciated.
Jul 8, 2015 at 8:33 AM
Can anyone help with this - I'm still struggling with customising AvalonDock styles.

Please let me know if the question is unclear or you need any more details.

Many thanks for any help
Developer
Jul 9, 2015 at 2:58 PM
Hi,

You can use the "Style" and "Template" properties on DockingManager.
Here's an example for styling "DocumentPaneControlStyle" :

MainWindow.xaml file :
<Window x:Class="WpfApplication94.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
        Title="MainWindow">
   <Window.Resources>
      <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="MyResource.xaml" />
         </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>   
   </Window.Resources>
    
   <Grid>
      <xcad:DockingManager  DocumentPaneControlStyle="{StaticResource MyDocumentPaneControlStyle}">
.......
</xcad:DockingManager>
MyResource.xaml file :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:shell="clr-namespace:Microsoft.Windows.Shell"
                    xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock">

   <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="/Xceed.Wpf.AvalonDock;component/Themes/generic.xaml" />
   </ResourceDictionary.MergedDictionaries>

   <!--DocumentPaneControlStyle based on default DocumentPaneControlStyle from generic.xaml-->
   <Style x:Key="MyDocumentPaneControlStyle"
          TargetType="{x:Type xcad:LayoutDocumentPaneControl}"
          BasedOn="{StaticResource DocumentPaneControlStyle}">
      <Setter Property="Background"
              Value="Red" />
   </Style>
</ResourceDictionary>
Jul 15, 2015 at 9:27 AM
Thanks for the help.

Using your example I managed to change the colours. However, they don't dynamically change at run time. I have two resource dictionaries:
In ExpressionLight.xaml I have:
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
  xmlns:avalonDock="http://schemas.xceed.com/wpf/xaml/avalondock">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Xceed.Wpf.AvalonDock;component/Themes/generic.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- AvalonDock styles -->
    <Style x:Key="MyDocumentPaneControlStyle"
           TargetType="{x:Type avalonDock:LayoutDocumentPaneControl}"
           BasedOn="{StaticResource DocumentPaneControlStyle}">
        <Setter Property="Background"
                Value="Blue"/>
    </Style>
In ExpressionDark.xaml I have
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
  xmlns:avalonDock="http://schemas.xceed.com/wpf/xaml/avalondock"
  
  xmlns:avalonDockControls="clr-namespace:Xceed.Wpf.AvalonDock.Controls;assembly=Xceed.Wpf.AvalonDock"
  xmlns:avalonDockConverters="clr-namespace:Xceed.Wpf.AvalonDock.Converters;assembly=Xceed.Wpf.AvalonDock"
  >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Xceed.Wpf.AvalonDock;component/Themes/generic.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- AvalonDock styles -->
    <Style x:Key="MyDocumentPaneControlStyle"
           TargetType="{x:Type avalonDock:LayoutDocumentPaneControl}"
           BasedOn="{StaticResource DocumentPaneControlStyle}">
        <Setter Property="Background"
                Value="Red"/>
    </Style>
Then in my main code I have:
    Private Sub UIResourceChange(ByVal InterfaceColour As Integer)
     
        Dim fileName As String
        Dim dic As ResourceDictionary = Nothing

        If InterfaceColour = 1 Then
            fileName = System.Windows.Forms.Application.StartupPath + "\Resources\ExpressionLight.xaml"
        Else
            fileName = System.Windows.Forms.Application.StartupPath + "\Resources\ExpressionDark.xaml"
        End If
        Application.Current.Resources.MergedDictionaries.Clear()

        Using fs As IO.FileStream = New IO.FileStream(fileName, IO.FileMode.Open)

            dic = CType(Markup.XamlReader.Load(fs), ResourceDictionary)

            Application.Current.Resources.MergedDictionaries.Add(dic)
        End Using

       
    End Sub
The colours will load correctly on start up but won't change during runtime as InterfaceColour changes. Any ideas what I am doing wrong?

Thanks for any help.
Developer
Jul 15, 2015 at 12:49 PM
Hi,

In XAML, you can remove :
<xcad:DockingManager  DocumentPaneControlStyle="{StaticResource MyDocumentPaneControlStyle}">
and set it in code-behind :
using( System.IO.FileStream fs = new System.IO.FileStream( fileName, System.IO.FileMode.Open ) )
      {
        dic = (ResourceDictionary)System.Windows.Markup.XamlReader.Load( fs );
        Application.Current.Resources.MergedDictionaries.Add( dic );
        _dockingManager.DocumentPaneControlStyle = Application.Current.Resources[ "MyDocumentPaneControlStyle" ] as Style;
      }
This willcause a refresh of the DocumentPaneControlStyle.