Subitems focus and selection state in template

[Marcin Grabowski]

Hi.
I have one problem with PanelBar. I have made a template for Items and subitems, and on subitems level the mouseover and selected blue backround (metro theme) is not working.

I create template like that:

<ResourceDictionary   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"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                      xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d">

    <telerik:ContainerBindingCollection x:Key="ContainerPanelBarBindings">
        <telerik:ContainerBinding PropertyName="IsSelected"
            Binding="{Binding IsSelected, Mode=TwoWay}" />
    </telerik:ContainerBindingCollection>

    <FontFamily x:Key="FontLevel1">Arial</FontFamily>
    <sys:Double x:Key="FontLevel1Size">14</sys:Double>

    <DataTemplate x:Key="PanelBarItemTemplate" telerik:ContainerBinding.ContainerBindings="{StaticResource ContainerPanelBarBindings}">
        <StackPanel x:Name="stackPanel" Orientation="Horizontal" Height="27" >
            <!--<Image Width="16" Height="16" Source="{Binding ImageFile, Converter={StaticResource imageSourceConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" />-->
            <TextBlock x:Name="textBlock" Text="{Binding Title}" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center"
                FontFamily="{StaticResource FontLevel1}" FontSize="{StaticResource FontLevel1Size}"
                Foreground="Black"/>
        </StackPanel>
    </DataTemplate>

    <telerik:HierarchicalDataTemplate x:Key="PanelBarHeaderTemplate"
        telerik:ContainerBinding.ContainerBindings="{StaticResource ContainerPanelBarBindings}"
        ItemsSource="{Binding RelatedItems}"
        ItemTemplate="{StaticResource PanelBarItemTemplate}">
        <StackPanel x:Name="stackPanel" Orientation="Horizontal" Height="27">
            <!--<Image Width="16" Height="16" Source="{Binding ImageFile, Converter={StaticResource imageSourceConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" />-->
            <TextBlock Text="{Binding Title}" Margin="0" FontFamily="{StaticResource FontLevel1}" Foreground="Black"
                       FontSize="{StaticResource FontLevel1Size}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </StackPanel>
    </telerik:HierarchicalDataTemplate>

</ResourceDictionary>

A sample example code would be greatly appreciated.

Thx for any help.

[Kiril Stanoev]

Hi Marcin,

 Thank you for contacting us. I've investigated the issue and I can confirm that the MouseOver and Selected states are missing. I've logged this issue in our PITS under the name "PanelBar: Missing MouseOver and Selected states of second level items in Metro theme" and it will be available for tracking and voting tomorrow the latest. We will try to fix it with the upcoming Service Pack or one of the consecutive internal build. As a workaround, you can try and edit the ControlTemplate of the second level PanelBarItems and modify the states according to your liking. More on how to edit the ControlTemlate of a Telerik control can be found here.

All the best,
Kiril Stanoev
the Telerik team

[Marcin Grabowski]

Thank you for answer. I will try edit the ControlTemplate.

[Marcin Grabowski]

Hi again.

I have changed Style for PanelBar, and now focus and selection state works ok. Now i have problem with foreground font color. I want to set it to #FF3F3F3F for non selected state and to White for selected state. My modification of the style is not working for foreground color. Can you help?

