Circle size of Expander

8 posts, 0 answers
  1. UWE
    UWE avatar
    6 posts
    Member since:
    May 2012

    Posted 03 Jun 2013 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2013 Link to this post

    Hi Peter,

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

    Thanks,
    Shinu.
  3. UWE
    UWE avatar
    6 posts
    Member since:
    May 2012

    Posted 04 Jun 2013 Link to this post

    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
  4. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 05 Jun 2013 Link to this post

    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.

  5. UWE
    UWE avatar
    6 posts
    Member since:
    May 2012

    Posted 05 Jun 2013 Link to this post

    Hello Dimitrina,

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

    Kind regards,
    Peter
  6. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 10 Jun 2013 Link to this post

    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.

  7. Barry
    Barry avatar
    90 posts
    Member since:
    May 2016

    Posted 26 Aug in reply to Dimitrina Link to this post

    It would of helped if you indicated exactly what part you changed ?!
  8. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1013 posts

    Posted 29 Aug Link to this post

    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.
Back to Top