Styling RadPane Header

[Boots]

Hello,

I was wondering if you could help me out with styling the radpane header. I'm actually just looking to change the background color, contextmenu color, and the button colors. I've been playing with it a bit in blend but cant seem to get it working right. when i change the style of the paneheader it throws an error "Type reference cannot find public type named 'RadDockingCommands'"

any help on this would be great
thanks,
~Boots

[Miroslav Nedyalkov]

Hi Boots,

 This issue sounds really strange. Could you please send us a sample project that reproduces the issue? This will help us find out what the problem is.

Regards,
Miroslav Nedyalkov
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.

[Boots]

Hello Miroslav,

Thanks for getting back to me so quick. Here is a sample that produces the error. Basically what I did was edit the PaneHeader template in blend, removed the PaneHeader and added the RadDocking, RadSplitContainer, RadPaneGroup, and the RadPane tags. Then i wanted all the paneheaders to use that style so i removed the x:key from the style.

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="{x:Type telerik:PaneHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik: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>
                                <telerik:RadContextMenu.ContextMenu>
                                    <telerik:RadContextMenu IsTabStop="False" ItemTemplate="{Binding SelectedPane.MenuItemTemplate, RelativeSource={RelativeSource TemplatedParent}}" ClickToOpen="True">
                                        <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>
                                <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>
    </Window.Resources>
    <Grid>
        <telerik:RadDocking>
            <telerik:RadSplitContainer>
                <telerik:RadPaneGroup>
                    <telerik:RadPane />
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>
    </Grid>
</Window>

Thanks again,
~Boots

[Miroslav Nedyalkov]

Hello Boots,

 The problem comes from the type of the XML namespace. If you add an XML namespace xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking" and change the commands from telerik:RadDockingCommands.* to telerikDocking:RadDockingCommands.* everything is working fine.

Kind regards,
Miroslav Nedyalkov
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.