Custom Checkbox Datagrid not center

[chuongmep]

Describe the bug

I tried to center header a checkbox custom but it can't same align with cell value

To Reproduce

Example :

 <DataGrid.Columns>
                        <!-- <DataGridCheckBoxColumn Binding="{Binding IsSelected}" Header="Check" /> -->
                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.Header>
                                <CheckBox HorizontalAlignment="Center"
                                          HorizontalContentAlignment="Center">
                                    <i:Interaction.Behaviors>
                                        <EventTriggerBehavior EventName="Click">
                                            <InvokeCommandAction Command="{Binding CheckAllCommand}" />
                                        </EventTriggerBehavior>
                                    </i:Interaction.Behaviors>
                                </CheckBox>
                            </DataGridTemplateColumn.Header>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <CheckBox
                                        HorizontalAlignment="Center"
                                        Click="CheckList_click"
                                        IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>
 </DataGrid.Columns>

Expected behavior

I hope align will be same

Avalonia version

11.2.3

OS

macOS

Additional context

No response

[timunie]

Use DevTools F12.to check is CheckBox has a MinWidth or Margin set

[chuongmep]

Hi @timunie , MinWidth = 0 and Margin is 0,0,0,0, any help ?

[timunie]

Ah wait the header has a reserved space for SortIcon. You need to override this. Looking up the Theme for DataGridColumnHeader should help you.

[timunie]

Override this Resoruce (to 0) should help I guess:

Avalonia/src/Avalonia.Controls.DataGrid/Themes/Fluent.xaml

Line 56 in 0dd628f

<x:Double x:Key="DataGridSortIconMinWidth">32</x:Double>

[chuongmep]

How can I able to overide that key, do you have any example ?

[timunie]

Just copy the line I linked to App.Resources and change the value

[chuongmep]

Just tried but result still is same

[msneijders]

What control themes are you using for your DataGridColumnHeader? The defaults from Avalonia's Fluent?

That one does not seem completely compatible with centered header content. But with a little tweak it could be, like this:
(This is a copypaste from Fluent.axaml from Avalonia.Controls.DataGrid -- and moved a padding and a MinWidth,
and only meant as a starting point for further tweaking if need to)

<ControlTheme
    x:Key="GridHeaderCompatibleWithCenteredContent"
    BasedOn="{StaticResource {x:Type DataGridColumnHeader}}"
    TargetType="DataGridColumnHeader">
    <Setter Property="Padding" Value="12,0,12,0" />
    <Setter Property="Template">
        <ControlTemplate>
            <Border
                x:Name="HeaderBorder"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
                <Grid Name="PART_ColumnHeaderRoot" ColumnDefinitions="*,Auto">

                    <Panel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <ContentPresenter
                                x:Name="PART_ContentPresenter"
                                Margin="{TemplateBinding Padding}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}" />

                            <Path
                                Name="SortIcon"
                                Grid.Column="1"
                                Height="12"
                                MinWidth="20"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Fill="{TemplateBinding Foreground}"
                                IsVisible="False"
                                Stretch="Uniform" />
                        </Grid>
                    </Panel>

                    <Rectangle
                        Name="VerticalSeparator"
                        Grid.Column="1"
                        Width="1"
                        VerticalAlignment="Stretch"
                        Fill="{TemplateBinding SeparatorBrush}"
                        IsVisible="{TemplateBinding AreSeparatorsVisible}" />

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

And use it in you datagrid:

                    <DataGrid
                        ColumnHeaderTheme="{StaticResource GridHeaderCompatibleWithCenteredContent}" />

[chuongmep]

Hi, after test with your solution, it look better but still not center with row, I'm using Fluent them now :

for more information this is what I'm modify :

 <Window.Resources>
        <ControlTheme
            x:Key="GridHeaderCompatibleWithCenteredContent"
            BasedOn="{StaticResource {x:Type DataGridColumnHeader}}"
            TargetType="DataGridColumnHeader">
            <Setter Property="Padding" Value="12,0,12,0" />
            <Setter Property="Template">
                <ControlTemplate>
                    <Border
                        x:Name="HeaderBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid Name="PART_ColumnHeaderRoot" ColumnDefinitions="*,Auto">

                            <Panel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter
                                        x:Name="PART_ContentPresenter"
                                        Margin="{TemplateBinding Padding}"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}" />

                                    <Path
                                        Name="SortIcon"
                                        Grid.Column="1"
                                        Height="12"
                                        MinWidth="20"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Fill="{TemplateBinding Foreground}"
                                        IsVisible="False"
                                        Stretch="Uniform" />
                                </Grid>
                            </Panel>

                            <Rectangle
                                Name="VerticalSeparator"
                                Grid.Column="1"
                                VerticalAlignment="Stretch"
                                Fill="{TemplateBinding SeparatorBrush}"
                                IsVisible="{TemplateBinding AreSeparatorsVisible}" />

                            <Grid
                                x:Name="FocusVisual"
                                IsHitTestVisible="False"
                                IsVisible="False">
                                <Rectangle
                                    x:Name="FocusVisualPrimary"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Fill="Transparent"
                                    IsHitTestVisible="False"
                                    Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
                                    StrokeThickness="2" />
                                <Rectangle
                                    x:Name="FocusVisualSecondary"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Fill="Transparent"
                                    IsHitTestVisible="False"
                                    Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
                                    StrokeThickness="1" />
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter>
        </ControlTheme>
    </Window.Resources>

[msneijders]

It looks like the checkboxes in your row cells are not centered? They look a bit off to the left of the center. The checkbox in your header cell does look fully centered.

Either fix the layout of the row cell checkbox, or compensate with the header cell.

[chuongmep]

Hi @msneijders , I created sample project here to easy take a look : https://github.com/chuongmep/AvaloniaDataGridBug
I can't find the place to understand why still problem

[msneijders]

found it: you set padding="0" to the checkbox in the header, but no padding (so it has its default padding) to the checkbox in the row cell. You should give both the same padding.

[chuongmep]

Oh my got, that awesome, thanks you for your help !

[msneijders]

np -- sometimes we overlook the smallest mistake, and then we struggle ;p.

[chuongmep]

Hi @msneijders , the problem cause again when I'm add more 2 column, any recomend for fix ?

[msneijders]

I tested it in DataGridPage.axaml in Avalonia's ControlCatalog app, which already has many columns in it. The checkbox column stays correctly centered, so I cannot reproduce what is in your screenshot.