<UserControl.Resources>
        <resources:ApplicationResources x:Key="ApplicationResources" />
        <telerik:MetroTheme x:Key="Theme2"/>
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
        <SolidColorBrush x:Key="NormalForegroundBrush" Color="#FF3F3F3F" />
        <SolidColorBrush x:Key="AccentBrush" telerik:MetroColors.Color="Accent" />
        <SolidColorBrush x:Key="BasicBrush" telerik:MetroColors.Color="Basic" />
        <SolidColorBrush x:Key="ControlItem_Background_Normal" Color="White"/>
        <SolidColorBrush x:Key="ControlItem_InnerBorder_Normal" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="ControlItem_OuterBorder_MouseOver" Color="#FFFDFDFD"/>
        <SolidColorBrush x:Key="ControlItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="ControlItem_OuterBorder_Selected" Color="White"/>
        <SolidColorBrush x:Key="ControlItem_InnerBorder_Selected" Color="White"/>
        <SolidColorBrush x:Key="ControlItem_Background_Selected" Color="{StaticResource MainBlueColor}"/>
        <SolidColorBrush x:Key="ControlItem_Background_MouseOver" Color="#E5D0C8C8"/>
        <SolidColorBrush x:Key="FocusBrushBlack" Color="#FF3F3F3F"/>
        <ControlTemplate x:Key="PanelBarItemTopLevelTemplate" TargetType="telerik:RadPanelBarItem">
            <Grid x:Name="RootElement">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" >
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0"  Value="{StaticResource NormalForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                    Storyboard.TargetProperty="Stroke" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NormalForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
                                <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="arrow"/>
                                <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOut"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectVisual"/>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header"
                                    Storyboard.TargetProperty="Foreground" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                    Storyboard.TargetProperty="Stroke" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle" Storyboard.TargetName="directionRotation"/>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header"
                                    Storyboard.TargetProperty="Foreground" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                    Storyboard.TargetProperty="Stroke" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header"
                                    Storyboard.TargetProperty="Foreground" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                    Storyboard.TargetProperty="Stroke" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid x:Name="HeaderRow">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5">
                        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Normal}" BorderThickness="0" Background="{TemplateBinding Background}"/>
                    </Border>
                    <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlItem_OuterBorder_MouseOver}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_MouseOver}" BorderThickness="0" Background="{StaticResource ControlItem_Background_MouseOver}"/>
                    </Border>
                    <Border x:Name="SelectVisual" BorderBrush="{StaticResource ControlItem_OuterBorder_Selected}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Selected}" BorderThickness="0" Background="{StaticResource ControlItem_Background_Selected}"/>
                    </Border>
                    <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="0" Background="{StaticResource ControlBackground_Disabled}"/>
                    </Border>
                    <Path x:Name="arrow" Grid.Column="5" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Right" Margin="7 0" Opacity="1" RenderTransformOrigin="0.5 0.5" Stretch="None" Stroke="{StaticResource ControlElement_Normal}" StrokeThickness="2" VerticalAlignment="Center">
                        <Path.RenderTransform>
                            <RotateTransform x:Name="directionRotation" Angle="0"/>
                        </Path.RenderTransform>
                    </Path>
                    <!--<ContentPresenter x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
                    <ContentControl Content="{TemplateBinding Header}" Grid.ColumnSpan="4"
                                x:Name="Header" Margin="{TemplateBinding Padding}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                ContentTemplate="{TemplateBinding HeaderTemplate}" />
                    <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" Visibility="Collapsed"/>
                </Grid>
                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                    <telerik:LayoutTransformControl x:Name="transformationRoot">
                        <ItemsPresenter/>
                    </telerik:LayoutTransformControl>
                </Grid>
            </Grid>
        </ControlTemplate>
        <Thickness x:Key="ControlSubItem_OuterBorderThickness">0</Thickness>
        <SolidColorBrush Color="#FFF9F9F9" x:Key="ControlSubItem_OuterBorder_MouseOver"/>
        <SolidColorBrush x:Key="ControlItem_OuterBorder_Normal" Color="White" Opacity="0.855"/>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
        <Thickness x:Key="ControlSubItem_InnerBorderThickness">0</Thickness>
        <SolidColorBrush x:Key="ControlSubItem_Background_MouseOver" Color="#E5D0C8C8"/>
        <CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>
        <CornerRadius x:Key="ControlSubItem_OuterCornerRadius">0</CornerRadius>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="White"/>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="ControlSubItem_Background_Selected" Color="{StaticResource MainBlueColor}"/>
        <ControlTemplate x:Key="PanelBarItemSecondLevelTemplate" TargetType="telerik:RadPanelBarItem">
            <Grid x:Name="RootElement">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOut">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionVisual"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid x:Name="HeaderRow" Background="Transparent">
                    <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <Border x:Name="SelectionVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlBackground_Disabled}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" Visibility="Collapsed"/>
                </Grid>
                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                    <ItemsPresenter/>
                </Grid>
            </Grid>
        </ControlTemplate>
        <Style x:Key="RadPanelBarItemStyleMenu" TargetType="telerik:RadPanelBarItem">
            <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{StaticResource NormalForegroundBrush}"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelTemplate}"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:PanelBarPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RadPanelBarStyleMenu" TargetType="telerik:RadPanelBar">
            <Setter Property="ExpandMode" Value="Single"/>
            <Setter Property="UseLayoutRounding" Value="True"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:PanelBarPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadPanelBar">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="OrientationStates">
                                    <VisualState x:Name="Vertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <RotateTransform Angle="0"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Horizontal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <RotateTransform Angle="-90"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewer" Storyboard.TargetProperty="Foreground" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"  Value="{StaticResource NormalForegroundBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                    </VisualState>
                                    <VisualState x:Name="MouseOut"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewer"
                                                    Storyboard.TargetProperty="Foreground" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <telerik:LayoutTransformControl x:Name="transformationRoot">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                    <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True"
                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto"
                                                  IsTabStop="False" Padding="{TemplateBinding Padding}" telerik:StyleManager.Theme="{StaticResource Theme2}"
                                                  VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  >
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Border>
                            </telerik:LayoutTransformControl>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Orientation" Value="Vertical"/>
            <Setter Property="IsTabStop" Value="true"/>
            <Setter Property="Foreground" Value="{StaticResource NormalForegroundBrush}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="ItemContainerStyle" Value="{StaticResource RadPanelBarItemStyleMenu}"/>
        </Style>
    </UserControl.Resources>

[Tina Stancheva]

Hi Marcin,

You need to slightly modify the PanelBarItemTopLevelTemplate:

• remove the Normal VIsualState Storyboard and instead set the default Header Foreground and Arrow Stroke in the ControlTemplate.  For example you can set the Header element Foreground to be TemplateBinded to the Foreground of the RadPanelBarItem.
• if you only need to change the Foreground color during a selection, you don't need to change the foreground properties during focused visual state
• leave only the selection state Foreground animations

I attached a sample project based on the style you sent. Give it a try and let me know if it helps.

Kind regards,
Tina Stancheva
the Telerik team

[Marcin Grabowski]

Hi.
Thx for example project. It almost what i need. Now i have some other task, so i will try on weekend to finish this.

[Tina Stancheva]

Hi Marcin,

I am glad that the project helps. Let us know if we can further assist you.

Regards,
Tina Stancheva
the Telerik team

[Marcin Grabowski]

Hi.
Thank you for your help. I made little modification and now all works great:

<telerik:MetroTheme x:Key="Theme2"/>
<SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
<SolidColorBrush x:Key="NormalForegroundBrush" Color="#FF3F3F3F" />
<SolidColorBrush x:Key="AccentBrush" telerik:MetroColors.Color="Accent" />
<SolidColorBrush x:Key="BasicBrush" telerik:MetroColors.Color="Basic" />
<SolidColorBrush x:Key="ControlItem_Background_Normal" Color="White"/>
<SolidColorBrush x:Key="ControlItem_InnerBorder_Normal" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="ControlItem_OuterBorder_MouseOver" Color="#FFFDFDFD"/>
<SolidColorBrush x:Key="ControlItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="ControlItem_OuterBorder_Selected" Color="White"/>
<SolidColorBrush x:Key="ControlItem_InnerBorder_Selected" Color="White"/>
<SolidColorBrush x:Key="ControlItem_Background_Selected" Color="{StaticResource MainBlueColor}"/>
<SolidColorBrush x:Key="ControlItem_Background_MouseOver" Color="#E5D0C8C8"/>
<SolidColorBrush x:Key="FocusBrushBlack" Color="#FF3F3F3F"/>
<ControlTemplate x:Key="PanelBarItemTopLevelTemplate" TargetType="telerik:RadPanelBarItem">
    <Grid x:Name="RootElement">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" >
                    <!--<Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0"  Value="{StaticResource NormalForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                            Storyboard.TargetProperty="Stroke" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NormalForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="arrow"/>
                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOut"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="Selected">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectVisual"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header"
                            Storyboard.TargetProperty="Foreground" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                            Storyboard.TargetProperty="Stroke" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ExpandStates">
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle" Storyboard.TargetName="directionRotation"/>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header"
                            Storyboard.TargetProperty="Foreground" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                            Storyboard.TargetProperty="Stroke" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>-->
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0"
                                                       Storyboard.TargetName="FocusVisual"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0"
                                                       Storyboard.TargetName="FocusVisual"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="HeaderRow">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5">
                <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Normal}" BorderThickness="0" Background="{TemplateBinding Background}"/>
            </Border>
            <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlItem_OuterBorder_MouseOver}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                <Border BorderBrush="{StaticResource ControlItem_InnerBorder_MouseOver}" BorderThickness="0" Background="{StaticResource ControlItem_Background_MouseOver}"/>
            </Border>
            <Border x:Name="SelectVisual" BorderBrush="{StaticResource ControlItem_OuterBorder_Selected}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Selected}" BorderThickness="0" Background="{StaticResource ControlItem_Background_Selected}"/>
            </Border>
            <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="0" Background="{StaticResource ControlBackground_Disabled}"/>
            </Border>
            <Path x:Name="arrow" Grid.Column="5" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Right" Margin="7 0" Opacity="1" RenderTransformOrigin="0.5 0.5" Stretch="None" Stroke="{StaticResource ControlElement_Normal}" StrokeThickness="2" VerticalAlignment="Center">
                <Path.RenderTransform>
                    <RotateTransform x:Name="directionRotation" Angle="0"/>
                </Path.RenderTransform>
            </Path>
            <!--<ContentPresenter x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
            <ContentControl Content="{TemplateBinding Header}" Grid.ColumnSpan="4"
                        x:Name="Header" Margin="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
            <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" Visibility="Collapsed"/>
        </Grid>
        <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
            <telerik:LayoutTransformControl x:Name="transformationRoot">
                <ItemsPresenter/>
            </telerik:LayoutTransformControl>
        </Grid>
    </Grid>
