This project has moved and is read-only. For the latest updates, please go here.

Customise AvalonDock style

Jul 1, 2015 at 3: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 9: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
Jul 9, 2015 at 3: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 10: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.
Jul 15, 2015 at 1: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.