XAML/WPF Specific Distance Between Columns

Question

This is my Datagrid, how can i establish that the Columns have all the same distance between them, so that the columns header don't peck so like the second or third column...

XAML:

<Style x:Key="Datag1" TargetType="DataGrid">
            <Setter Property="ColumnHeaderStyle" Value="{DynamicResource chs1}"></Setter>
        </Style>
        <Style x:Key="chs1" TargetType="DataGridColumnHeader">
            <Setter Property="Background" Value="Brown"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="15"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"></Setter>
                </Trigger>
            </Style.Triggers>

        </Style>


<DataGrid Name="DataGridView" Style="{DynamicResource Datag1}" Margin="0,105,0,0"  FontSize="15" CanUserSortColumns="True"
                      Background="Azure" RowBackground="Aqua" AlternatingRowBackground="DarkGray" ColumnHeaderHeight="45" Foreground="Brown"
                      CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeColumns="True" CanUserReorderColumns="False" BorderBrush="Black">

            </DataGrid>

EDIT:

Best solution: "you better set the AutoGenerateColumns property of the DataGrid to false and explicitly define each column and set an individual width for each one in your XAML markup. See my edited answer for an example." – mm8

Much thanks you all!

Hello Sir, i let it by the default, at the column width property i got SizeToHeader, but what i want is for example that after every "header" there is a bit a distance — Jul Pod, Apr 27 '17 at 11:53
So you want to be able to specify an explicit width or increase the width for the each of the columns? — mm8, Apr 27 '17 at 11:58
Hello mm8, let's say it so: ColumnWidth = SizeToHeader + 1 inch, so that every column got 1 inch after their max fit — Jul Pod, Apr 27 '17 at 12:04
if you look at my picture the first column looks good, but if you look at the second and third they peck on each other, what i want is a fit to the column content, but also dont cut the header if it is too big — Jul Pod, Apr 27 '17 at 12:20
Did you try to handle the dg_AutoGeneratedColumns event as I suggested? — mm8, Apr 27 '17 at 12:21
yes, the solution is correct if i want all with the same distance, but i want to fit the columns to their content, but also dont cut the header if the header is too big and they also should not peck on each other — Jul Pod, Apr 27 '17 at 12:25
The default columns size should take the actual width of the header into account. Please provide a *full* repo of our issue. — mm8, Apr 27 '17 at 12:27
it does mm8, but look how they peck on each other, you see it in the picture — Jul Pod, Apr 27 '17 at 12:28
So if you add an offset of 10 to the ActualWidth of the column, they won't "peck" on each other? — mm8, Apr 27 '17 at 12:32
they peck, but if i increase to 40 they dont peck anymore, but then columns with values like 1,2,4 also get this size, which looks not good — Jul Pod, Apr 27 '17 at 12:36
Then you better set the AutoGenerateColumns property of the DataGrid to false and explicitly define each column and set an individual width for each one in your XAML markup. See my edited answer for an example. — mm8, Apr 27 '17 at 12:44

mm8 · Accepted Answer · 2017-04-27T12:46:39.757

You could handle the AutoGeneratingColumn event and specify any Width you want for the columns:

const double fixedWidth = 100;
private void dg_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    e.Column.Width = new DataGridLength(fixedWidth);
}

If you want to add a specific offset to each column's width you could handle the AutoGeneratedColumns event:

private void dg_AutoGeneratedColumns(object sender, EventArgs e)
{
    DataGrid dg = sender as DataGrid;
    foreach (var column in dg.Columns)
    {
        column.Width = column.ActualWidth + 10;
    }
}

If you don't want to add an offset to every column you better set the AutoGenerateColumns property of the DataGrid to false and explicitly define each column and set an individual width for each one in your XAML markup:

<DataGrid Name="DataGridView" Style="{DynamicResource Datag1}" Margin="0,105,0,0"  FontSize="15" CanUserSortColumns="True"
                      Background="Azure" RowBackground="Aqua" AlternatingRowBackground="DarkGray" ColumnHeaderHeight="45" Foreground="Brown"
                      CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeColumns="True" CanUserReorderColumns="False" BorderBrush="Black"
                    AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="slpos" Binding="{Binding slpos}" Width="20" />
        <!-- and so on for each column...-->
    </DataGrid.Columns>
</DataGrid>

The AutoGeneratedColumns event seems like the solution, but it should fit first the column sizetoheader and then sum with 10, now all look the same — Jul Pod, Apr 27 '17 at 12:12

score 0 · Answer 2 · answered Apr 27 '17 at 13:11

Your columns are looking like that because they take only the necessary space with 0 margin. So, all you need to do is, inside the style of your DataGridColumnHeader, set a new Template, changing the Margin of the ContentPresenter to fit your needs (I set it to 10,2 but you can test different values to see how it looks like).

Try the code below:

<Style x:Key="chs1" TargetType="DataGridColumnHeader">
    <Setter Property="Background" Value="Brown"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">                    
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Content="{TemplateBinding Content}"
                    VerticalAlignment="Center"                                
                    HorizontalAlignment="Center"                                
                    Margin="10,2"
                    />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="LightGray"></Setter>
        </Trigger>
    </Style.Triggers>        
</Style>

This will still add a margin to *all* column headers. – mm8 Apr 27 '17 at 14:10 — mm8, Apr 27 '17 at 14:10
Based on his comment, isn't that what he would like to do? – Daniel Marques Apr 27 '17 at 15:06 — Daniel Marques, Apr 27 '17 at 15:06

XAML/WPF Specific Distance Between Columns

2 Answers2