RadExpander Style is not working as expected

2 posts, 0 answers
  1. Nucleo
    Nucleo avatar
    13 posts
    Member since:
    Aug 2012

    Posted 27 May 2015 Link to this post

    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:System="clr-namespace:System;assembly=mscorlib"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <!-- RadPanelItem colors -->
            <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>
     
            <!-- RadPanelItem Subitems colors -->
            <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>
     
     
     
     
            <!-- RadButton Style -->
            <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>
     
     
     
     
     
            <!-- RadExpander 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>
                                                </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>
     
     
     
     
     
            <!-- RadPanelBarItem 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>
                            </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>
                            </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="Auto"/>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5">
                                                <Border BorderBrush="#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>
                                            <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>
                                            <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>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
     
            </Style>
     
     
     
     
     
            <!-- RadPanelBarItem2 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>
                                    <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="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="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>
                                    <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="#FFCDCDCD" 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="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="Auto"/>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5">
                                                <Border BorderBrush="#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>
                                            <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>
                                            <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>
                                    </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>

  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 29 May 2015 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top