Styling the PaneHeader in Blend

[Neil Labbé de Montais]

Hello,

The moment I try to edit the PaneHeader Style through Blend (Edit Style >create a copy), after putting the PaneHeader WPF component in a window.xaml, it returns "invalid xaml".. see screenshot.



I would like to make them blue, but have a hard time with the theming process.

would you have a custom colour theming of the Radpane working sample as described in the help documentation ?

Cheers

[Neil Labbé de Montais]

I'm putting the code of my sample that doesn't work..  it appears that the step by step Custom Theming could be faulty in documentation.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:CustomTheme="clr-namespace:CustomTheme;assembly=CustomTheme"

    x:Class="CustomTheme.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>


    </Window.Resources>



    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <CustomTheme:RadDockingTheme x:Key="MyThemeInstance" />
        </Grid.Resources>


    <!-- *****  RAD DOCKING TELERIK ***** -->

                <telerikDocking:RadDocking x:Name="radDocking" Margin="8" telerik:StyleManager.Theme="{StaticResource MyThemeInstance}" >

                        <telerikDocking:RadSplitContainer>
                            <telerikDocking:RadPaneGroup>
                                <telerikDocking:RadPane Header="Pane 1" />
                                <telerikDocking:RadPane Header="Pane 2" />
                                <telerikDocking:RadPane Header="Pane 3" />
                            </telerikDocking:RadPaneGroup>
                        </telerikDocking:RadSplitContainer>
                </telerikDocking:RadDocking>
                <telerik:PaneHeader HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource PaneHeaderStyle}"/>

<!-- ***** END RAD DOCKING ***** -->


    </Grid>
</Window>

and the RadDockingTheme .cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace CustomTheme
{
    public class RadDockingTheme : Theme
    {
    }
}

