RadPanelBarItem arrow position

5 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. UI for WPF is Visual Studio 2017 Ready
  4. Sia
    Admin
    Sia avatar
    667 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.

     
  5. 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>
  6. Martin
    Admin
    Martin avatar
    1101 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.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready