This is a migrated thread and some comments may be shown as answers.

RadExpander Style is not working as expected

8 Answers 446 Views

Expander

This is a migrated thread and some comments may be shown as answers.

Nucleo asked on 27 May 2015, 02:21 PM

vs---img1.png

blend---img1.png

vs---img2.png

blend---img2.png

vs---img3.png

blend---img3.png

Hello,

I was trying to stylize the RadExpander component, however the style is not working as expected. When the application is started, all the Expander subitems shows something painted in white (I don't know if it is the background or another property) and I have tried hard to find out what is wrong, but I just couldn't.

The weird thing is that when I copy the code and paste it in Blend, it works as expected! So, the style don't work in Visual Studio 2013, but works in Blend for Visual Studio 2013. How could it be?

I'm sending the code I'm using and the prints of how I expect it to look like and how it's looking like now.

Thank you so much,

Evelyn

Nucleo

Images:
VS = Visual Studio 2013
Blend = Blend for Visual Studio 2013.

<Window x:Class="WpfApplication1.MainWindow"

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:System="clr-namespace:System;assembly=mscorlib"

Title="MainWindow" Height="350" Width="525">

<Window.Resources>

<LinearGradientBrush x:Key="BackgroundButton" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEB0A32" Offset="0.31"/>

<GradientStop Color="#FFC3092A" Offset="1"/>

<GradientStop Color="#FFEB0A32" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButtonSelected" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFC83C50" Offset="0.31"/>

<GradientStop Color="#FF963637" Offset="1"/>

<GradientStop Color="#FFC83C50" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButtonMouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEB3C32" Offset="0.31"/>

<GradientStop Color="#FFC33C2A" Offset="1"/>

<GradientStop Color="#FFEB3C32" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButtonPressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFC83C50" Offset="0.31"/>

<GradientStop Color="#FF963637" Offset="1"/>

<GradientStop Color="#FFC83C50" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButton2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFC83C50" Offset="0.31"/>

<GradientStop Color="#FF963637" Offset="1"/>

<GradientStop Color="#FFC83C50" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButtonSelected2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFC95868" Offset="0.31"/>

<GradientStop Color="#FF955858" Offset="1"/>

<GradientStop Color="#FFC95868" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButtonMouseOver2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFF3E61" Offset="0.31"/>

<GradientStop Color="#FFD82C5B" Offset="1"/>

<GradientStop Color="#FFFF3E61" Offset="0.008"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BackgroundButtonPressed2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFC95364" Offset="0.31"/>

<GradientStop Color="#FF974F4F" Offset="1"/>

<GradientStop Color="#FFC95364" Offset="0.008"/>

</LinearGradientBrush>

<Style TargetType="telerik:RadButton">

<Setter Property="Margin" Value="10 10 10 10"/>

<Setter Property="CornerRadius" Value="5"/>

<Setter Property="Cursor" Value="Hand" />

<Setter Property="Height" Value="50" />

</Style>

<Style x:Key="RadExpanderStyle" TargetType="{x:Type telerik:RadExpander}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadExpander}">

<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="HeaderStateGroup">

<VisualState x:Name="NormalHeader"/>

<VisualState x:Name="MouseOverHeader">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="0.126"/>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="InnerCircle">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#FF989898"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEB3C32" Offset="0.31"/>

<GradientStop Color="#FFC33C2A" Offset="1"/>

<GradientStop Color="#FFEB3C32" Offset="0.008"/>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="White"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="PressedHeader">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="0.126"/>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="InnerCircle">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="1"/>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEB000A" Offset="0.31"/>

<GradientStop Color="#FFC3000A" Offset="1"/>

<GradientStop Color="#FFEB000A" Offset="0.008"/>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="White"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="HeaderOrientationGroup">

<VisualState x:Name="HorizontalOrientation">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="HeaderContentTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="0"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderContentTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>1</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalOrientation">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="HeaderContentTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderContentTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>1</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStateGroup">

<VisualState x:Name="Expanded">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" Storyboard.TargetName="arrow"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Collapsed">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" Storyboard.TargetName="arrow"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandDirectionStates">

<VisualStateGroup.Transitions>

<VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" To="{x:Null}">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="Content">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>0</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="Content">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>0</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>0</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>0</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="col0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="col1">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="row0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="row1">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualTransition>

</VisualStateGroup.Transitions>

<VisualState x:Name="DirectionLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="col0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="row0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>1</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0" To="90" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="col1">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="row0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="Content">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>1</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0" To="-90" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionUp">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="col0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="row0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>1</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionDown">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="col0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="row1">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="Content">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Int32>1</System:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition x:Name="col0" Width="Auto"/>

<ColumnDefinition x:Name="col1" Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition x:Name="row2" Height="26"/>

<RowDefinition x:Name="row0" Height="Auto"/>

<RowDefinition x:Name="row1" Height="Auto"/>

</Grid.RowDefinitions>

<telerik:RadToggleButton x:Name="HeaderButton" Background="Transparent" ClickMode="{TemplateBinding ClickMode}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FocusVisualStyle="{x:Null}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" InnerCornerRadius="0" TabIndex="{TemplateBinding TabIndex}" VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}" VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}">

<telerik:RadToggleButton.Template>

<ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</ControlTemplate>

</telerik:RadToggleButton.Template>

<Grid x:Name="HeaderPanel" Background="Transparent" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid>

<Rectangle x:Name="OuterCircle" Height="20" Stroke="#FF848484" VerticalAlignment="Center" Width="20" Fill="{StaticResource BackgroundButton}" />

<Rectangle x:Name="InnerCircle" HorizontalAlignment="Center" Height="18" Stroke="#FF989898" VerticalAlignment="Center" Width="18"/>

<Grid x:Name="arrowPanel" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" HorizontalAlignment="Center">

<Grid.RenderTransform>

<RotateTransform/>

</Grid.RenderTransform>

<Path x:Name="arrow" Data="M0,0L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75z" Stroke="White" StrokeThickness="2" Fill="White" Height="10" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="10" VerticalAlignment="Center" HorizontalAlignment="Center" >

<Path.RenderTransform>

<RotateTransform Angle="0"/>

</Path.RenderTransform>

</Path>

</Grid>

<telerik:LayoutTransformControl x:Name="HeaderContentTransform" IsTabStop="False" RenderTransformOrigin="0.5,0.5">

<ContentPresenter x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="Stretch" Margin="5,0" VerticalAlignment="Stretch"/>

</telerik:LayoutTransformControl>

</Grid>

</telerik:RadToggleButton>

<ContentPresenter Grid.Row="1" x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Background" Value="Transparent" />

<Setter Property="Cursor" Value="Help" />

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="FocusVisualStyle" Value="{x:Null}"/>

<Setter Property="BorderBrush" Value="Transparent"/>

<Setter Property="BorderThickness" Value="0"/>

</Style>

<Style x:Key="RadPanelBarItemStyle" TargetType="telerik:RadPanelBarItem" >

<Setter Property="Margin" Value="0 5 0 0" />

<Setter Property="Cursor" Value="Hand" />

<Setter Property="Background" Value="{StaticResource BackgroundButton}" />

<Setter Property="FontSize" Value="14" />

<Setter Property="FontWeight" Value="SemiBold" />

<Setter Property="Foreground" Value="White" />

<Setter Property="ChildItemsTemplate">

<Setter.Value>

<ControlTemplate TargetType="{x:Type 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" 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"/>

<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Cursor" Storyboard.TargetName="CursorMouseOver" />

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOut">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="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">

<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">

<Border x:Name="CursorMouseOver" Cursor="Hand" />

<Border x:Name="MouseOverVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButton}" />

<Border x:Name="SelectionVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButtonSelected}" />

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0">

<Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="0"/>

</Border>

<ContentControl x:Name="Header" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" 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>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type 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" 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">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="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">

<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">

<Border x:Name="MouseOverVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButtonMouseOver}" />

<Border x:Name="SelectionVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButtonSelected}" />

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0">

<Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="0"/>

</Border>

<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="#FF989898" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

</Grid>

<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">

<ItemsPresenter/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>

<Setter Property="SnapsToDevicePixels" Value="True"/>

<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" 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"/>

</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">

<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" Height="30" Width="Auto">

<Grid.ColumnDefinitions>

<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="#FF989898" BorderThickness="1" Background="{TemplateBinding Background}"/>

</Border>

<Border x:Name="MouseOverVisual" BorderBrush="#FFCDCCC9" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" Background="{StaticResource BackgroundButtonMouseOver}">

<Border BorderBrush="#FF989898" BorderThickness="1">

</Border>

<Border x:Name="SelectVisual" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" Background="{StaticResource BackgroundButtonSelected}">

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="1"/>