and the "Generic".xaml file :

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:telerikDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
     xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls.Docking;assembly=Telerik.Windows.Controls.Docking"
     xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
     xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
     xmlns:CustomTheme="clr-namespace:CustomTheme">


    <!-- Resource dictionary entries should be defined here. -->


        <Style x:Key="PaneHeaderStyle" TargetType="telerikDocking:PaneHeader">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikDocking:PaneHeader">
                        <Border x:Name="Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid x:Name="Content">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <telerikDocking:RadContextMenu.ContextMenu>
                                    <telerikDocking:RadContextMenu IsTabStop="False" ItemTemplate="{Binding SelectedPane.MenuItemTemplate, RelativeSource={RelativeSource TemplatedParent}}" ClickToOpen="True">
                                        <telerikDocking:RadContextMenu.ItemContainerStyle>
                                            <Style TargetType="{x:Type telerik:RadMenuItem}">
                                                <Setter Property="IsCheckable" Value="False"/>
                                                <Setter Property="IsChecked" Value="{Binding IsChecked}"/>
                                                <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
                                            </Style>
                                        </telerikDocking:RadContextMenu.ItemContainerStyle>
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                    </telerikDocking:RadContextMenu>
                                </telerikDocking:RadContextMenu.ContextMenu>
                                <ContentControl x:Name="TitleElement" Margin="{TemplateBinding Padding}" Content="{Binding SelectedPane.Title, RelativeSource={RelativeSource TemplatedParent}}" ContentTemplate="{Binding SelectedPane.TitleTemplate, RelativeSource={RelativeSource TemplatedParent}}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" Grid.Column="0"/>
                                <telerik:RadToggleButton x:Name="HeaderDropDownMenu" Grid.Column="1" IsChecked="{Binding IsOpen, ElementName=HeaderDropDownSubMenu, Mode=TwoWay}">
                                    <telerik:RadToggleButton.Style>
                                        <Style TargetType="{x:Type telerik:RadToggleButton}">
                                            <Setter Property="ContentTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <Path Fill="Black" Data="M0,0L7,0 3.5,3.5z">
                                                            <Path.Style>
                                                                <Style TargetType="{x:Type Path}">
                                                                    <Setter Property="HorizontalAlignment" Value="Center"/>
                                                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                                                    <Setter Property="Stretch" Value="None"/>
                                                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                                </Style>
                                                            </Path.Style>
                                                        </Path>
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                            <Style.BasedOn>
                                                <Style TargetType="{x:Type telerik:RadToggleButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                                                <Border x:Name="Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                                                    <ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                                                </Border>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFDDB73" Offset="1"/>
                                                                                    <GradientStop Color="#FFFEF4CA" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFFBC6B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsPressed" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFEB85D" Offset="1"/>
                                                                                    <GradientStop Color="#FFFB933C" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFA8C3B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsChecked" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFEB85D" Offset="1"/>
                                                                                    <GradientStop Color="#FFFB933C" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFA8C3B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsEnabled" Value="False">
                                                                        <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Style.BasedOn>
                                                        <Style TargetType="{x:Type Control}">
                                                            <Setter Property="Width" Value="17"/>
                                                            <Setter Property="Height" Value="17"/>
                                                            <Setter Property="Margin" Value="0"/>
                                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                                            <Setter Property="Background" Value="Transparent"/>
                                                        </Style>
                                                    </Style.BasedOn>
                                                </Style>
                                            </Style.BasedOn>
                                        </Style>
                                    </telerik:RadToggleButton.Style>
                                    <telerik:RadContextMenu.ContextMenu>
                                        <telerik:RadContextMenu x:Name="HeaderDropDownSubMenu" IsTabStop="False" ItemTemplate="{Binding SelectedPane.MenuItemTemplate, RelativeSource={RelativeSource TemplatedParent}}" ClickToOpen="True" Placement="Bottom">
                                            <telerik:RadContextMenu.ItemContainerStyle>
                                                <Style TargetType="{x:Type telerik:RadMenuItem}">
                                                    <Setter Property="IsCheckable" Value="False"/>
                                                    <Setter Property="IsChecked" Value="{Binding IsChecked}"/>
                                                    <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
                                                </Style>
                                            </telerik:RadContextMenu.ItemContainerStyle>
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:RadContextMenu>
                                    </telerik:RadContextMenu.ContextMenu>
                                </telerik:RadToggleButton>
                                <telerik:RadButton x:Name="HeaderPinButton" Visibility="{Binding SelectedPane.PinButtonVisibility, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" Command="telerik:RadDockingCommands.Pin">
                                    <telerik:RadButton.Style>
                                        <Style TargetType="{x:Type telerik:RadButton}">
                                            <Setter Property="ContentTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <Path Stroke="Black" StrokeThickness="1" Data="M0,6.5L7,6.5 M1.5,6.5L1.5,1.5 2.5,0.5 4.5,0.5 5.5,1.5 5.5,6.5 M3.5,6.5L3.5,10 M4.5,6.5L4.5,0.5">
                                                            <Path.Style>
                                                                <Style TargetType="{x:Type Path}">
                                                                    <Setter Property="HorizontalAlignment" Value="Center"/>
                                                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                                                    <Setter Property="Stretch" Value="None"/>
                                                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                                </Style>
                                                            </Path.Style>
                                                        </Path>
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                            <Style.BasedOn>
                                                <Style TargetType="{x:Type telerik:RadButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                <Border x:Name="Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                                                    <ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                                                </Border>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFDDB73" Offset="1"/>
                                                                                    <GradientStop Color="#FFFEF4CA" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFFBC6B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsPressed" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFEB85D" Offset="1"/>
                                                                                    <GradientStop Color="#FFFB933C" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFA8C3B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsEnabled" Value="False">
                                                                        <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Style.BasedOn>
                                                        <Style TargetType="{x:Type Control}">
                                                            <Setter Property="Width" Value="17"/>
                                                            <Setter Property="Height" Value="17"/>
                                                            <Setter Property="Margin" Value="0"/>
                                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                                            <Setter Property="Background" Value="Transparent"/>
                                                        </Style>
                                                    </Style.BasedOn>
                                                </Style>
                                            </Style.BasedOn>
                                        </Style>
                                    </telerik:RadButton.Style>
                                </telerik:RadButton>
                                <telerik:RadButton x:Name="HeaderCloseButton" Grid.Column="3" Command="telerik:RadDockingCommands.Close">
                                    <telerik:RadButton.Style>
                                        <Style TargetType="{x:Type telerik:RadButton}">
                                            <Setter Property="ContentTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <Path Stroke="Black" Data="M0,0L7,7 M7,0L0,7">
                                                            <Path.Style>
                                                                <Style TargetType="{x:Type Path}">
                                                                    <Setter Property="HorizontalAlignment" Value="Center"/>
                                                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                                                    <Setter Property="Stretch" Value="None"/>
                                                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                                </Style>
                                                            </Path.Style>
                                                        </Path>
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                            <Style.BasedOn>
                                                <Style TargetType="{x:Type telerik:RadButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                <Border x:Name="Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                                                    <ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                                                </Border>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFDDB73" Offset="1"/>
                                                                                    <GradientStop Color="#FFFEF4CA" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFFBC6B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsPressed" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFEB85D" Offset="1"/>
                                                                                    <GradientStop Color="#FFFB933C" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFA8C3B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsEnabled" Value="False">
                                                                        <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Style.BasedOn>
                                                        <Style TargetType="{x:Type Control}">
                                                            <Setter Property="Width" Value="17"/>
                                                            <Setter Property="Height" Value="17"/>
                                                            <Setter Property="Margin" Value="0"/>
                                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                                            <Setter Property="Background" Value="Transparent"/>
                                                        </Style>
                                                    </Style.BasedOn>
                                                </Style>
                                            </Style.BasedOn>
                                        </Style>
                                    </telerik:RadButton.Style>
                                </telerik:RadButton>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding SelectedPane.IsPinned, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
                                <Setter Property="Style" TargetName="HeaderPinButton">
                                    <Setter.Value>
                                        <Style TargetType="{x:Type telerik:RadButton}">
                                            <Setter Property="ContentTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <Path Stroke="Black" StrokeThickness="1" Data="M3.5,0L3.5,7 M3.5,1.5L8.5,1.5 9.5,2.5 9.5,4.5 8.5,5.5 3.5,5.5 M3.5,3.5L0,3.5 M3.5,4.5L9.5,4.5">
                                                            <Path.Style>
                                                                <Style TargetType="{x:Type Path}">
                                                                    <Setter Property="HorizontalAlignment" Value="Center"/>
                                                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                                                    <Setter Property="Stretch" Value="None"/>
                                                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                                </Style>
                                                            </Path.Style>
                                                        </Path>
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                            <Style.BasedOn>
                                                <Style TargetType="{x:Type telerik:RadButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                <Border x:Name="Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                                                    <ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                                                </Border>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFDDB73" Offset="1"/>
                                                                                    <GradientStop Color="#FFFEF4CA" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFFBC6B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsPressed" Value="True">
                                                                        <Setter Property="Background" TargetName="Root">
                                                                            <Setter.Value>
                                                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                    <GradientStop Color="#FFFEB85D" Offset="1"/>
                                                                                    <GradientStop Color="#FFFB933C" Offset="0"/>
                                                                                </LinearGradientBrush>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                        <Setter Property="BorderBrush" TargetName="Root" Value="#FFFA8C3B"/>
                                                                    </Trigger>
                                                                    <Trigger Property="IsEnabled" Value="False">
                                                                        <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Style.BasedOn>
                                                        <Style TargetType="{x:Type Control}">
                                                            <Setter Property="Width" Value="17"/>
                                                            <Setter Property="Height" Value="17"/>
                                                            <Setter Property="Margin" Value="0"/>
                                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                                            <Setter Property="Background" Value="Transparent"/>
                                                        </Style>
                                                    </Style.BasedOn>
                                                </Style>
                                            </Style.BasedOn>
                                        </Style>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedPane.MenuCommands.Count, RelativeSource={RelativeSource TemplatedParent}}" Value="0">
                                <Setter Property="Visibility" TargetName="HeaderDropDownMenu" Value="Collapsed"/>
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="0,0,0,1"/>
            <Setter Property="BorderBrush" Value="#FFA0A0A0"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF3F4F6" Offset="0"/>
                        <GradientStop Color="#FFCED3D9" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Padding" Value="3,0"/>
        </Style>


