-
Notifications
You must be signed in to change notification settings - Fork 444
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Datagrid Header Padding #48
Comments
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> |
Kinnara
added a commit
that referenced
this issue
Mar 26, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
![image](https://user-images.githubusercontent.com/23505398/77626379-91564c80-6f45-11ea-9f4b-6c6b1f1c1a13.png)
Is this fixable?
The text was updated successfully, but these errors were encountered: