Hi,
Today I upgraded the Silverlight controls to the Q2 2011 SP1 release, we ran on Q1 2011 SP1 previously (from April). I've wasted the whole day trying to figure out why my custom radexpander control does not work anymore and thought I'd ask for help here. From what I can see in my testing is that the Expanded and Collapsed visual states are never executed so nothing happens when clicking the expander.
First a bit of a background to my control: We wanted a behaviour that when single clicking on the "header" part of the expander it would just get selected and not expanded. To expand/collapse you'd have to press the Expand button or double click the header. This have worked fine up until this upgrade of the telerik controls so I'm guessing something have changed in how the radexpander works or treats the control templates.
Now to the code,
CustomExpander.xaml:
CustomExpander.xaml.cs:
The expander is contained within an ItemTemplate for a ListBox which is databound to a list of business objects. The itemtemplate for the listbox looks like this:
Ignore the headertemplate and contenttemplate, they are not relevant for this and you could replace it with something temporary if you try this. The style that the expander uses, and here is where it becomes really interesting because I believe the problem is in the style which is quite heavily modified from the original one, is called RadExpanderStyle.
As you can see it is modified so that the togglebutton only takes up a little space to the left and the rest is just for presenting the header and the content. The visual states are also modified to accomodate the behavior of the control we wanted.
Everything, as I said before, worked perfectly before the upgrade. Now most of the functionality still works except that the visual states Expanded and Collapsed are never called. Debugging the customexpander I can see that on double click it will change the IsExpanded property accordingly and also examining the CustomExpander control in Silverlight Spy I see that it is indeed IsExpanded set to True, but visually nothing happens. Please if you can help us with this because I haven't been able to find what has changed after the upgraded and which is causing this misbehavior.
Thanks,
Anders
Today I upgraded the Silverlight controls to the Q2 2011 SP1 release, we ran on Q1 2011 SP1 previously (from April). I've wasted the whole day trying to figure out why my custom radexpander control does not work anymore and thought I'd ask for help here. From what I can see in my testing is that the Expanded and Collapsed visual states are never executed so nothing happens when clicking the expander.
First a bit of a background to my control: We wanted a behaviour that when single clicking on the "header" part of the expander it would just get selected and not expanded. To expand/collapse you'd have to press the Expand button or double click the header. This have worked fine up until this upgrade of the telerik controls so I'm guessing something have changed in how the radexpander works or treats the control templates.
Now to the code,
CustomExpander.xaml:
<
telerik:RadExpander
x:Class
=
"CustomExpander"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
</
Grid
>
</
telerik:RadExpander
>
CustomExpander.xaml.cs:
/// <summary>
/// Custom RadExpander control which allows for triggering Selection states defined in the style RadExpanderStyle by binding IsParentSelected
/// to the selected state of parent expander is contained within or to viewmodel property.
/// </summary>
public
partial
class
CustomExpander : RadExpander
{
public
CustomExpander()
{
InitializeComponent();
}
public
bool
? IsParentSelected
{
get
{
return
(
bool
?)GetValue(IsParentSelectedProperty); }
set
{ SetValue(IsParentSelectedProperty, value); }
}
public
static
readonly
DependencyProperty IsParentSelectedProperty = DependencyProperty.Register(
"IsParentSelected"
,
typeof
(
bool
?),
typeof
(CustomExpander),
new
PropertyMetadata(
null
, ParentChanged));
public
bool
? IsExpandOnDoubleClickEnabled
{
get
{
return
(
bool
?)GetValue(IsExpandOnDoubleClickEnabledProperty); }
set
{ SetValue(IsExpandOnDoubleClickEnabledProperty, value); }
}
public
static
readonly
DependencyProperty IsExpandOnDoubleClickEnabledProperty =
DependencyProperty.Register(
"IsExpandOnDoubleClickEnabled"
,
typeof
(
bool
?),
typeof
(CustomExpander),
null
);
private
static
void
ParentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if
((
bool
?)e.NewValue ==
true
)
{
VisualStateManager.GoToState(d
as
CustomExpander,
"Selected"
,
false
);
}
else
{
VisualStateManager.GoToState(d
as
CustomExpander,
"UnSelected"
,
false
);
}
}
public
void
Start()
{
_firstClickTime.Start(TimeSpan.FromMilliseconds(400));
}
public
void
Stop()
{
_firstClickTime.Stop();
}
private
readonly
ElapsedTime _firstClickTime =
new
ElapsedTime();
private
readonly
ElapsedTime _secondClickTime =
new
ElapsedTime();
protected
override
void
OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
if
(IsExpandOnDoubleClickEnabled.HasValue && IsExpandOnDoubleClickEnabled.Value)
{
if
(_firstClickTime.IsTimeSpanCompleted())
{
if
(_secondClickTime.IsTimeSpanCompleted())
{
_secondClickTime.Start(TimeSpan.FromMilliseconds(400));
}
else
{
//user wants to doubleclick.. abort
_secondClickTime.Stop();
ExpandOrCollapse();
}
}
else
{
Stop();
Start();
}
}
base
.OnMouseLeftButtonDown(e);
}
private
void
ExpandOrCollapse()
{
IsExpanded = !IsExpanded;
}
}
The expander is contained within an ItemTemplate for a ListBox which is databound to a list of business objects. The itemtemplate for the listbox looks like this:
<
DataTemplate
x:Key
=
"expanderListItemTemplate"
>
<
Grid
>
<
Controls:CustomExpander
x:Name
=
"radExpander"
Header
=
"{Binding}"
Content
=
"{Binding}"
IsParentSelected
=
"{Binding IsSelected, Mode=TwoWay}"
Margin
=
"0"
d:LayoutOverrides
=
"Width, Height"
ContentTemplate
=
"{StaticResource expanderContentTemplate}"
VerticalContentAlignment
=
"Stretch"
HorizontalContentAlignment
=
"Stretch"
Expanded
=
"ExpanderExpanded"
IsExpandOnDoubleClickEnabled
=
"True"
MouseLeftButtonDown
=
"RadExpanderMouseLeftButtonDown"
BorderBrush
=
"{StaticResource ExpanderContentBorderBrush}"
Background
=
"{StaticResource ExpanderContentBackgroundBrush}"
HeaderTemplate
=
"{StaticResource expanderHeaderTemplate}"
Style
=
"{StaticResource RadExpanderStyle}"
>
</
Controls:CustomExpander
>
</
Grid
>
</
DataTemplate
>
Ignore the headertemplate and contenttemplate, they are not relevant for this and you could replace it with something temporary if you try this. The style that the expander uses, and here is where it becomes really interesting because I believe the problem is in the style which is quite heavily modified from the original one, is called RadExpanderStyle.
<
ResourceDictionary
xmlns
=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
xmlns:mc
=
"http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable
=
"d"
>
<
SolidColorBrush
x:Key
=
"Expander_Background"
Color
=
"#FFB13131"
/>
<
SolidColorBrush
x:Key
=
"Expander_BorderBrush"
Color
=
"#FF999999"
/>
<
SolidColorBrush
x:Key
=
"Selected_BorderBrush"
Color
=
"#FFFFCC33"
/>
<
Thickness
x:Key
=
"Selected_BorderThickness"
>2</
Thickness
>
<
Thickness
x:Key
=
"Expander_BorderThickness"
>1</
Thickness
>
<
LinearGradientBrush
x:Key
=
"ControlBackground_Normal"
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFFFFFF"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFDCDCDC"
Offset
=
"0.50"
/>
<
GradientStop
Color
=
"#FFADADAD"
Offset
=
"0.50"
/>
<
GradientStop
Color
=
"#FFD4D4D4"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"Expander_BackgroundGradient"
EndPoint
=
"0.5,1.021"
StartPoint
=
"0.5,0.027"
>
<
GradientStop
Color
=
"#FFE2E3E3"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFE2E3E3"
Offset
=
"0.0061340299434959888"
/>
<
GradientStop
Color
=
"#FFC7C7C9"
Offset
=
"0.4539949893951416"
/>
<
GradientStop
Color
=
"#FFBCBFC0"
Offset
=
"0.46012899279594421"
/>
<
GradientStop
Color
=
"#FFBCBDBF"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"Expander_SelectedBackground"
EndPoint
=
"0.5,1.021"
StartPoint
=
"0.5,0.027"
>
<
GradientStop
Color
=
"#FFFFECB5"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFFFCE3B"
Offset
=
"0.521468997001648"
/>
<
GradientStop
Color
=
"#FFFFE8A2"
Offset
=
"0.98773199319839478"
/>
<
GradientStop
Color
=
"#FFFFE8A2"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"Expander_OpacityMask"
EndPoint
=
"0.5,1.021"
StartPoint
=
"0.5,0.027"
>
<
GradientStop
Color
=
"Black"
Offset
=
"0"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"0.0061340299434959888"
/>
<
GradientStop
Color
=
"sc#0.992156863, 0, 0, 0"
Offset
=
"0.4539949893951416"
/>
<
GradientStop
Color
=
"sc#0.996078432, 0, 0, 0"
Offset
=
"0.46012899279594421"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"ExpanderButtonBackground"
EndPoint
=
"0.799,0.922"
StartPoint
=
"0.221,0.106"
>
<
GradientStop
Color
=
"#FFE2E3E3"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFE2E3E3"
Offset
=
"0.0061340299434959888"
/>
<
GradientStop
Color
=
"#FFC7C7C9"
Offset
=
"0.4539949893951416"
/>
<
GradientStop
Color
=
"#FFBCBFC0"
Offset
=
"0.46012899279594421"
/>
<
GradientStop
Color
=
"#FFBCBDBF"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"ExpanderButtonOpacityMask"
EndPoint
=
"0.799,0.922"
StartPoint
=
"0.221,0.106"
>
<
GradientStop
Color
=
"Black"
Offset
=
"0"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"0.0061340299434959888"
/>
<
GradientStop
Color
=
"sc#0.992156863, 0, 0, 0"
Offset
=
"0.4539949893951416"
/>
<
GradientStop
Color
=
"sc#0.996078432, 0, 0, 0"
Offset
=
"0.46012899279594421"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
SolidColorBrush
x:Key
=
"ControlOuterBorder_Normal"
Color
=
"#FF999999"
/>
<
SolidColorBrush
x:Key
=
"ControlInnerBorder_Normal"
Color
=
"#FFFFFFFF"
/>
<
SolidColorBrush
x:Key
=
"ControlOuterBorder_Focused"
Color
=
"#FFFFC92B"
/>
<
ControlTemplate
x:Key
=
"ToggleTemplate"
TargetType
=
"telerik:RadToggleButton"
>
<
Grid
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"FocusStates"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
GeneratedDuration
=
"0:0:0.2"
To
=
"Focused"
/>
<
VisualTransition
GeneratedDuration
=
"0:0:0.2"
To
=
"Unfocused"
/>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"Unfocused"
/>
<
VisualState
x:Name
=
"Focused"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0:0:0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"FocusDecorator"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"Visible"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
ContentPresenter
x:Name
=
"Content"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Rectangle
x:Name
=
"FocusDecorator"
IsHitTestVisible
=
"false"
Stroke
=
"{StaticResource ControlOuterBorder_Focused}"
StrokeThickness
=
"1"
StrokeDashArray
=
"1 2"
Visibility
=
"Collapsed"
/>
</
Grid
>
</
ControlTemplate
>
<
CornerRadius
x:Key
=
"Expander_BorderRadius"
>3</
CornerRadius
>
<
SolidColorBrush
x:Key
=
"ControlOuterBorder_Disabled"
Color
=
"#FF989898"
/>
<
SolidColorBrush
x:Key
=
"ControlInnerBorder_Disabled"
Color
=
"Transparent"
/>
<
SolidColorBrush
x:Key
=
"ControlBackground_Disabled"
Color
=
"#FFE0E0E0"
/>
<
SolidColorBrush
x:Key
=
"ControlOuterBorder_MouseOver2"
Color
=
"#FFFFC92B"
/>
<
LinearGradientBrush
x:Key
=
"ControlBackground_MouseOver2"
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFFFBDA"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFFEEBAE"
Offset
=
"0.50"
/>
<
GradientStop
Color
=
"#FFFFD25A"
Offset
=
"0.50"
/>
<
GradientStop
Color
=
"#FFFFFBA3"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
SolidColorBrush
x:Key
=
"ControlElement_MouseOver"
Color
=
"#FF000000"
/>
<
LinearGradientBrush
x:Key
=
"ControlInnerBorder_Pressed2"
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFB69A78"
/>
<
GradientStop
Color
=
"#FFFFE17A"
Offset
=
"0.126"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"ControlBackground_Pressed2"
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFFDCAB"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFFFD18F"
Offset
=
"0.5"
/>
<
GradientStop
Color
=
"#FFFE9227"
Offset
=
"0.5"
/>
<
GradientStop
Color
=
"#FFFFBA74"
Offset
=
"0"
/>
</
LinearGradientBrush
>
<
SolidColorBrush
x:Key
=
"ControlElement_Pressed"
Color
=
"#FF000000"
/>
<
ControlTemplate
x:Key
=
"RadExpanderToggleButtonTemplate"
TargetType
=
"telerik:RadToggleButton"
>
<
Grid
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"FocusStates"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
GeneratedDuration
=
"0:0:0.2"
To
=
"Focused"
/>
<
VisualTransition
GeneratedDuration
=
"0:0:0.2"
To
=
"Unfocused"
/>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"Unfocused"
/>
<
VisualState
x:Name
=
"Focused"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"CheckStates"
>
<
VisualState
x:Name
=
"Checked"
/>
<
VisualState
x:Name
=
"Unchecked"
/>
<
VisualState
x:Name
=
"Indeterminate"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"MouseOver"
/>
<
VisualState
x:Name
=
"Pressed"
/>
<
VisualState
x:Name
=
"Disabled"
/>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
ContentPresenter
x:Name
=
"Content"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Rectangle
x:Name
=
"FocusDecorator"
IsHitTestVisible
=
"false"
Stroke
=
"{StaticResource ControlOuterBorder_Focused}"
StrokeThickness
=
"1"
StrokeDashArray
=
"1 2"
Visibility
=
"Collapsed"
/>
</
Grid
>
</
ControlTemplate
>
<
ControlTemplate
x:Key
=
"ExpanderTemplate"
TargetType
=
"telerik:RadExpander"
>
<
Grid
HorizontalAlignment
=
"{TemplateBinding HorizontalAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalAlignment}"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStateGroup"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Disabled"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"HeaderStateGroup"
>
<
VisualState
x:Name
=
"NormalHeader"
/>
<
VisualState
x:Name
=
"MouseOverHeader"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0:0:0"
Storyboard.TargetProperty
=
"Stroke"
Storyboard.TargetName
=
"OuterCircle"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"{StaticResource Selected_BorderBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Duration
=
"0"
To
=
"2"
Storyboard.TargetProperty
=
"(Shape.StrokeThickness)"
Storyboard.TargetName
=
"OuterCircle"
d:IsOptimized
=
"True"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"PressedHeader"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0:0:0"
Storyboard.TargetProperty
=
"Stroke"
Storyboard.TargetName
=
"OuterCircle"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"{StaticResource Selected_BorderBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Duration
=
"0"
To
=
"2"
Storyboard.TargetProperty
=
"(Shape.StrokeThickness)"
Storyboard.TargetName
=
"OuterCircle"
d:IsOptimized
=
"True"
/>
</
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"
Value
=
"1"
/>
</
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"
Value
=
"1"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"ExpandStateGroup"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(Grid.Row)"
Storyboard.TargetName
=
"Content"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"0"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(Grid.Column)"
Storyboard.TargetName
=
"Content"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"0"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(Grid.Row)"
Storyboard.TargetName
=
"HeaderButton"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"0"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Height"
Storyboard.TargetName
=
"row0"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"Auto"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Height"
Storyboard.TargetName
=
"row1"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"Auto"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualTransition
>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"Expanded"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"Content"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"Visible"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Height"
Storyboard.TargetName
=
"row1"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"*"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(Grid.Row)"
Storyboard.TargetName
=
"Content"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"1"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Duration
=
"0:0:0"
To
=
"0"
Storyboard.TargetProperty
=
"(FrameworkElement.RenderTransform).Angle"
Storyboard.TargetName
=
"arrowPanel"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Collapsed"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"Content"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"Collapsed"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Height"
Storyboard.TargetName
=
"row0"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"*"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Duration
=
"0:0:0"
To
=
"-90"
Storyboard.TargetProperty
=
"(FrameworkElement.RenderTransform).Angle"
Storyboard.TargetName
=
"arrowPanel"
/>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"SelectedGroup"
>
<
VisualState
x:Name
=
"Selected"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0:0:0"
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"InnerBorder"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"{StaticResource Expander_SelectedBackground}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"UnSelected"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0:0:0"
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"InnerBorder"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"{StaticResource Expander_BackgroundGradient}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"GroupExpandDirection"
>
<
VisualState
x:Name
=
"DirectionDown"
/>
<
VisualState
x:Name
=
"DirectionRight"
/>
<
VisualState
x:Name
=
"DirectionUp"
/>
<
VisualState
x:Name
=
"DirectionLeft"
/>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Border
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
x:Name
=
"row0"
Height
=
"Auto"
/>
<
RowDefinition
x:Name
=
"row1"
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Border
x:Name
=
"InnerBorder"
BorderBrush
=
"#FF999999"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{StaticResource Expander_BackgroundGradient}"
OpacityMask
=
"{StaticResource Expander_OpacityMask}"
CornerRadius
=
"{StaticResource Expander_BorderRadius}"
Margin
=
"8,0,0,0"
>
<
Grid
MaxHeight
=
"20"
Margin
=
"17,0,5,0"
>
<
telerik:LayoutTransformControl
x:Name
=
"HeaderContentTransform"
Grid.Row
=
"0"
RenderTransformOrigin
=
".5 .5"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Grid.Column
=
"0"
d:LayoutOverrides
=
"GridBox"
>
<
ContentPresenter
x:Name
=
"HeaderContent"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Content
=
"{TemplateBinding Header}"
Grid.Column
=
"1"
Margin
=
"0"
VerticalAlignment
=
"Stretch"
/>
</
telerik:LayoutTransformControl
>
</
Grid
>
</
Border
>
<
telerik:RadToggleButton
x:Name
=
"HeaderButton"
Background
=
"Transparent"
ClickMode
=
"{TemplateBinding ClickMode}"
FontWeight
=
"{TemplateBinding FontWeight}"
FontStyle
=
"{TemplateBinding FontStyle}"
FontStretch
=
"{TemplateBinding FontStretch}"
FontSize
=
"{TemplateBinding FontSize}"
FontFamily
=
"{TemplateBinding FontFamily}"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
IsChecked
=
"{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
TabIndex
=
"{TemplateBinding TabIndex}"
Template
=
"{StaticResource RadExpanderToggleButtonTemplate}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment
=
"{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment
=
"Left"
d:LayoutOverrides
=
"GridBox"
>
<
Grid
x:Name
=
"HeaderPanel"
Background
=
"Transparent"
Margin
=
"0"
>
<
Grid
Grid.Row
=
"0"
HorizontalAlignment
=
"Right"
>
<
Path
x:Name
=
"InnerCircle"
Data
=
"F1M705.262,769.726C705.262,775.523,709.979,780.24,715.775,780.24L715.775,780.24C721.572,780.24,726.289,775.523,726.289,769.726L726.289,769.726C726.289,763.929,721.572,759.212,715.775,759.212L715.775,759.212C709.979,759.212,705.262,763.929,705.262,769.726"
Stretch
=
"Fill"
Margin
=
"0"
UseLayoutRounding
=
"False"
Width
=
"21"
Height
=
"21"
>
<
Path.Fill
>
<
LinearGradientBrush
EndPoint
=
"0.859,0.883"
StartPoint
=
"0.176,0.154"
>
<
GradientStop
Color
=
"#FFE2E3E3"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFE2E3E3"
Offset
=
"0.0061340299434959888"
/>
<
GradientStop
Color
=
"#FFC7C7C9"
Offset
=
"0.4539949893951416"
/>
<
GradientStop
Color
=
"#FFBCBFC0"
Offset
=
"0.46012899279594421"
/>
<
GradientStop
Color
=
"#FFBCBDBF"
Offset
=
"1"
/>
</
LinearGradientBrush
>
</
Path.Fill
>
<
Path.OpacityMask
>
<
LinearGradientBrush
EndPoint
=
"0.859,0.883"
StartPoint
=
"0.176,0.154"
>
<
GradientStop
Color
=
"Black"
Offset
=
"0"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"0.0061340299434959888"
/>
<
GradientStop
Color
=
"sc#0.992156863, 0, 0, 0"
Offset
=
"0.4539949893951416"
/>
<
GradientStop
Color
=
"sc#0.996078432, 0, 0, 0"
Offset
=
"0.46012899279594421"
/>
<
GradientStop
Color
=
"Black"
Offset
=
"1"
/>
</
LinearGradientBrush
>
</
Path.OpacityMask
>
</
Path
>
<
Ellipse
x:Name
=
"OuterCircle"
StrokeThickness
=
"1"
Stroke
=
"#FF999999"
/>
<
Grid
x:Name
=
"arrowPanel"
RenderTransformOrigin
=
".5 .5"
>
<
Grid.RenderTransform
>
<
RotateTransform
/>
</
Grid.RenderTransform
>
<
Path
x:Name
=
"arrow"
Data
=
"F1M720.498,766.9941L715.775,773.8671L711.051,766.9941z"
Fill
=
"{StaticResource ATLAS_DARKGRAY}"
Height
=
"6.874"
Stretch
=
"Fill"
Margin
=
"0"
UseLayoutRounding
=
"False"
VerticalAlignment
=
"Center"
Width
=
"9.446"
HorizontalAlignment
=
"Center"
RenderTransformOrigin
=
"0.5,0.5"
>
<
Path.RenderTransform
>
<
CompositeTransform
Rotation
=
"0"
/>
</
Path.RenderTransform
>
</
Path
>
</
Grid
>
</
Grid
>
</
Grid
>
</
telerik:RadToggleButton
>
<
Border
x:Name
=
"Content"
BorderBrush
=
"{StaticResource Expander_BorderBrush}"
BorderThickness
=
"1,0,1,1"
Background
=
"{StaticResource LineStructureItemContentBackgroundBrush}"
Grid.ColumnSpan
=
"2"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
Margin
=
"10,0"
Visibility
=
"Collapsed"
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
/>
</
Border
>
</
Grid
>
</
Border
>
</
Grid
>
</
ControlTemplate
>
<
Style
x:Key
=
"RadExpanderStyle"
TargetType
=
"telerik:RadExpander"
>
<
Setter
Property
=
"IsTabStop"
Value
=
"false"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"Background"
Value
=
"{StaticResource Expander_Background}"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"{StaticResource Expander_BorderBrush}"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"{StaticResource Expander_BorderThickness}"
/>
<
Setter
Property
=
"Padding"
Value
=
"2"
/>
<
Setter
Property
=
"Template"
Value
=
"{StaticResource ExpanderTemplate}"
/>
<
Setter
Property
=
"telerik:AnimationManager.IsAnimationEnabled"
Value
=
"false"
/>
<
Setter
Property
=
"telerik:AnimationManager.AnimationSelector"
>
<
Setter.Value
>
<
telerik:AnimationSelector
>
<
telerik:ExpanderExpandCollapseAnimation
AnimationName
=
"Expand"
Direction
=
"In"
TargetElementName
=
"Content"
/>
<
telerik:ExpanderExpandCollapseAnimation
AnimationName
=
"Collapse"
Direction
=
"Out"
TargetElementName
=
"Content"
/>
</
telerik:AnimationSelector
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
ResourceDictionary
>
As you can see it is modified so that the togglebutton only takes up a little space to the left and the rest is just for presenting the header and the content. The visual states are also modified to accomodate the behavior of the control we wanted.
Everything, as I said before, worked perfectly before the upgrade. Now most of the functionality still works except that the visual states Expanded and Collapsed are never called. Debugging the customexpander I can see that on double click it will change the IsExpanded property accordingly and also examining the CustomExpander control in Silverlight Spy I see that it is indeed IsExpanded set to True, but visually nothing happens. Please if you can help us with this because I haven't been able to find what has changed after the upgraded and which is causing this misbehavior.
Thanks,
Anders