</ControlTemplate>
<Thickness x:Key="ControlSubItem_OuterBorderThickness">0</Thickness>
<SolidColorBrush Color="#FFF9F9F9" x:Key="ControlSubItem_OuterBorder_MouseOver"/>
<SolidColorBrush x:Key="ControlItem_OuterBorder_Normal" Color="White" Opacity="0.855"/>
<SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
<Thickness x:Key="ControlSubItem_InnerBorderThickness">0</Thickness>
<SolidColorBrush x:Key="ControlSubItem_Background_MouseOver" Color="#E5D0C8C8"/>
<CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>
<CornerRadius x:Key="ControlSubItem_OuterCornerRadius">0</CornerRadius>
<SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="White"/>
<SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="ControlSubItem_Background_Selected" Color="{StaticResource MainBlueColor}"/>
<ControlTemplate x:Key="PanelBarItemSecondLevelTemplate" TargetType="telerik:RadPanelBarItem">
    <Grid x:Name="RootElement">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOut">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="Selected">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionVisual"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header"
                            Storyboard.TargetProperty="Foreground" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ExpandStates">
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="HeaderRow" Background="Transparent">
            <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
            </Border>
            <Border x:Name="SelectionVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
            </Border>
            <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlBackground_Disabled}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
            </Border>
            <!--<ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
            <ContentControl Content="{TemplateBinding Header}" Grid.ColumnSpan="4"
                        x:Name="Header" Margin="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
            <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" Visibility="Collapsed"/>
        </Grid>
        <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
            <ItemsPresenter/>
        </Grid>
    </Grid>
