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
Regards,
Peter
7 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
Rank 2
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.
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
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
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
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
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
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
That worked, thank you - although I wished there would be a simple solution like Setting a single property.
Kind regards,
Peter
0
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
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
Rank 1
answered on 26 Aug 2019, 08:14 PM
It would of helped if you indicated exactly what part you changed ?!
0
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.