RadExpander Button Style

18 posts, 0 answers
  1. vinotha
    vinotha avatar
    6 posts
    Member since:
    Aug 2010

    Posted 28 Dec 2010 Link to this post

    Hi,
        How to change RadExpander default round  button style to plus button.Kindly reply me as soon as possible.
    Thanks
    Vniotha
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Dec 2010 Link to this post

    Hello vinotha,

    You can set the RadExpander DecoratorTemplate property which controls the expander button template. I prepared a sample project illustrating this approach. Have a look at it and let me know if it works for you.

    Greetings,
    Tina Stancheva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. DevCraft banner
  4. Jakkie Esschert van den
    Jakkie Esschert van den avatar
    61 posts
    Member since:
    Sep 2009

    Posted 25 Mar 2011 Link to this post

    I just tried this example with the 2011Q1 release, but it doesn't seem to work. Is there a different way to do this in the Q1 version?
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 25 Mar 2011 Link to this post

    Hi Jakkie Esschert van den,

    With the Q1 2011 release we introduced some changes in the RadExpander control in order to improve its performance. However, some of the changes affected the ControlTemplate of the RadExpander. I attached a sample project illustrating how to customize the expand button with the latest version of the controls.

    All the best,
    Tina Stancheva
    the Telerik team
  6. Michael Okon
    Michael Okon avatar
    3 posts
    Member since:
    Jul 2009

    Posted 30 Mar 2011 Link to this post

    Hi

    I think it would be great to use a company logo for this. Is there any way one can use an image instead of messing about with themes. I have downloaded the expander zips but none will run or show anything in design view.  Please, just a gif would do.

    mike
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Apr 2011 Link to this post

    Hello Jakkie Esschert van den,

    I am not sure I understand your issue. But if you need to define an Image in the RadExpander Header, you can use the following style for the control:
    <UserControl.Resources>
        <SolidColorBrush x:Key="Expander_Background" Color="#00FFFFFF" />
        <SolidColorBrush x:Key="Expander_BorderBrush" Color="#00FFFFFF" />
        <Thickness x:Key="Expander_BorderThickness">0</Thickness>
        <LinearGradientBrush x:Key="ControlBackground_Normal" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFFFFFFF" />
            <GradientStop Offset="0.50" Color="#FFDCDCDC" />
            <GradientStop Offset="0.50" Color="#FFADADAD" />
            <GradientStop Offset="1" Color="#FFD4D4D4" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlOuterBorder_Normal" Color="#FF848484" />
        <SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000" />
        <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.TargetName="FocusDecorator"
                                                                Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter x:Name="Content"
                                    Margin="{TemplateBinding Padding}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}" />
                <Rectangle x:Name="FocusDecorator"
                            IsHitTestVisible="false"
                            Stroke="{StaticResource ControlOuterBorder_Focused}"
                            StrokeDashArray="1 2"
                            StrokeThickness="1"
                            Visibility="Collapsed" />
            </Grid>
        </ControlTemplate>
        <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" />
        <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent" />
        <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" />
        <SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" />
        <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B" />
        <SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF" />
        <LinearGradientBrush x:Key="ControlBackground_MouseOver" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFFFFBDA" />
            <GradientStop Offset="0.50" Color="#FFFEEBAE" />
            <GradientStop Offset="0.50" Color="#FFFFD25A" />
            <GradientStop Offset="1" Color="#FFFFFBA3" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF000000" />
        <LinearGradientBrush x:Key="ControlOuterBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#FF282828" />
            <GradientStop Offset="1" Color="#FF5F5F5F" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlInnerBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#FFB69A78" />
            <GradientStop Offset="0.126" Color="#FFFFE17A" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlBackground_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFFFDCAB" />
            <GradientStop Offset="0.5" Color="#FFFFD18F" />
            <GradientStop Offset="0.5" Color="#FFFE9227" />
            <GradientStop Offset="0" Color="#FFFFBA74" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_Pressed" Color="#FF000000" />
        <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.TargetName="arrow"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To=".5" />
                                <DoubleAnimation Storyboard.TargetName="Content"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To=".5" />
                                <DoubleAnimation Storyboard.TargetName="HeaderContent"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To=".5" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="HeaderStateGroup">
                        <VisualState x:Name="NormalHeader" />
                        <VisualState x:Name="MouseOverHeader" />
                        <VisualState x:Name="PressedHeader"/>
                    </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" Value="1" />
                                </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" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandStateGroup">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0.2"
                                                    Storyboard.TargetName="arrow"
                                                    Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
                                                    To="180" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0.2"
                                                    Storyboard.TargetName="arrow"
                                                    Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
                                                    To="0" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandDirectionStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.RowSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualTransition>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="DirectionDown">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0"
                                                    Storyboard.TargetName="arrowPanel"
                                                    Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
                                                    To="90" />
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DirectionUp">
                            <Storyboard>
     
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1"
                                                                Storyboard.TargetProperty="Height">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                            Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row2"
                                                                Storyboard.TargetProperty="Height">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                            Value="Auto" />
                                </ObjectAnimationUsingKeyFrames>
     
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0"
                                                    Storyboard.TargetName="arrowPanel"
                                                    Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
                                                    To="-90" />
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DirectionLeft">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="column1"
                                                                Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                            Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="column2"
                                                                Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                            Value="Auto" />
                                </ObjectAnimationUsingKeyFrames>
     
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.RowSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0"
                                                    Storyboard.TargetName="arrowPanel"
                                                    Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
                                                    To="180" />
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DirectionRight">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.RowSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:0"
                                                    Storyboard.TargetName="arrowPanel"
                                                    Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
                                                    To="0" />
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid x:Name="expanderContainer">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="column1" Width="Auto" />
                            <ColumnDefinition x:Name="column2" Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"
                                            x:Name="row1" />
                            <RowDefinition Height="*"
                                            x:Name="row2"/>
                        </Grid.RowDefinitions>
                        <telerik:RadToggleButton x:Name="HeaderButton"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Background="Transparent"
                                                    ClickMode="{TemplateBinding ClickMode}"
                                                    FontFamily="{TemplateBinding FontFamily}"
                                                    FontSize="{TemplateBinding FontSize}"
                                                    FontStretch="{TemplateBinding FontStretch}"
                                                    FontStyle="{TemplateBinding FontStyle}"
                                                    FontWeight="{TemplateBinding FontWeight}"
                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                    Template="{StaticResource ToggleTemplate}"
                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="HeaderPanel">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid Grid.Row="0" Grid.Column="0">
                                    <Grid x:Name="arrowPanel" RenderTransformOrigin=".5 .5">
                                        <Grid.RenderTransform>
                                            <RotateTransform />
                                        </Grid.RenderTransform>
                                        <Image x:Name="arrow"
                                                Width="16"
                                                Height="16"
                                                RenderTransformOrigin="0.5,0.5"
                                                Stretch="None"
                                                Source="Expander.png">
                                            <Image.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </Image.RenderTransform>
                                        </Image>
                                    </Grid>
                                </Grid>
                                <telerik:LayoutTransformControl x:Name="HeaderContentTransform"
                                                                Grid.Row="0"
                                                                Grid.Column="0"
                                                                RenderTransformOrigin=".5 .5">
                                    <ContentPresenter x:Name="HeaderContent"
                                                        Grid.Column="1"
                                                        Margin="5 0"
                                                        HorizontalAlignment="Stretch"
                                                        VerticalAlignment="Center"
                                                        Content="{TemplateBinding Header}"
                                                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                </telerik:LayoutTransformControl>
                            </Grid>
                        </telerik:RadToggleButton>
                        <ContentPresenter x:Name="Content"
                                            Margin="{TemplateBinding Padding}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </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.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>
    </UserControl.Resources>

    And if you have the following definition of a RadExpander:
    <telerik:RadExpander Header="Expander"
                  HorizontalContentAlignment="Stretch"
                  Style="{StaticResource RadExpanderStyle}"
                  VerticalContentAlignment="Stretch">
        <telerik:RadTreeView>
            <telerik:RadTreeViewItem Header="Item 1" />
            <telerik:RadTreeViewItem Header="Item 2" />
            <telerik:RadTreeViewItem Header="Item 3" />
            <telerik:RadTreeViewItem Header="Item 4" />
            <telerik:RadTreeViewItem Header="Item 5" />
        </telerik:RadTreeView>
    </telerik:RadExpander>

    And the Expander.png image is:  , the layout of the control will look like so:
    When Collapsed:

    When Expanded:


    Is this close to what you have in mind?

    Regards,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Jason
    Jason avatar
    9 posts
    Member since:
    Apr 2011

    Posted 30 Aug 2011 Link to this post

    Along the same lines of this - we have a client that would like to switch the button, and the Header text around.  Where the Header Text would display first, then the button.  We have the RadExpander configured to expand down.

    We are all over this control template, but the ability to switch this around is alluding us.

    For extra bonus points, we also require a property to ensure the Header text would be left or right aligned, as well as take up a MinWidth - which would be properties that we could set in the same way as the Header.  I know these would require dependency properties (attached dependency properties?), but although we are experienced with VS, Blend is kicking our butts!

    Do you have examples where RadControls are inherited, and additional properties added to handle format? Is this possible?

    Help?

  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 01 Sep 2011 Link to this post

    Hello Jason,

    You need a Style change and I think using two Styles would be the correct approach in this situation. If you use attached property , it would have to control what style is applied but why not just using the Style property of the RadExpander. Is this suitable for you?

    Best wishes,
    Petar Mladenov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  10. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 01 Sep 2011 Link to this post

    Hi Jason,

     Please excuse me for misleading you. Actually, from Q2 2011, we introduced the HorizontalHeaderAlignment property that fits nice in your scenario if you set it to Right

    Kind regards,
    Petar Mladenov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  11. Denis Vuyka
    Denis Vuyka avatar
    39 posts
    Member since:
    Oct 2009

    Posted 07 Sep 2011 Link to this post

    I took your example that uses "DecoratorTemplate" property and updated "Telerik.Windows.Controls" reference to "2011.1.419.1040". It just does not work at all. Regardless performance improvements you've mentioned this is still a breaking change as declared API is not working. For now we are struggling to make the previous "DecoratorTemplate" approach work as it worked before and extracting styles in Blend does not seem a good option to make our code work. 
    Will the "DecoratorTemplate" property start working properly in the next updates of the suite?
  12. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 12 Sep 2011 Link to this post

    Hello Denis Vuyka,

     The DecoratorTemplate property is no more used in the RadExpander since Official Q1 2011 Release. The new Expander's Template uses only the HeaderTemplate property and you can think of the DecoratorTemplate as it is obsolete. If your custom template is very important for you and you cannot apply it to the new Expander's Template, you can send us your code and we will try to upgrade it. You can open a new support ticket so that you will be able to attach files. Thank you for your cooperation in advance.
     

    Kind regards,
    Petar Mladenov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  13. Denis Vuyka
    Denis Vuyka avatar
    39 posts
    Member since:
    Oct 2009

    Posted 12 Sep 2011 Link to this post

    I've managed to extract the entire style using Expression Blend and changed it directly to reflect the expected look and behavior. Now everything works and looks as expected.Thanks a lot.
  14. Msk
    Msk avatar
    2 posts
    Member since:
    Aug 2012

    Posted 24 Aug 2012 Link to this post

    Hi i am  using Rad Expander Control in my WPF application.i want my company logo in place of toggle button .i did it in XAML but i want to implement it in VB.net in code behind.my XAML code is like below


  15. Msk
    Msk avatar
    2 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2012 Link to this post

    Hello Tina Stancheva 
     i used DecoratorTemplate in XAML like below. But I am  creating RadExpander Control in code Behind.so How can i Use Decorator Template in VB.NET(Code Behind)

    <Window x:Class="Window4"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window4" Height="310" Width="555" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" Name="Window1">
        <Grid Name="mainGrid">
            <Grid.Resources>
                <ControlTemplate TargetType="telerik:RadExpanderDecorator" x:Key="decoratorsample">
                    <Rectangle Width="25"  Height="25"  Stroke="Black"  StrokeThickness="0">
                        <Rectangle.Fill>
                            <ImageBrush ImageSource="Down-Arrow-Icon.jpg"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </ControlTemplate>
            </Grid.Resources>
                <telerik:RadExpander DecoratorTemplate="{StaticResource decoratorsample}"   Header=" Regen" Name="RadExpander1" FontFamily=" Arial" FontSize="20" Cursor="Hand" IsExpanded="False" Margin="0,0,222,0" Height="100" VerticalAlignment="Top">
                <StackPanel Orientation="Horizontal" >
                    <Ellipse Width="33" 
                     Height="33"
                     Margin="5"
                     Fill="Yellow" />
                    <Ellipse Width="33" 
                     Height="33"
                     Margin="5"
                     Fill="Blue" />
                    <Ellipse Width="33" 
                     Height="33"
                     Margin="5"
                     Fill="Red" />
                </StackPanel>
           </telerik:RadExpander>
              </Grid>
    </Window>
  16. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Aug 2012 Link to this post

    Hi,

    You can still define the DecoratorTemplate in the Resources of the Grid and then apply it to the RadExpander.DecoratorTemplate in code behind as follows:

    Dim expander As New RadExpander()
    expander.DecoartorTemplate = TryCast(mainGrid.Resources("decoratorsample"), ControlTemplate)

    However, please note that the RadExpander was refactored earlier this year and in order to improve its performance, we had to change its ControlTemplate as well. This is why if you upgrade to our latest release, you won't be able to use the DecoratorTemplate property as it isn't available anymore. Instead the definition of the expander button is part of the ControlTemplate of control so you'll have to edit the entire template.

    All the best,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  17. Todd
    Todd avatar
    12 posts
    Member since:
    Jul 2008

    Posted 31 Jul 2013 Link to this post

    This doesn't appear to work in the latest release.  It is missing the RadExpanderDecorator and the DecoratorTemplate.
    Todd
  18. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 05 Aug 2013 Link to this post

    Hi Todd,

    As far as I understand you need to customize the toggle button of the RadExpander control. In the past there was a separate control for that button. You are right that the control is not present in the current implementation of the RadExpander control. In order to customize that button you need to extract the default Template of the control (read more).

    When you extract it you will be able to find a Path control named "arrow". This Path is defined in the content of the RadToggleButton called "HeaderButton". You can customize the Data property of the control or replace that control. Please have in mind that if you change the Path with other control (e.g. Image) you might need to name the new control with the same x:Name.

    Please try this approach out and let me know if it works for you.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    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 >>
  19. Todd
    Todd avatar
    12 posts
    Member since:
    Jul 2008

    Posted 05 Aug 2013 Link to this post

    I ended up copying the style from the theme styles and swapped the angle of rotation in the ExpandedStateGroup from 180 to 0 and 0 to 180 which reversed the arrow direction (which is what I wanted to do).  I was hoping not to add 100s of lines of code to do this, but I guess that is the only way.

    P.S.  I only saw the question and your answer, not the rest of the thread.  There was an advertisement at the bottom of my screen, so it appeared that was the whole thread.  Now I see there are more entries....
Back to Top
DevCraft banner