RadPanelBarItem arrow position

7 posts, 0 answers
  1. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 16 Dec 2014 Link to this post

    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>
  2. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 16 Dec 2014 Link to this post

    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>
  3. Sia
    Admin
    Sia avatar
    682 posts

    Posted 18 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 18 Dec 2014 Link to this post

    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>
  5. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1384 posts

    Posted 23 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Hilton
    Hilton avatar
    8 posts
    Member since:
    Aug 2012

    Posted 12 Mar Link to this post

    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.
  7. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1384 posts

    Posted 15 Mar Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top