Datagrid Header Padding

[Andreln]

Hi. First of all I'd like to say that I really like this project. I'm not very good at design and this really helps.

I have one issue with the datagrid and I'm not sure how to fix it.

In the datagrid header there seems to be some sorts of padding or margin overlapping the header text when you decrease the width of the column.

Is this fixable?

[Kinnara]

The issue is the sort icon occupies space even when it's not shown. It will be fixed in the next version. In the meantime, you can use the following column header style:

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource DefaultDataGridColumnHeaderStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Grid x:Name="ColumnHeaderRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="FocusVisual"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SortStates">
                                <VisualState x:Name="Unsorted" />
                                <VisualState x:Name="SortAscending">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SortDescending">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Glyph">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SortIconDescending}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Rectangle
                            x:Name="BackgroundRectangle"
                            Stretch="Fill"
                            Fill="{TemplateBinding Background}"
                            Grid.ColumnSpan="2" />

                        <Grid
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition x:Name="SortIconColumn" MinWidth="32" Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <ContentPresenter
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                RecognizesAccessKey="True"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                <ContentPresenter.Resources>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                                    </Style>
                                </ContentPresenter.Resources>
                            </ContentPresenter>

                            <ui:FontIcon
                                Grid.Column="1"
                                x:Name="SortIcon"
                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                Glyph="{StaticResource SortIconAscending}"
                                FontSize="12"
                                Foreground="{DynamicResource DataGridColumnHeaderForegroundBrush}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Visibility="Collapsed" />
                        </Grid>
                        <Rectangle
                            x:Name="VerticalSeparator"
                            Grid.Column="1"
                            Width="1"
                            VerticalAlignment="Stretch"
                            Fill="{TemplateBinding SeparatorBrush}"
                            Visibility="{TemplateBinding SeparatorVisibility}" />

                        <Grid
                            x:Name="FocusVisual"
                            IsHitTestVisible="False"
                            Opacity="0">
                            <Rectangle
                                x:Name="FocusVisualPrimary"
                                Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
                                StrokeThickness="2"
                                Fill="Transparent"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                IsHitTestVisible="False" />
                            <Rectangle
                                x:Name="FocusVisualSecondary"
                                Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
                                StrokeThickness="1"
                                Fill="Transparent"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                IsHitTestVisible="False"
                                Margin="2" />
                        </Grid>

                        <Thumb
                            x:Name="PART_LeftHeaderGripper"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="Left"
                            Style="{StaticResource ColumnHeaderGripperStyle}" />
                        <Thumb
                            x:Name="PART_RightHeaderGripper"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="Right"
                            Style="{StaticResource ColumnHeaderGripperStyle}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="BackgroundRectangle" Property="Fill" Value="{DynamicResource DataGridColumnHeaderHoveredBackgroundBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="BackgroundRectangle" Property="Fill" Value="{DynamicResource DataGridColumnHeaderPressedBackgroundBrush}" />
                        </Trigger>
                        <Trigger Property="SortDirection" Value="{x:Null}">
                            <Setter TargetName="SortIconColumn" Property="MinWidth" Value="0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="SortDirection" Value="{x:Null}">
                <Setter Property="Padding" Value="12,0" />
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.ColumnHeaderStyle>