</ResourceDictionary>

Cheers for any answer..

[Konstantina]

Hi Neil,

Thank you for contacting us.

If you want to apply theme for the whole Docking control, the Generic.xaml file should include all styles for the Docking, not only the one for the PaneHeader. If you want only to change the colour of the header of the Pane you will need to apply the style in the Window resources, without x:Key name for the style. This will apply the style for all Pane headers. Also, the namespaces where mixed-up - The telerikDocking and telerikDock were the same. To make it work set one of them shoul reference to:

"clr-namespace:
Telerik.Windows.Controls.Docking;assembly=Telerik.Windows.Controls.Docking"

Attached you will find a sample running project, which applies blue colour to the pane's headers.

If you experience further difficulties please feel free to contact us again.


Sincerely yours,
Konstantina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Neil Labbé de Montais]

Thank-you for your reply Konstantina,

Though I haven't  found the attached sample file you mentioned on the page (maybe I'm not looking at the right place ?), I have tried with your correction, but I get a new error message : "Path cannot be null"   pointing on this line :

<CustomTheme:RadDockingTheme x:Key="MyThemeInstance" />

I would appreciate if you could tell me where to find the attached file..

Sincerely Yours

[Konstantina]

Hello Neil,

Sorry, there has been some misunderstanding. Please accept my apologies.
Please find the attached project.

