How to Set style for DataGrid header in WPF

85,160

Solution 1

To avoid the effect of the header collapsing simply correct your style in this way:

  <Setter Property="HorizontalAlignment" Value="Stretch" />
  <Setter Property="HorizontalContentAlignment" Value="Center" />

Solution 2

Adding the Style for DatagridColumnHeader of the Datagrid

<DataGrid Name="GatewayPortsDataGrid" Height="auto" Width="auto">
     <DataGrid.Resources>
            <Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}" >
            <Setter Property="Background" Value="White" />
            <Setter Property="Foreground" Value="Black" />                                   
            <Setter Property="BorderBrush" Value="Black"/>                                  
            <Setter Property="BorderThickness" Value="1 1 1 1"/>                               
            <Setter Property="Margin" Value="-1,-1,0,0" />
            <Setter Property="Height" Value="28" />                                                                    
            <Setter Property="Width" Value="auto"/>                                    
            <Setter Property="HorizontalContentAlignment" Value="Center"/>                                                                        
            </Style>
        </DataGrid.Resources>
</DataGrid>
Share:
85,160
Arian
Author by

Arian

Please vote-up this thread: RDLC Report Viewer for Visual Studio 2022

Updated on July 18, 2022

Comments

  • Arian
    Arian almost 2 years

    I have a DataGrid like this:

    <DataGrid AutoGenerateColumns="False"  
              Height="221" 
              HorizontalAlignment="Center" 
              VerticalContentAlignment="Center" 
              HorizontalContentAlignment="Center" 
              Margin="6,269,0,0" 
              Name="dataGrid1" 
              VerticalAlignment="Center" 
              Width="875" 
              SelectionChanged="dataGrid1_SelectionChanged">
        <DataGrid.Columns>
            <DataGridTextColumn x:Name="Id" 
                                Header="ID"
                                Binding="{Binding Path=Key}" 
                                HeaderStyle="" />
            <DataGridTemplateColumn Header="Image" 
                                    Width="SizeToCells" 
                                    IsReadOnly="True" 
                                    MinWidth="80">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Width="16" 
                               Height="16"
                               Source="{StaticResource MyImageSource}"
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Center"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
    

    How I can center DataGrid Header? and apply style for it?

    thanks


    Edit 1):

    after write this code:

    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="FontWeight"  Value="Bold" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
        </Style>
    </DataGrid.ColumnHeaderStyle>
    

    grid columns become :

    enter image description here

    Why?

  • Russell Giddings
    Russell Giddings about 11 years
    No need for the <Setter Property="HorizontalAlignment" Value="Stretch" /> as "Stretch" is the default.