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

Incorporating the Expander's ControlTemplate into my application's ResourceDictionary

3 Answers 238 Views

Expander

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

Don asked on 22 Oct 2013, 12:43 AM

One person in the forum is trying to remove the rotating arrow RadToggleButton from the expander and I'm trying to get it back in! LOL! :)

We want to make several customizations to the RadExpander's header. And that requires me to override the header in my own code. The problem I am having is that I can't get the original content of the toggle button to appear in my cut-and-paste copy of Telerik's template. Here is how the template is incorporated in to my code:

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

<Setter Property="Template" Value="{StaticResource MyExpanderTemplate}"/>

</Style>

And Here is the template itself as I have extracted it from Telerik's source:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"

xmlns:c="http://schemas.telerik.com/2008/xaml/compile"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="c"

>

<LinearGradientBrush x:Key="ControlOuterBorder_Normal" EndPoint="0.971000015735626,0.5" StartPoint="0.0399999991059303,0.5">

<GradientStop Color="#FF707070" Offset="0"/>

<GradientStop Color="#FFA3A3A3" Offset="0.5"/>

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

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlBackground_Normal" Color="#FF575859" />

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

<GradientStop Color="#FF2E2D2D" Offset="0"/>

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

<GradientStop Color="#FF424242" Offset="0.14"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlElement_Normal" Color="#FFC5C2C2" />

<ControlTemplate TargetType="telerik:RadToggleButton" x:Key="ToggleTemplate">

<ContentPresenter x:Name="Content" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />

</ControlTemplate>

<ControlTemplate TargetType="telerik:RadExpander" x:Key="MyExpanderTemplate">

<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

VerticalAlignment="{TemplateBinding VerticalAlignment}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">

<Storyboard>

<c:Switch>

<c:Case Condition="Windows8 or Windows8Touch or Office2013">

<DoubleAnimation Duration="0" Storyboard.TargetName="HeaderPanel"

Storyboard.TargetProperty="Opacity" To="0.5" />

</c:Case>

<c:Default>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle"

Storyboard.TargetProperty="Stroke" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<c:If Condition="!ExpressionDark">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerCircle"

Storyboard.TargetProperty="Stroke" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle"

Storyboard.TargetProperty="Fill" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"

Storyboard.TargetProperty="Fill" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".5" />

<DoubleAnimation Storyboard.TargetName="HeaderContent" Storyboard.TargetProperty="Opacity" To=".5" />

</c:Default>

</c:Switch>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="HeaderStateGroup">

<VisualState x:Name="NormalHeader" />

<VisualState x:Name="MouseOverHeader">

<Storyboard>

<c:If Condition="!Windows8Touch">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle"

Storyboard.TargetProperty="Fill" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<c:If Condition="!Windows8 and !ExpressionDark and !Office2013">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerCircle"

Storyboard.TargetProperty="Stroke" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

<c:If Condition="!Windows8">

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

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"

Storyboard.TargetProperty="Fill" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

</Storyboard>

</VisualState>

<VisualState x:Name="PressedHeader">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle"

Storyboard.TargetProperty="Fill" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<c:If Condition="Office2013">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle"

Storyboard.TargetProperty="Stroke" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"

Storyboard.TargetProperty="Fill" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

<c:If Condition="!Windows8 and !Office2013">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle"

Storyboard.TargetProperty="Stroke" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"

Storyboard.TargetProperty="Fill" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

<c:If Condition="!Windows8 and !Windows8Touch and !ExpressionDark and !Office2013">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerCircle"

Storyboard.TargetProperty="Stroke" Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="HeaderOrientationGroup">

<VisualState x:Name="HorizontalOrientation">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform"

Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="0" />

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>1</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalOrientation">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform"

Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="90" />

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>1</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStateGroup">

<VisualState x:Name="Expanded">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="arrow"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" To="180"

Duration="0:0:0.2" />

<c:If Condition="Windows8Touch">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" Storyboard.TargetName="arrow">

<SplineDoubleKeyFrame KeyTime="0" Value="-1"/>

</DoubleAnimationUsingKeyFrames>

</c:If>

<c:If Condition="Windows8">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"

Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Windows8Resource ResourceKey=AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

<c:If Condition="Office2013">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"

Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Office2013Resource ResourceKey=InvertedBrush}" />

