Group Icon

2 posts, 0 answers
  1. Glen
    Glen avatar
    1 posts
    Member since:
    Aug 2014

    Posted 12 Sep 2014 Link to this post

    For silverlight RadGridView,
    I need to change the icon for the group expander.
  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 15 Sep 2014 Link to this post

    Hi Glen,

    The easiest way to change the arrow icon when the GridView is grouped is to use NoXAML binaries with Implicit Themes. Then edit the ControlTemplate of the GroupHeaderRow with x:Key="GroupHeaderRowTemplate" if you are using a GroupRenderMode="Flat". Otherwise if you are using  GroupRenderMode="Nested" (the default if not set), edit the GridViewGroupRow with x:Key="GridViewGroupRowTemplate". In both cases you will need to replace the Path element with x:Name="ExpanderButton" (this is the arrow), which is located in a Border element with x:Name="IconInnerBorder"

    To demonstrate what I have in mind, I have prepared an example that replaces group expander icon with a  
    plus and minus signs.


    <Border x:Name="IconInnerBorder"
                                    BorderBrush="{StaticResource ControlInnerBorder}"
                                    BorderThickness="1 1 0 1">                    
                                <Grid>
                                    <Path x:Name="plus"
                                          Width="5"
                                          Height="5"
                                          Margin="{TemplateBinding Padding}"
                                          Data="M1.937,0 L2.937,0 2.937,2.0209999 5,2.0209999 5,3.0209999 2.937,3.0209999 2.937,5 1.937,5 1.937,3.0209999 0,3.0209999 0,2.0209999 1.937,2.0209999 z"
                                          Fill="{StaticResource GridView_ToggleButtonStroke}"
                                          Stretch="Fill"
                                          Stroke="{x:Null}" />
                                    <Rectangle x:Name="minus"
                                               Width="5"
                                               Height="1"
                                               Margin="{TemplateBinding Padding}"
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Center"
                                               Fill="{StaticResource GridView_ToggleButtonStroke}"
                                               Opacity="0"
                                               RadiusX="0"
                                               RadiusY="0"
                                               Stroke="{x:Null}" />
                                </Grid>
                            </Border>

    Then you will need to edit the VisualStateGroups to reflect the made changes.

    <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="ExpandStateGroup">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconOuterBorder" Storyboard.TargetProperty="BorderThickness">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Thickness>0</Thickness>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="plus" Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="minus" Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="plus" Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    Also, I attached a sample project that demonstrates the suggested approach. Please note in the example the GroupRenderMode is set to "Flat".

    I hope this helps.

    Regards,
    Boris Penev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
Back to Top