Styling of Grid Header Row

[mike okon]

I have a grid row header and row styling issue.

 

I need the Toggle button and area in which it resides to be made bigger so that opening of the details is made easier. (This will be for a touch screen application)

I believe it is the PART_HierarchyIndentPresenter  which needs to be made WIDER. But am NOT Sure. I have attached a screenshot showing the issue. The arrow is to close to the row edge and the area is too small for a finger input. Both arrow and area need to be made larger and wider

 

Please can you point out in the Style where this needs to be changed. I have tried width="87" but this has NO EFFECT

 

Kind Regards

Mike

 

<ControlTemplate x:Key="GridViewFooterRowTemplate"
TargetType="grid:GridViewFooterRow">
<grid:SelectiveScrollingGrid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="PART_FooterRowBorder"
Grid.Column="3"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
<Border x:Name="PART_HierarchyIndent"
Width="87"
BorderThickness="0,0,0,0"
Grid.Column="2"
Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
<Border x:Name="PART_IndicatorPresenter"
Width="87"
VerticalAlignment="Stretch"
Grid.Column="0"
Visibility="{TemplateBinding RowIndicatorVisibility}"
grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Grid.RowSpan="3"
Background="{StaticResource Custom_Background_MainBrush}"
BorderThickness="0,0,0,0" />
<grid:IndentPresenter x:Name="PART_IndentPresenter"
IndentLevel="{TemplateBinding IndentLevel}"
ItemTemplate="{StaticResource GridViewFooterIndentCellDataTemplate}"
Grid.Column="1"
grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
<grid:DataCellsPresenter x:Name="PART_DataCellsPresenter"
Grid.Column="3" />
</grid:SelectiveScrollingGrid>
</ControlTemplate>

[Dilyan Traykov]

Hello Mike,

The elements you need to modify depend on whether you're using RowDetails or hierarchy.

- If you're using RowDetails, the element you should target in order to achieve the desired look is the GridViewToggleButton:

<Style TargetType="telerik:GridViewToggleButton" BasedOn="{StaticResource GridViewToggleButtonStyle}">
    <Setter Property="Width" Value="87" />
</Style>

- In case you've built your hierarchy using RadGridView's ChildTableDefinitions, you need to modify the control templates of the GridViewRow and GridViewHeaderRow and change the widths of the PART_HierarchyExpandButton and PART_HierarchyIndentPresenter elements respectively.

Please give this a try and let me know how this goes.

Regards,
Dilyan Traykov
Telerik by Progress