RadExpander Style is not working as expected

9 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
    745 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. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 02 Apr Link to this post

    hello  i want to change rad expander toggle button image or color....could you please give me a sollution ?
  4. Dinko
    Admin
    Dinko avatar
    937 posts

    Posted 05 Apr Link to this post

    Hi raneesras,

    The expander icon is represented by a Path element. To modify it you could set your own Path by creating an implicit style which Targets RadPanelBarItem and set the ExpanderStyle property. The ExpanderStyle expect a Style which targets Path.
    <Style  TargetType="{x:Type telerik:RadPanelBarItem}">
        <Setter Property="ExpanderStyle">
            <Setter.Value>
                <Style TargetType="{x:Type Path}">
                    <Setter Property="Stretch" Value="None"/>
                    <Setter Property="StrokeThickness" Value="2"/>
                    <Setter Property="Data" Value="M 1,1.5 L 4.5,5 L 8,1.5"/>
                    <!--<Setter Property="Stroke" Value="#FF000000" />-->
                    <Setter Property="Stroke" Value="Red" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

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

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 05 Apr in reply to Dinko Link to this post

    if u don't mind...would u show me some example with sample project ?
  6. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 05 Apr Link to this post

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

     

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


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

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

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

    <telerik:RadExpander  FlowDirection="RightToLeft" Margin="0,0,0,0"  Background="#FF395168">
     <telerik:RadExpander.Header>
     <BulletDecorator Height="28" Width="173">
    <BulletDecorator.Bullet>
     
    <Image Source="Images/dashboard-icon-18-128.png" Width="33" Height="28" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="114,0,-114,0" />
    </BulletDecorator.Bullet>
    <TextBlock Margin="10,4,58,4"    FontSize="15" Text="Dashborad" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
     
     </BulletDecorator>
    </telerik:RadExpander.Header>
    <WrapPanel Margin="0,0,20,0">
     <Button Margin="30,5,5,5" Foreground="white" Content="Nuevo Pedido" Width="113"/>
    <Button Margin="30,5,5,5" Foreground="white" Content="Consultar Pedidos" Width="113"/>
     <Button Margin="30,5,5,5" Foreground="white" Content="Pedidos Pendientes" Width="113"/>
    </WrapPanel>
    </telerik:RadExpander>
  7. Dinko
    Admin
    Dinko avatar
    937 posts

    Posted 10 Apr Link to this post

    Hi raneesras,

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

    Regarding your questions, the RadExpander control exposes a HeaderButtonStyle property which is targeting the RadToggleButton at the top. You could create a custom style which targets the RadToggleButton and set the Background property for example to Red.
    <telerik:RadExpander.HeaderButtonStyle>
        <Style TargetType="telerik:RadToggleButton">
            <Setter Property="Background" Value="Red"/>                   
        </Style>
    </telerik:RadExpander.HeaderButtonStyle>

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

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 10 Apr in reply to Dinko Link to this post

    It's Work...Thanks :)
  9. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 10 Apr in reply to Dinko Link to this post

    its worked well....thanks a lot
Back to Top