Group Icon

[Glen]

For silverlight RadGridView,
I need to change the icon for the group expander.

[Boris]

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