Custom RadExpander broken when upgraded to 2011 Q2 SP1

[Anders]

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:

<telerik:RadExpander x:Class="CustomExpander"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    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

[Anders]

Hi again, 

after a good nights sleep away from the problem at least now I've come up with a workaround, but I'm not very happy with this solution. The workaround was to modify the customexpander codebehind and explicitly call the visual states from code when Expanded/Collapsed event was triggered on the control. Modified code:

          public CustomExpander()
        {
            InitializeComponent();
            Loaded += CustomExpanderLoaded;
        }

        void CustomExpanderLoaded(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "Collapsed", false);
            Expanded += CustomExpanderExpanded;
            Collapsed += CustomExpanderCollapsed;
        }

        void CustomExpanderCollapsed(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "Collapsed", false);
        }

        void CustomExpanderExpanded(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "Expanded", false);
        }

I also have to initialize it in the Loaded event to Collapsed state since that's where it's at from the beginning. So, it's working but it should not have to be done like this, the Expanded and Collapsed visual states should have been called automatically as before. Is it a bug in the expander or have you change something in the structure so it's more restricted how you can modify the styles and templates?

[Tina Stancheva]

Hello Anders,

You need to slightly change the RadExpander ControlTemplate. The issue is basically caused by the Content part of the RadExpander  ControlTemplate. You need to keep the x:Name of the ContentPresenter and not move ti to the Border element. Instead you'll need to set an x:Name to the Border element and modify slightly the visual states of the control to collapse and display the border element.

I modified your style to implement these fixes. Let me know if it helps or if I can further assist you.

All the best,
Tina Stancheva
the Telerik team

[Anders]

Hi Tina, 

thanks for your response and help. I'll try this out as soon as possible and get back to you with the outcome. Unfortunately, today, I've been bogged down with other tasks and haven't yet had the time or chance to try your solution.

[Anders]

Hi again Tina, 

I've now tried the style you updated and it works perfectly, so big thanks to you!

Cheers, 
Anders