RadPanelBarItem arrow position

[Ram]

Hi,

Is there a way to move the arrow position on RadPanelBarItem to left (as shown in the attached image)?

I tried modifying the style using Microsoft Blend, the image moved but when I clicked to expand it didn't work.

Thanks

Extract of the style -

<Style.Triggers>
<Trigger Property="Level" Value="1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
<Grid x:Name="RootElement" SnapsToDevicePixels="True">
<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="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Arrow"/>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="Arrow">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF262626"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Header">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF262626"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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="SelectedVisual"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="Arrow">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF262626"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Header">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF262626"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle" Storyboard.TargetName="directionRotation"/>
<DoubleAnimation Duration="0:0:0.2" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Margin" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0,1,0,-1</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</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">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HeaderRow" UseLayoutRounding="True">
<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}" Background="{TemplateBinding Background}" Grid.ColumnSpan="5" Margin="-1,0,-1,-1"/>
<Border x:Name="MouseOverVisual" BorderThickness="1" Background="#FF878787" Grid.ColumnSpan="5" Margin="-1,0,-1,-1" Opacity="0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">
<GradientStop Color="#FFB0B0B0" Offset="0"/>
<GradientStop Color="#FFB0B0B0" Offset="1"/>
<GradientStop Color="#FFE0E1E2" Offset="0.5"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border x:Name="SelectedVisual" BorderThickness="1" Grid.ColumnSpan="5" Margin="-1,0,-1,-1" Opacity="0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.972,0.5" StartPoint="0.042,0.5">
<GradientStop Color="#FF595959" Offset="0"/>
<GradientStop Color="#FF595959" Offset="1"/>
<GradientStop Color="#FFA3A3A3" Offset="0.5"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF616060" Offset="0"/>
<GradientStop Color="#FFCDCDCD" Offset="1"/>
<GradientStop Color="#FFCDCDCD" Offset="0.14"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name="DisabledVisual" BorderBrush="#FF5D5C5C" BorderThickness="1" Background="#FF666666" Grid.ColumnSpan="5" Opacity="0">
<Border BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}"/>
</Border>
<Path x:Name="Arrow" Grid.Column="0" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right" Margin="7,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="None" Stroke="#FFC5C2C2" StrokeThickness="2" VerticalAlignment="Center">
<Path.RenderTransform>
<RotateTransform Angle="0"/>
</Path.RenderTransform>
</Path>
<ContentControl x:Name="Header" Grid.ColumnSpan="4" Grid.Column="1" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="#FF789FC3" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
<telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False">
<ItemsPresenter/>
</telerik:LayoutTransformControl>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>

[Ram]

Here is my complete style created from blend -

I get the error - 'directionRotation' name cannot be found in the name scope of 'System.Windows.Controls.Grid'.


<Application
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" x:Class="TelerikPanelBarProject.App"
StartupUri="MainWindow.xaml">
<Application.Resources>

