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

Circle size of Expander

7 Answers 105 Views
Expander
This is a migrated thread and some comments may be shown as answers.
UWE
Top achievements
Rank 1
UWE asked on 03 Jun 2013, 12:48 PM
Is there any way to change the circle size of the expander control? Or could you provide an example for replacing the template of the expander control? I would like to increase the size of the circle to make it more touch friendly.

Regards,
Peter

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 04 Jun 2013, 06:38 AM
Hi Peter,

One suggestion is you can use the Windows8Touch theme which got a bigger expander apart from all other themes.

Thanks,
Shinu.
0
UWE
Top achievements
Rank 1
answered on 04 Jun 2013, 03:26 PM
Hello Shinu,

This might be an option for another release. Right now I would like to change the button size. I looked at the template but I don't want to write a new template just for changing a small item.

I hope that someone from Telerik support can help.

Kind regards,
Peter
0
Dimitrina
Telerik team
answered on 05 Jun 2013, 10:54 AM
Hi,Peter

Unfortunately in order to change the circle size of the expander control, you have to edit the default  template of Expander control.

Please find attached a sample project.

Regards,
Dimitrina
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
UWE
Top achievements
Rank 1
answered on 05 Jun 2013, 01:53 PM
Hello Dimitrina,

That worked, thank you - although I wished there would be a simple solution like Setting a single property.

Kind regards,
Peter
0
Dimitrina
Telerik team
answered on 10 Jun 2013, 02:28 PM
Hi, Peter

  Thank  you for you feedback.
  In future we'll try to expose a property that allows you to apply a custom style only on the ToggleButton
 (circle element) in the RadExpander. I have logged the issue in our PITS.

Regards,
Dimitrina
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Barry
Top achievements
Rank 1
answered on 26 Aug 2019, 08:14 PM
It would of helped if you indicated exactly what part you changed ?!
0
Dilyan Traykov
Telerik team
answered on 29 Aug 2019, 09:19 AM

Hello Barry,

As there have been some modifications of the styles and templates of the RadExpander control since the last reply in this thread, I've taken the liberty of preparing a new project with the currently suggested approach for increasing the circle button's size.

Here's the code of interest with the modified areas marked in green:

            <Style x:Key="ExpanderHeaderButtonStyle" TargetType="telerik:RadToggleButton" BasedOn="{StaticResource ExpanderHeaderButtonStyle}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadToggleButton">
                            <Border x:Name="BorderVisual" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                                <Grid x:Name="HeaderPanel" Background="Transparent" Margin="{TemplateBinding Padding}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid>
                                        <Ellipse x:Name="NormalCircle"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Width="50"
                                        Height="50"
                                        Fill="{StaticResource ControlBackground_Normal}"
                                        Stroke="{StaticResource ControlOuterBorder_Normal}"
                                        StrokeThickness="1"/>
                                        <Ellipse x:Name="OuterCircle" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{x:Null}" Fill="{x:Null}" Width="50" Height="50" StrokeThickness="1"/>
                                        <Ellipse x:Name="InnerCircle" Width="48" Height="48" Stroke="{StaticResource ControlInnerBorder_Normal}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        <Grid RenderTransformOrigin="0.5 0.5" x:Name="arrowPanel">
                                            <Grid.RenderTransform>
                                                <RotateTransform Angle="{Binding ExpandDirection, RelativeSource={RelativeSource AncestorType=telerik:RadExpander},Converter={StaticResource ExpandDirectionToRotationAngleConverter}}"/>
                                            </Grid.RenderTransform>
                                            <Path x:Name="arrow"
                                            Stretch="None"
                                            RenderTransformOrigin="0.5,0.5"
                                            Width="8"
                                            Height="4"
                                            Data="M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z"
                                            Fill="{StaticResource ControlElement_Normal}">
                                                <Path.RenderTransform>
                                                    <RotateTransform Angle="0"/>
                                                </Path.RenderTransform>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                    <ContentPresenter x:Name="HeaderContent"
                                    Grid.Column="1"
                                    Margin="5 0"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStateGroup">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="NormalCircle" Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_MouseOver}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_MouseOver}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="NormalCircle" Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Pressed}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="HeaderContent" Storyboard.TargetProperty="Opacity" To=".5"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Disabled}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)" To="180" Duration="0:0:0.2"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="arrow" Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)" To="0" Duration="0:0:0.2"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:RadExpander" BasedOn="{StaticResource RadExpanderStyle}">
                <Setter Property="HeaderButtonStyle" Value="{StaticResource ExpanderHeaderButtonStyle}" />
            </Style>

Please note that these modifications are relevant for the Office_Black theme when using the implicit styles approach for theming the controls with the NoXaml binaries. If you're using another theme, you will need to extract and edit its template accordingly.

I hope you find this helpful.

Regards,
Dilyan Traykov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Expander
Asked by
UWE
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
UWE
Top achievements
Rank 1
Dimitrina
Telerik team
Barry
Top achievements
Rank 1
Dilyan Traykov
Telerik team
Share this question
or