If you have further questions please feel free to contact us again.

All the best,
Konstantina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Neil Labbé de Montais]

Hello Konstantina,

Thank-you for your reply and for the example sample.

I looked the file and saw that the style is indeed included in the resources of the window.
Unfortunatly I have to avoid that, and need to put everything that is 'style' externaly ..and therefore go through themes  if I have read correctly  the documentation...So I'm trying to "theme" the whole docking control (with a blue paneheader :) )

I will try to do that with the namespaces and targetype that appears different in your file.

 But if you have an example file of a themed raddocking under hand, i would be glad to have a look on it.. :)

Sincerly yours..
Neil

[Neil Labbé de Montais]

Hello  again Konstantina,

I have tried to theme the RadDocking Control with your namespace and it builds.. so that's a good evolution , but I don't see how to change the officeblack style with a custom style at this point :

<Dock:PaneHeader x:Name="HeaderElement" MinHeight="16" SelectedPane="{TemplateBinding SelectedPane}" Grid.Row="0">
                                                                            <telerik:StyleManager.Theme>
                                                                                <telerik:Office_BlackTheme/>
                                                                            </telerik:StyleManager.Theme>
                                                                        </Dock:PaneHeader>

I'm trying with

<Style x:Key="{telerik:ThemeResourceKey ThemeType={x:Type local:RadDockingTheme}, ElementType={x:Type telerikDocking:PaneHeader}}"
      TargetType="{x:Type telerikDocking:PaneHeader}">
   ...
</Style>

but no result.

Would you have an idea how to implement the custom style ?

 cheers ,

Neil

[Neil Labbé de Montais]

OK, It was a problem of versionning of the DLL.

Now it works fine..

Thanks for your help.

Cheers

Neil

[Konstantina]

Hi Neil,

I am glad that you have figured it out yourself.
However, just in case and for reference I am sending you a project with Docking control with custom theme.

If you have any difficulties please feel free to contact us again.

All the best,
Konstantina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Neil Labbé de Montais]

Hello Konstantina,

Thanks for posting your sample and your answer.

I have a question, it looks like the control inherits the Office Black theme, even with the custom theme created. Normaly shouldn't there be a line to connect MyTheme to the control, like this one ? (and one in the Generic file?)

<telerikDocking:RadDocking telerik:StyleManager.Theme="{StaticResource MyTheme}">

 Thanks very much for your support and help. It cleared a lot.

Little notice for others: for me, this worked using the 2009.3.1208.35 dll's  from the license we bought, but could not be mixed with the trial dll's..


Many cheers to the support team. You're very reactive. :)

[Konstantina]

Hi Neil,

Thank you for your question.

In the App.xaml file the Application resources are set like so:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/CustomTheme;component/Themes/Generic.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

This adds the ResourceDictionary (our Generic.xaml file) to the resources of the application and there is no need the theme to be declared explicitly.

If you have any other questions please feel free to ask again.

Kind regards,
Konstantina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.