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

Group Icon

1 Answer 2 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Glen
Top achievements
Rank 1
Glen asked on 12 Sep 2014, 08:51 PM
For silverlight RadGridView,
I need to change the icon for the group expander.

1 Answer, 1 is accepted

Sort by
0
Boris
Telerik team
answered on 15 Sep 2014, 07:49 AM
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.
 
Tags
GridView
Asked by
Glen
Top achievements
Rank 1
Answers by
Boris
Telerik team
Share this question
or