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

[Solved] Expander doesn´t work anymore

4 Answers 155 Views

Expander

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

This question is locked. New answers and comments are not allowed.

Tarcisis asked on 06 Mar 2012, 01:53 PM

Hi there,

Recently i needed to update my version of Telerik.
I have a template for Expander and it always work with 2011.1.427.1040. But now, with 2012.1.215.1050, it doesn´t work anymore.
My resource:

<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:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

<telerik:Office_BlackTheme x:Key="Theme" />

<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

<LinearGradientBrush x:Key="FocusBrush" EndPoint="0,1">

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

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

</LinearGradientBrush>

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

<GradientStop Color="#BDBDBD" />

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

</LinearGradientBrush>

<SolidColorBrush x:Key="BorderOuterBrush" Color="#11FFFFFF"></SolidColorBrush>

<Color x:Key="HeaderElement_NormalColor1">#FFFFFFFF</Color>

<Color x:Key="HeaderElement_OverColor">#FFBBE7E8</Color>

<Color x:Key="HeaderElement_PressedColor">#FF9F9F9F</Color>

<SolidColorBrush x:Key="RectangleRootShadow1" Color="#04000000" />

<SolidColorBrush x:Key="RectangleRootShadow2" Color="#04000000" />

<SolidColorBrush x:Key="RectangleRootShadow3" Color="#06000000" />

<SolidColorBrush x:Key="RectangleRootShadow4" Color="#08000000" />

<SolidColorBrush x:Key="RectangleRootShadow5" Color="#0b000000" />

<SolidColorBrush x:Key="RectangleRootShadow6" Color="#0e000000" />

<LinearGradientBrush x:Key="HeaderBackgroundBrush" EndPoint="0,1">

<GradientStop Offset="0" Color="Gray" />

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

</LinearGradientBrush>

<SolidColorBrush x:Key="HeaderForegroundBrush" Color="#FFDCE2FF" />

<LinearGradientBrush x:Key="Header2BackgroundBrush" EndPoint="0,1">

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

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

</LinearGradientBrush>

<LinearGradientBrush x:Key="Content2BackgroundBrush" EndPoint="0,1">

<GradientStop Offset="0" Color="Black" />

<GradientStop Offset="0.3" Color="#FF8D8D8D" />

<GradientStop Offset="1" Color="Black" />

</LinearGradientBrush>

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

<Grid>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition GeneratedDuration="0:0:0.3" To="Normal" />

<vsm:VisualTransition GeneratedDuration="0:0:0.3" To="MouseOver" />

<vsm:VisualTransition GeneratedDuration="0:0:0.3" To="Pressed" />

</vsm:VisualStateGroup.Transitions>

<vsm:VisualState x:Name="Normal" />

<vsm:VisualState x:Name="MouseOver">

<Storyboard x:Name="MouseOver Checked State">

<ColorAnimation Storyboard.TargetName="arrowStroke" Duration="0"

Storyboard.TargetProperty="Color"

To="{StaticResource HeaderElement_OverColor}" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Pressed">

<Storyboard>

<ColorAnimation Storyboard.TargetName="arrowStroke" Duration="0"

Storyboard.TargetProperty="Color"

To="{StaticResource HeaderElement_PressedColor}" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Disabled" />

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="CheckStates">

<vsm:VisualState x:Name="Checked">

<Storyboard>

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

Storyboard.TargetProperty="Angle" To="180" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Unchecked" />

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="FocusStates">

<vsm:VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"

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

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"

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

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Border x:Name="HeaderBorder" Grid.Row="0" Grid.ColumnSpan="2"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="0,0,0,0"

BorderThickness="1" Padding="2,1,2,1" Margin="0"

Cursor="Hand">

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

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<ContentPresenter Margin="5,0" VerticalAlignment="Center"

x:Name="Content" Grid.Column="0"

Content="{TemplateBinding Content}" />

<Grid Width="20" Height="19" Grid.Column="1" >

<Path x:Name="arrow" HorizontalAlignment="Center"

VerticalAlignment="Center" StrokeThickness="2"

Data="M 0.5,1.0 L 4.5,5 L 8.5,1.0" Visibility=

"{Binding IsEnabled, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"

>

<Path.RenderTransform>

<RotateTransform x:Name="arrowRotation" Angle="0" CenterX="4.8"

CenterY="3.3" />

</Path.RenderTransform>

<Path.Stroke>

<SolidColorBrush x:Name="arrowStroke"

Color="{StaticResource HeaderElement_NormalColor1}" />

</Path.Stroke>

</Path>

</Grid>

</Border>

<Rectangle x:Name="FocusVisual" Stroke="{StaticResource FocusBrush}"

StrokeDashArray="1 2" StrokeThickness="0" Margin="2" RadiusX="2" RadiusY="2" />

</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">

<!--<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="HeaderButton" To="0.5"

