Customize GridViewToggleRowDetailsColumn

[Trump]

I have a GridViewToggleRowDetailsColumn in the RadGridView. Now I want two things.

1. Using down-arrow and up-arrow instead of plus and minus icon. The down-arrow is attached.
2. I want the icon stick on the top. Now it is in the middle vertically.

Thanks for the sample code help.

 

[Martin]

Hello,

You can create an implicit style and override the PlusMinusTemplate (which is the default template the button uses if the PresentationMode is not changed) of the GridViewToggleButton to create your custom button appearance. You can also use our new RadGlyph to visualize this kind of arrow out of the box (you would need to merge the dictionary mentioned in example 3 in our help article to access the glyphs as static resources, or you can get the string value directly from the cheatsheet):

<Style TargetType="telerik:GridViewToggleButton" BasedOn="{StaticResource GridViewToggleButtonStyle}">
  <Setter Property="PlusMinusTemplate">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type telerik:GridViewToggleButton}">
        <Border Background="Transparent"
            VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
            UseLayoutRounding="True" SnapsToDevicePixels="True">
          <Grid Background="Transparent" Height="18" Width="18">
            <telerik:RadGlyph  x:Name="arrow"
                SnapsToDevicePixels="True" FontSize="16"
                Foreground="{TemplateBinding Foreground}"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                Glyph="{StaticResource GlyphArrowChevronDown}" />
            </Grid>
          </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
              <Setter TargetName="arrow" Property="Glyph" Value="{StaticResource GlyphArrowChevronUp}" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Foreground" Value="{telerik:FluentResource ResourceKey=AccentMouseOverBrush}" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
              <Setter Property="Foreground" Value="{telerik:FluentResource ResourceKey= AccentPressedBrush}" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

You can change the setters for the color to match the theme that you have chosen. This template is for the Fluent theme. If you are using some completely different theme, you can find the default control template in the Themes.Implicit/<theme> folder in your installation path in the Telerik.Windows.Controls.GridView.xaml and modify it for your project's needs. Furthermore, you can try alignments or margins to position the arrow as needed.

Regards,
Martin
Progress Telerik