<Style TargetType="{x:Type telerik:RadPanelBarItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
<Grid x:Name="RootElement" SnapsToDevicePixels="True">
<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" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" 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="SelectedVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:0.2" From="0" To="1" 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">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HeaderRow" Background="Transparent" Margin="5,0" MinHeight="{TemplateBinding MinHeight}">
<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<Border x:Name="SelectedVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFCE79F" Offset="1"/>
<GradientStop Color="#FFFDD3A8"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="1" Opacity="0">
<Border BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
<ItemsPresenter/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White"/>
<GradientStop Color="Gainsboro" Offset="0.43"/>
<GradientStop Color="#FFADADAD" Offset="0.44"/>
<GradientStop Color="#FFD4D4D4" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderBrush" Value="#FF848484"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="ChildItemsTemplate">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
<Grid x:Name="RootElement" SnapsToDevicePixels="True">
<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" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" 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="SelectedVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:0.2" From="0" To="1" 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">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HeaderRow" Background="Transparent" Margin="5,0" MinHeight="{TemplateBinding MinHeight}">
<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<Border x:Name="SelectedVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFCE79F" Offset="1"/>
<GradientStop Color="#FFFDD3A8"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="1" Opacity="0">
<Border BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
<ItemsPresenter/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:PanelBarPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Level" Value="1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
<Grid x:Name="RootElement" SnapsToDevicePixels="True">
<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="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="SelectedVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle" Storyboard.TargetName="directionRotation"/>
<DoubleAnimation Duration="0:0:0.2" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</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">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HeaderRow" UseLayoutRounding="True">
<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}" Background="{TemplateBinding Background}" Grid.ColumnSpan="5" Margin="-1,0,-1,-1">
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}"/>
</Border>
<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="5" Margin="-1,0,-1,-1" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFFD25A" Offset="0.43"/>
<GradientStop Color="#FFFEEBAE" Offset="0.42"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}"/>
</Border>
<Border x:Name="SelectedVisual" BorderThickness="1" Grid.ColumnSpan="5" Margin="-1,0,-1,-1" Opacity="0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF282828"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFD74E" Offset="0.996"/>
<GradientStop Color="#FFFFDCAB" Offset="0.17"/>
<GradientStop Color="#FFFFB062" Offset="0.57"/>
<GradientStop Color="#FFFFD18F" Offset="0.56"/>
<GradientStop Color="#FFFFBA74"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="1" Background="{x:Null}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Border>
<Path x:Name="Arrow" Grid.Column="0" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right" Margin="7,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="None" Stroke="Black" StrokeThickness="2" VerticalAlignment="Center">
<Path.RenderTransform>
<RotateTransform Angle="0"/>
</Path.RenderTransform>
</Path>
<ContentControl x:Name="Header" Grid.Column="1" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
<telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False">
<ItemsPresenter/>
</telerik:LayoutTransformControl>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>

</Application.Resources>
</Application>

[Sia]

Hello Ram,

It seems that when extracting the style through Blend the x:Name of the Arrow's RotateTransform is lost. You need to add it manually to the Path as follows:

<Path x:Name="Arrow" Grid.Column="0" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right" Margin="7,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="None" Stroke="Black" StrokeThickness="2" VerticalAlignment="Center">
    <Path.RenderTransform>
        <RotateTransform x:Name="directionRotation" Angle="0"/>
    </Path.RenderTransform>
</Path>

Please find attached to this thread a working demo with the same style with the mentioned above fix. You just need to reference the needed binaries there.

Regards,
Sia
Telerik

 

 

[Ram]

Thanks for identifying the missing x:Name attribute on Arrow's RotateTransform.

That fixes the arrow position but now when I apply themes it won't work.

Here is the xaml and attached is the screenshot showing missing "Expression_Dark" theme.

<telerik:RadPanelBar HorizontalAlignment="Stretch" Height="250" VerticalAlignment="Top" telerik:StyleManager.Theme="Expression_Dark">
<telerik:RadPanelBarItem Header="Item 1" telerik:StyleManager.Theme="Expression_Dark">
<Button Content="Button 1" />
</telerik:RadPanelBarItem>
<telerik:RadPanelBarItem Header="Item 2">
<Button Content="Button 2" />
</telerik:RadPanelBarItem>
</telerik:RadPanelBar>

[Martin Ivanov]

Hi Ram,

The reported behavior is expected. It is caused by the fact that when you set a Style (implicitly or explicitly) for a specific control (RadPanelBar in your case), this style overrides the property setters of the style set through the StyleManager. When you change the control's theme you should also replace the custom Style with the one that matches the applied theme.

For example, the Style for RadPanelBar provided by Sia is the one for the default Office_Black theme. If you apply another theme (like Expression_Black) you should set another style based on the default one from the theme if you want the control to look consistent to the theme.

Furthermore, you can consider using Implicit Styles instead of the old StyleManager. The new styling mechanism (Implicit Styles) is faster and it can be easily changed at run time.  You can read the pros and cons for both mechanisms in the Implicit Styles versus StyleManager blog post.

Regards,
Martin
Telerik

 

 

[Hilton]

Sure would be nice if Telerik would just add something to the properties to position the arrow to the left or right. My customers complain they don't see the expand arrow all the way off to the right. Makes sense that it be on the right since people read from the left to the right. It would be the first thing the see. Just my two cents.

[Martin Ivanov]

Hello Hilton,

Thank you for sharing your feedback about the control. I can agree that it would be useful to have such property. We will take this into account.

Regards,
Martin
Telerik by Progress