Duration="0:0:0.3" />

</Storyboard>-->

</VisualState>

</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 ControlOuterBorder_MouseOver}"/>

</ObjectAnimationUsingKeyFrames>

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

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

</ObjectAnimationUsingKeyFrames>

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

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

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

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

</ObjectAnimationUsingKeyFrames>

</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 ControlOuterBorder_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

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

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

</ObjectAnimationUsingKeyFrames>

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

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

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

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

</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="Orientation" Storyboard.TargetName="HeaderPanel">

<DiscreteObjectKeyFrame KeyTime="0" Value="Horizontal"/>

</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="Orientation" Storyboard.TargetName="HeaderPanel">

<DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>-->

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStateGroup">

<VisualState x:Name="Expanded">

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="ContentElement" To="1"

Duration="0:0:0.3" />

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentElement">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Collapsed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentElement">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="ContentElement" To="0"

Duration="0:0:0.0" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandDirectionStates">

<!--<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="(Grid.Column)" Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>-->

<VisualState x:Name="DirectionDown">

<!--<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="Content">

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

</ObjectAnimationUsingKeyFrames>

</Storyboard>-->

</VisualState>

<VisualState x:Name="DirectionUp">

<!--<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderButton">

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

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:0" To="180" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

</Storyboard>-->

</VisualState>

<VisualState x:Name="DirectionLeft">

<!--<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderButton">

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

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:0" To="90" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

</Storyboard>-->

</VisualState>

<VisualState x:Name="DirectionRight">

<!--<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="Content">

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

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:0" To="-90" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

</Storyboard>-->

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border BorderBrush="{TemplateBinding BorderBrush}" Margin="0" BorderThickness="0" CornerRadius="0" Background="Transparent">

<Grid Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<telerik:RadToggleButton x:Name="HeaderButton" Grid.Row="0" ClickMode="Release"

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

Template="{StaticResource ToggleButoonTemplate}"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

Background="{StaticResource HeaderBackgroundBrush}"

Foreground="{StaticResource HeaderForegroundBrush}"

BorderBrush="{StaticResource Header2BackgroundBrush}" />

<!--<Grid x:Name="ContentElement" Grid.Row="1" Grid.ColumnSpan="2" Background="Transparent">

<Border Background="{StaticResource ContentBackgroundBrush}" BorderBrush="{StaticResource Content2BackgroundBrush}" BorderThickness="1">-->

<ContentPresenter x:Name="ContentElement" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

Cursor="{TemplateBinding Cursor}"

Margin="{TemplateBinding Padding}"/>

<!--</Border>

</Grid>-->

</Grid>

</Border>

</Grid>

</ControlTemplate>

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

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="IsExpanded" Value="false"/>

<Setter Property="ExpandDirection" Value="Down"/>

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="VerticalContentAlignment" Value="Stretch"/>

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="Padding" Value="0"/>

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

<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>

My MainPage.xaml:

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadExpander IsExpanded="True" telerik:AnimationManager.IsAnimationEnabled="False" x:Name="expander">

<telerik:RadExpander.Content>

<TextBlock x:Name="text" Text="Testing....."/>

</telerik:RadExpander.Content>

</telerik:RadExpander>

</Grid>

My MainPage.cs

var uri = new Uri("ExpanderTest;component/Resources.xaml", UriKind.Relative);

var streamResourceInfo = Application.GetResourceStream(uri);

string xaml = null;

using (var resourceStream = streamResourceInfo.Stream)

{

using (var streamReader = new StreamReader(resourceStream))

{

xaml = streamReader.ReadToEnd();

}

ResourceDictionary rd = XamlReader.Load(xaml) as ResourceDictionary;

expander.Style = (Style)rd["RadExpanderStyle"];

Do I have to define again all template?
There is a way to find the error without writing a new resource?

Thanks!!

4 Answers, 1 is accepted

answered on 09 Mar 2012, 01:13 PM

ExpandelSample.zip

Hi Tarcisis,

I think I am successfully using your custom Style. Please check out the attched SL 5 project, it uses 2012.1.215.1050 and correct me if I am missing something. Thank you in advance.

Greetings,
Petar Mladenov
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

answered on 09 Mar 2012, 01:47 PM

Untitled4.png

Hi Petar ,

Thanks for the reply.
I tried the sample you send but still not working!
I can´t see the content of RadExpander, so i don´t know if expander really works!
And Im sure im using 2012.1.215.1050 .
Do i need to change anything?

Best regards,

Tarcisis

Accepted

answered on 14 Mar 2012, 09:44 AM

342168-ExpandelSample.zip

Hi Tarcisis,

In 2011, we introduced some changes in the default Style/Template of the RadExpander. I used the new Style and applied your custom changes over it. You can see this in the attached project. I hope this resolves your issue.

Kind regards,
Petar Mladenov
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>