[Solved] Customize expand details icon

[Diego]

Hello, how can i change that icon, via XAML?
Thanks,

Diego

[Vlad]

Hello Diego,

 You can apply style for GridViewToggleButton type. For example:
<Grid.Resources>
            <Style TargetType="telerik:GridViewToggleButton">
                <Setter Property="Background" Value="Red"/>
            </Style>
</Grid.Resources>

Kind regards,
Vlad
the Telerik team

[Diego]

Many thanks Vlad!

[Yolanda]

Hi Diego this is very easy to do.

In your column definition you have to write this

<telerikGridView:GridViewToggleRowDetailsColumn  UniqueName="ToggleRowDetails" IsReadOnly="True"
                                                                    ToggleButtonStyle="{StaticResource MagnifierGridViewToogleButton}"/>

This changes the tooblebutton (the plus icon)

you have to define in your styles, the image you want to use Ex:

<Style x:Key="MagnifierGridViewToogleButton" TargetType="telerik:GridViewToggleButton">
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="HorizontalContentAlignment" Value="Center"/>
       <Setter Property="Padding" Value="0"/>
       <Setter Property="Template" Value="{StaticResource GridViewToggleButtonTemplate}"/>
       <Setter Property="PlusMinusTemplate" Value="{StaticResource GridViewToggleButtonTemplate}"/>
       <Setter Property="ArrowTemplate" Value="{StaticResource GridViewToggleButtonTemplate}"/>
   </Style>

<ControlTemplate x:Key="GridViewToggleButtonTemplate" TargetType="telerik:GridViewToggleButton">
        <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver"/>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked"/>
                    <VisualState x:Name="Unchecked"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused"/>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Image Source="/SilverlightPricing;component/Images/icon_magnifier.png" ToolTipService.ToolTip="Afficher / Masquer les détails" Stretch="None" Cursor="Hand"/>
        </Border>
    </ControlTemplate>

In image you have to write your custom image to show.

In this case you always show the same image to expand and collapse the radgridview details

I hope this helps!
  Yolanda