</ObjectAnimationUsingKeyFrames>

</c:If>

</Storyboard>

</VisualState>

<VisualState x:Name="Collapsed">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="arrow" Duration="0:0:0.2"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" To="0" />

<c:If Condition="Windows8Touch">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" Storyboard.TargetName="arrow">

<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

</DoubleAnimationUsingKeyFrames>

</c:If>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandDirectionStates">

<VisualStateGroup.Transitions>

<VisualTransition>

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>0</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>0</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>0</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>0</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0"

Storyboard.TargetProperty="Width">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1"

Storyboard.TargetProperty="Width">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0"

Storyboard.TargetProperty="Height">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1"

Storyboard.TargetProperty="Height">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>Auto</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualTransition>

</VisualStateGroup.Transitions>

<VisualState x:Name="DirectionLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0"

Storyboard.TargetProperty="Width">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0"

Storyboard.TargetProperty="Height">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>1</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Storyboard.TargetName="arrowPanel"

Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="90"

Duration="0:0:0" />

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1"

Storyboard.TargetProperty="Width">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0"

Storyboard.TargetProperty="Height">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>1</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Storyboard.TargetName="arrowPanel"

Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="-90"

Duration="0:0:0" />

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionUp">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0"

Storyboard.TargetProperty="Width">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0"

Storyboard.TargetProperty="Height">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>1</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Storyboard.TargetName="arrowPanel"

Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="180"

Duration="0:0:0" />

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionDown">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0"

Storyboard.TargetProperty="Width">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1"

Storyboard.TargetProperty="Height">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<GridLength>*</GridLength>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Int32>1</sys:Int32>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding Background}" >

<c:If Condition="!Windows8 and !Windows8Touch and !Office2013">

<Border.CornerRadius>{StaticResource Expander_BorderRadius}</Border.CornerRadius>

</c:If>

<Grid>

<Grid.RowDefinitions>

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

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

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

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

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

</Grid.ColumnDefinitions>

<telerik:RadToggleButton x:Name="HeaderButton"

TabIndex="{TemplateBinding TabIndex}"

HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}"

VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}"

HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}"

VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}"

Template="{StaticResource ToggleTemplate}" Background="Transparent"

IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"

ClickMode="{TemplateBinding ClickMode}" FontSize="{TemplateBinding FontSize}"

FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}"

FontFamily="{TemplateBinding FontFamily}" FontStretch="{TemplateBinding FontStretch}"

Foreground="{TemplateBinding Foreground}">

<c:If Condition="WPF">

<telerik:RadToggleButton.FocusVisualStyle>

<Style>

<Setter Property="Control.Template">

<Setter.Value>

<ControlTemplate>

<Border>

<Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerik:RadToggleButton.FocusVisualStyle>

</c:If>

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

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Grid>

<c:If Condition="Windows8Touch">

<Grid.Width>36</Grid.Width>

<Grid.Height>36</Grid.Height>

</c:If>

<Ellipse HorizontalAlignment="Center" VerticalAlignment="Center"

Stroke="{StaticResource ControlOuterBorder_Normal}"

Fill="{StaticResource ControlBackground_Normal}">

<c:Switch>

<c:Case Condition="Windows8Touch">

<Ellipse.Width>30</Ellipse.Width>

<Ellipse.Height>30</Ellipse.Height>

<Ellipse.StrokeThickness>2</Ellipse.StrokeThickness>

</c:Case>

<c:Default>

<Ellipse.Width>20</Ellipse.Width>

<Ellipse.Height>20</Ellipse.Height>

<Ellipse.StrokeThickness>1</Ellipse.StrokeThickness>

</c:Default>

</c:Switch>

</Ellipse>

<Ellipse x:Name="OuterCircle" HorizontalAlignment="Center" VerticalAlignment="Center"

Stroke="{x:Null}" Fill="{x:Null}">

<c:Switch>

<c:Case Condition="Windows8Touch">

<Ellipse.Width>30</Ellipse.Width>

<Ellipse.Height>30</Ellipse.Height>

<Ellipse.StrokeThickness>2</Ellipse.StrokeThickness>

</c:Case>

<c:Default>

<Ellipse.Width>20</Ellipse.Width>

<Ellipse.Height>20</Ellipse.Height>

<Ellipse.StrokeThickness>1</Ellipse.StrokeThickness>

</c:Default>

</c:Switch>

</Ellipse>

<c:If Condition="!ExpressionDark and !Windows8 and !Windows8Touch and !Office2013">

<Ellipse x:Name="InnerCircle" Width="18" Height="18"

Stroke="{StaticResource ControlInnerBorder_Normal}" HorizontalAlignment="Center"

VerticalAlignment="Center" />

</c:If>

<Grid RenderTransformOrigin="0.5 0.5" x:Name="arrowPanel">

<Grid.RenderTransform>

<RotateTransform />

</Grid.RenderTransform>

<Path x:Name="arrow" Fill="{StaticResource ControlElement_Normal}"

Stretch="None" RenderTransformOrigin="0.5,0.5">

<c:Switch>

<c:Case Condition="Windows8">

<Path.Height>4</Path.Height>

<Path.Width>6</Path.Width>

<Path.Data>M0,0 L6,0 L2.86,3.94 L2.86,3.95 z</Path.Data>

</c:Case>

<c:Case Condition="Windows8Touch">

<Path.Height>8</Path.Height>

<Path.Width>10</Path.Width>

<Path.Data>M 0 0 L 5 8 L 10 0 Z</Path.Data>

</c:Case>

<c:Case Condition="Office2013">

<Path.Height>5</Path.Height>

<Path.Width>7</Path.Width>

<Path.Margin>0 1 0 0</Path.Margin>

<Path.Data>M0,0 L1,0 L3.5,3 L6,0 L7,0 L7,1 L3.5,5 L0,1 z</Path.Data>

</c:Case>

<c:Default>

<Path.Width>8</Path.Width>

<Path.Height>4</Path.Height>

<Path.Data>M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z</Path.Data>

</c:Default>

</c:Switch>

<Path.RenderTransform>

<TransformGroup>

<RotateTransform Angle="0" />

<TranslateTransform />

</TransformGroup>

</Path.RenderTransform>

</Path>

</Grid>

<telerikPrimitives:LayoutTransformControl RenderTransformOrigin=".5 .5"

x:Name="HeaderContentTransform">

<ContentPresenter x:Name="HeaderContent" Grid.Column="1" Margin="5 0"

VerticalAlignment="Center" HorizontalAlignment="Stretch" UseLayoutRounding="True"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</telerikPrimitives:LayoutTransformControl>

</Grid>

</telerik:RadToggleButton>

<ContentPresenter x:Name="Content" Margin="{TemplateBinding Padding}" Visibility="Collapsed" UseLayoutRounding="True"

Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

</ResourceDictionary>

All have at this point are little dots where the toggle button should be. Any hints as to how I can restore the contents of the original button would be appreciated. We are using the Expression Dark style BTW.

3 Answers, 1 is accepted

Accepted

answered on 24 Oct 2013, 05:41 PM

WpfApplication1.zip

Hello Don,

It seems that you've taken the ControlTemplate of the Expander from our source code. However, this Template contains markup that is only used internally within our source code as we have created a xaml preprocessor that used this markup to build different style settings for each theme.

Instead, if you need to extract the style of our controls I'd recommend going with an implicit styles approach as described in the ImplicitStyles tutorial.

For your inconvenience, I attached a sample solution demonstrating the ExpressionDark RadExpander ControlTemplate, Let me know if it helps.

Regards,
Tina Stancheva
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 24 Oct 2013, 06:52 PM

Tina,

Thank you for your timely response.

Yes, I did use Telerik's source code. Hence, the name I chose for the thread. I used it to find out the identifiers and other such things needed to customize the control. These identifiers are not directly accessible nor are they documented. If it wasn't for Telerik's source, most of the customizations my employers insist upon having in their GUI would not be possible outside of building my own controls. So, I thank Telerik for doing this; it makes your control library an order of magnitude more useful than it would be otherwise.

I wanted to break the control template out and use it as a guide for what I will be doing in my project. When I saw all the conditionals, I figured it would be easier to just ask you all what I needed to extract. Maybe I got a bit lazy. :)

I'll be making a new layout for the header in this case. I am well aware of implicit styles. I have used them before doing extensive modifications to the header's layout in the GridView control. And I will probably end up using them here.

Again, thank you for your response and the sample code. It was very helpful.