none
How to pad spacing between DataGrid columns RRS feed

  • Question

  • Inherited a very large [40,000 line] C# WPF application that paints DataGrids with spacing between columns, see below, but I do not understand what controls the spacing.

    Here is the XAML for the top row, the Z1 through Z7. What if anything in the XAML controls spacing between columns?

    Nothing in the C# code appears to set any properties.

    Thanks for your time.

    <DataGrid x:Name="topHeaterLabel" HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding}"
                      AutoGenerateColumns="False" HeadersVisibility="Column" GridLinesVisibility="None" BorderThickness="0"
                      CanUserAddRows="False" KeyboardNavigation.TabNavigation="None" CanUserSortColumns="False" Panel.ZIndex="2">
                    <DataGrid.Columns>
                        <DataGridTextColumn Width="40" Header="" IsReadOnly="True" Binding="{Binding IdLabel}"/>
                    </DataGrid.Columns>
                    <DataGrid.Resources>
                        <Style x:Key="DataGridBase" TargetType="Control">
                            <Setter Property="LayoutTransform">
                                <Setter.Value>
                                    <TransformGroup>
                                        <RotateTransform Angle="-90" />
                                        <ScaleTransform ScaleX="1" ScaleY="-1" />
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
                        </Style>
                        <Style TargetType="DataGridCell" BasedOn="{StaticResource DataGridBase}">
                            <Setter Property="Background" Value="#D3D3D3" />
                            <Setter Property="FontSize" Value="16"/>
                            <Setter Property="BorderThickness" Value="6"/>
                            <Setter Property="Foreground" Value="Black"/>
                            <Setter Property="BorderBrush" Value="#F2F2F2"/>
                            <Setter Property="FontFamily" Value="Segoe UI" />
                            <Setter Property="FontWeight" Value="Medium" />
                            <Setter Property="TextBlock.TextAlignment" Value="Center" />
                        </Style>
                        <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridBase}">
                            <Setter Property="FontSize" Value="16"/>
                            <Setter Property="BorderThickness" Value="6"/>
                            <Setter Property="Background" Value="#F2F2F2"/>
                            <Setter Property="Foreground" Value="Black"/>
                            <Setter Property="BorderBrush" Value="#F2F2F2"/>
                            <Setter Property="FontFamily" Value="Segoe UI"/>
                            <Setter Property="FontWeight" Value="Medium"/>
                            <Setter Property="TextBlock.TextAlignment" Value="Center"/>
                            <Setter Property="Width" Value="75"/>
                        </Style>
                        <Style TargetType="DataGridRowHeader" BasedOn="{StaticResource DataGridBase}"/>
                        <Style TargetType="DataGridRow">
                            <Setter Property="Height" Value="70"/>
                            <Setter Property="BorderBrush" Value="#F2F2F2"/>
                        </Style>
                    </DataGrid.Resources>
                    <DataGrid.LayoutTransform>
                        <TransformGroup>
                            <RotateTransform Angle="90"/>
                            <MatrixTransform Matrix="-1, 0, 0, 1, 0, 0"/>
                        </TransformGroup>
                    </DataGrid.LayoutTransform>
                </DataGrid>

    Saturday, February 15, 2020 12:12 AM

Answers

  • Alex, I think I have found a solution.

    By adding a BorderThickness property to the DataGridRow, I can control the width of the inter-column spacing, see screenshot below.

    I also now realize the reason why DataGridColumn Width property affects displayed height, and DataGridRow Height property affects displayed width is that the original XAML author put a 90 degree rotation in the grid, see original XAML above.

    Now the trick will be to come up with a formula computing Width and BorderThickness as a function of element count in the ItemsSource.

    • Proposed as answer by simonb549 Tuesday, February 18, 2020 8:32 AM
    • Marked as answer by Frank J Natoli Tuesday, February 18, 2020 9:52 PM
    Monday, February 17, 2020 5:46 PM

All replies

  • Try reducing the value of the first BorderThickness.

    Saturday, February 15, 2020 8:22 AM
  • Thank you, but modifying BorderThickness appears to only affect the overall cell width but not the inter cell spacing.

    Here is the screenshot with BorderThickess reduced from 6 to 2:

    And here is BorderThickness increased from 6 to 10:

    Saturday, February 15, 2020 6:27 PM
  • Incredibly, if I change XAML DataGridColumnHeader property Width, I affect the height not width of the cells. And if I change XAML DataGridRowHeader property Height, I affect the width not height of the cells, see below screenshot with Height increased from 70 to 220.
    Saturday, February 15, 2020 6:46 PM
  • Hi,

    You can place a custom DataGridTextColumn between DataGrid Columns

     <DataGrid x:Name="dg1" AutoGenerateColumns="False" GridLinesVisibility="None"
          HorizontalGridLinesBrush="Black"
                  >
                <DataGrid.Resources>
                    <Style TargetType="DataGridCell">
                        <Setter Property="BorderThickness" Value="0,0,1,1"/>
                        <Setter Property="BorderBrush" Value="{Binding ElementName=dg1, Path=HorizontalGridLinesBrush}"/>
                    </Style>
                    <Style x:Key="DataGridGapCell" TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding ElementName=dg1, Path=Background}"/>
                        <Setter Property="BorderThickness" Value="0,0,1,0"/>
                        <Setter Property="BorderBrush" Value="{Binding ElementName=dg1, Path=HorizontalGridLinesBrush}"/>
                    </Style>
                    <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader">
                        <Setter Property="Background" Value="{Binding ElementName=dg1, Path=Background}"/>
                    </Style>
                </DataGrid.Resources>
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Header 1" Binding="{Binding Id}"/>
                    <DataGridTextColumn Width="20" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
                    <DataGridTextColumn Header="Header 2" Binding="{Binding Name}"/>
                </DataGrid.Columns>
            </DataGrid>

    Best Regards,

    Alex


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, February 17, 2020 9:23 AM
    Moderator
  • Alex, thank you, but I don't think that will work for me because the DataGrid ItemsSource binding is being used to paint a single row with a variable number of columns, and your suggestion appears to require a fixed number of columns.

    The various screenshots that I provide show six rows, but the XAML [that I inherited] declares six separate DataGrids, one for each row, with a variable/binding number of columns.

    The so far unexplained detail, as the screenshots show, is that each row has a small gap between each column, so something in the XAML is causing the gap, but so far I don't know what.

    I need to stretch each row of columns to the full width of the machine image, not clustered in the center as each screenshot shows.

    Thanks again for your time.

    Monday, February 17, 2020 4:46 PM
  • Alex, I think I have found a solution.

    By adding a BorderThickness property to the DataGridRow, I can control the width of the inter-column spacing, see screenshot below.

    I also now realize the reason why DataGridColumn Width property affects displayed height, and DataGridRow Height property affects displayed width is that the original XAML author put a 90 degree rotation in the grid, see original XAML above.

    Now the trick will be to come up with a formula computing Width and BorderThickness as a function of element count in the ItemsSource.

    • Proposed as answer by simonb549 Tuesday, February 18, 2020 8:32 AM
    • Marked as answer by Frank J Natoli Tuesday, February 18, 2020 9:52 PM
    Monday, February 17, 2020 5:46 PM
  • Hi,

    I am glad you have got your solution, we appreciated you shared us your solution, we also hope you can mark it as an answer.

    Best Regards,

    Alex


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, February 18, 2020 5:17 AM
    Moderator