</LinearGradientBrush>

</Border.BorderBrush>

<Border BorderThickness="1">

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="0.126"/>

</LinearGradientBrush>

</Border.BorderBrush>

</Border>

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">

<Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0"/>

</Border>

<Path x:Name="arrow" Grid.Column="5" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right" Margin="7,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="None" Stroke="White" StrokeThickness="2" VerticalAlignment="Center">

<Path.RenderTransform>

<RotateTransform Angle="0"/>

</Path.RenderTransform>

</Path>

<ContentControl x:Name="Header" Grid.ColumnSpan="4" Margin="8 0 0 0" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Center"/>

<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>

</ControlTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>

<Style TargetType="telerik:RadPanelBarItem" >

<Setter Property="Cursor" Value="Hand" />

<Setter Property="Background" Value="{StaticResource BackgroundButton2}" />

<Setter Property="FontSize" Value="14" />

<Setter Property="FontWeight" Value="Normal" />

<Setter Property="Margin" Value="10 5 5 0" />

<Setter Property="Foreground" Value="White" />

<Setter Property="ChildItemsTemplate">

<Setter.Value>

<ControlTemplate TargetType="{x:Type 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" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0:0:0.0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOut">

<Storyboard>

<DoubleAnimation Duration="0:0:0.0" To="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">

<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">

<Border x:Name="MouseOverVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButton2}" />

<Border x:Name="SelectionVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButtonSelected2}" />

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0">

<Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="0"/>

</Border>

<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>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type 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" 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">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="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">

<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="{StaticResource BackgroundButton2}">

<Border x:Name="MouseOverVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButtonMouseOver2}" />

<Border x:Name="SelectionVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0" Background="{StaticResource BackgroundButtonSelected2}" />

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0">

<Border BorderBrush="#FFCDCDCD" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="0"/>

</Border>

<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="#FFCDCDCD" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

</Grid>

<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">

<ItemsPresenter/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>

<Setter Property="SnapsToDevicePixels" Value="True"/>

<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" 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"/>

</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">

<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" Height="30" Width="Auto">

<Grid.ColumnDefinitions>

<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="#FF989898" BorderThickness="1" Background="{TemplateBinding Background}"/>

</Border>

<Border x:Name="MouseOverVisual" BorderBrush="#FFAEAEAE" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" Background="{StaticResource BackgroundButtonMouseOver2}">

<Border BorderBrush="#FFAEAEAE" BorderThickness="1">

</Border>

<Border x:Name="SelectVisual" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" Background="{StaticResource BackgroundButtonSelected2}">

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="1"/>

</LinearGradientBrush>

</Border.BorderBrush>

<Border BorderThickness="1">

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD4D0C4"/>

<GradientStop Color="#FFB9B5AA" Offset="0.126"/>

</LinearGradientBrush>

</Border.BorderBrush>

</Border>

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">

<Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0"/>

</Border>

<Path.RenderTransform>

<RotateTransform Angle="0"/>

</Path.RenderTransform>

</Path>

<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>

</ControlTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid Background="LightGray">

<telerik:RadExpander ExpandDirection="Right" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadExpanderStyle}">

<telerik:RadPanelBar Margin="0 0 5 5">

<telerik:RadPanelBarItem Header="Vendas" Style="{StaticResource RadPanelBarItemStyle}">

<telerik:RadPanelBarItem Header="Cadastros" />

<telerik:RadPanelBarItem Header="Calculo de P" Tag="21"/>

<telerik:RadPanelBarItem Header="Calc Penden" Tag=""/>

<telerik:RadPanelBarItem Header="Relatorios"/>

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem Header="Producao" Style="{StaticResource RadPanelBarItemStyle}" >

<telerik:RadPanelBarItem Header="Cadastros" Tag="2" />

<telerik:RadPanelBarItem Header="Laudo" Tag="5" />

<telerik:RadPanelBarItem Header="Planejamento" Tag="4" />

<telerik:RadPanelBarItem Header="PCP" Tag="3"/>

<telerik:RadPanelBarItem Header="Relatorios"/>

</telerik:RadPanelBarItem>

</telerik:RadPanelBar>

</telerik:RadExpander>

</Grid>

</Window>

8 Answers, 1 is accepted

answered on 29 May 2015, 11:59 AM

Hello Nucleo,

The background that you see is the default background of telerik PanelBar. Just set it to be Transparent and its BorderThickness to be 0 and your problem will be fixed:

<telerik:RadPanelBar Margin="0 0 5 5" Background="Transparent" BorderThickness="0">

***

</telerik:RadPanelBar>

When such visual glitches appear, you can use tools such as WPF Inspector and Snoop which would be of great help to you.

I hope this helps.

Regards,
Sia
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 05 Apr 2019, 06:30 AM

Hi raneesras,

The expander icon is represented by a Path element. To modify it you could set your own Path by creating an implicit style which Targets RadPanelBarItem and set the ExpanderStyle property. The ExpanderStyle expect a Style which targets Path.

<Style TargetType="{x:Type telerik:RadPanelBarItem}">

<Setter Property="ExpanderStyle">

<Setter.Value>

<Style TargetType="{x:Type Path}">

<Setter Property="Stretch" Value="None"/>

<Setter Property="StrokeThickness" Value="2"/>

<Setter Property="Data" Value="M 1,1.5 L 4.5,5 L 8,1.5"/>

<Setter Property="Stroke" Value="Red" />

</Style>

</Setter.Value>

</Setter>

</Style>

In case you are using NoXAML scenario, you need to base the custom style to the default template of the RadPanelBarItem: BasedOn="{StaticResource RadPanelBarItemStyle}"

Regards,
Dinko
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 05 Apr 2019, 12:29 PM

this is my code....how to apply the given style within this >

<telerik:RadExpander FlowDirection="RightToLeft" Margin="0,0,0,0" Background="#FF395168">

<telerik:RadExpander.Header>
<BulletDecorator Height="28" Width="173">
<BulletDecorator.Bullet>

<Image Source="Images/dashboard-icon-18-128.png" Width="33" Height="28" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="114,0,-114,0" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,4,58,4" FontSize="15" Text="Dashborad" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />

</BulletDecorator>
</telerik:RadExpander.Header>
<WrapPanel Margin="0,0,20,0">
<Button Margin="30,5,5,5" Foreground="white" Content="Nuevo Pedido" Width="113"/>
<Button Margin="30,5,5,5" Foreground="white" Content="Consultar Pedidos" Width="113"/>
<Button Margin="30,5,5,5" Foreground="white" Content="Pedidos Pendientes" Width="113"/>
</WrapPanel>
</telerik:RadExpander>

<telerik:RadExpander FlowDirection="RightToLeft" Margin="0,0,0,0" Background="#FF395168">

<telerik:RadExpander.Header>

<BulletDecorator Height="28" Width="173">

<BulletDecorator.Bullet>

<Image Source="Images/dashboard-icon-18-128.png" Width="33" Height="28" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="114,0,-114,0" />

</BulletDecorator.Bullet>

<TextBlock Margin="10,4,58,4" FontSize="15" Text="Dashborad" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />

</BulletDecorator>

</telerik:RadExpander.Header>

<WrapPanel Margin="0,0,20,0">

<Button Margin="30,5,5,5" Foreground="white" Content="Nuevo Pedido" Width="113"/>

<Button Margin="30,5,5,5" Foreground="white" Content="Consultar Pedidos" Width="113"/>

<Button Margin="30,5,5,5" Foreground="white" Content="Pedidos Pendientes" Width="113"/>

</WrapPanel>

</telerik:RadExpander>

answered on 10 Apr 2019, 08:42 AM

Expander-Button.zip

Hi raneesras,

Thank you for sharing your XAML. Looking at the code snippet I have misled you. The suggested approach in my previous reply was for RadPanelBar control. I saw the reply from Sia and got confused that we are talking about the RadPanelBar control instead. Please, excuse for that.

Regarding your questions, the RadExpander control exposes a HeaderButtonStyle property which is targeting the RadToggleButton at the top. You could create a custom style which targets the RadToggleButton and set the Background property for example to Red.

<telerik:RadExpander.HeaderButtonStyle>

<Style TargetType="telerik:RadToggleButton">

<Setter Property="Background" Value="Red"/>

</Style>

</telerik:RadExpander.HeaderButtonStyle>

Keep in mind in this case, you will override the default template and the arrow at the right will disappear. If you want to change only the arrow color you will need to extract the default template and modify the Path element with x:Name arrow Fill property. I have prepared a sample project with the default template of the RadToggleButton for the RadExpander control. The style is located in the App.xaml file. The style is based on the default Office_Black theme.

Regards,
Dinko
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadExpander Style is not working as expected

8 Answers, 1 is accepted