</ControlTemplate>
<Style x:Key="RadPanelBarItemStyleMenu" TargetType="telerik:RadPanelBarItem">
    <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{StaticResource NormalForegroundBrush}"/>
    <Setter Property="TabNavigation" Value="Once"/>
    <Setter Property="IsTabStop" Value="True"/>
    <Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelTemplate}"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <telerik:PanelBarPanel/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="RadPanelBarStyleMenu" TargetType="telerik:RadPanelBar">
    <Setter Property="ExpandMode" Value="Single"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="TabNavigation" Value="Once"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <telerik:PanelBarPanel/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadPanelBar">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="OrientationStates">
                            <VisualState x:Name="Vertical">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <RotateTransform Angle="0"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Horizontal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <RotateTransform Angle="-90"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" >
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewer" Storyboard.TargetProperty="Foreground" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0"  Value="{StaticResource NormalForegroundBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                            </VisualState>
                            <VisualState x:Name="MouseOut"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewer"
                                            Storyboard.TargetProperty="Foreground" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SelectedForegroundBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <telerik:LayoutTransformControl x:Name="transformationRoot">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True"
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto"
                                          IsTabStop="False" Padding="{TemplateBinding Padding}" telerik:StyleManager.Theme="{StaticResource Theme2}"
                                          VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                          >
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </telerik:LayoutTransformControl>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Orientation" Value="Vertical"/>
    <Setter Property="IsTabStop" Value="true"/>
    <Setter Property="Foreground" Value="{StaticResource NormalForegroundBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="ItemContainerStyle" Value="{StaticResource RadPanelBarItemStyleMenu}"/>
</Style>