CODEWITHSUNDEEP
c#wpfc#-4.0styles
DooDoo
DooDoo

Reputation: 13487

How to Set style for DataGrid header in WPF

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?

Upvotes: 22

Views: 97523

Answers (2)

Maghalakshmi Saravana
Maghalakshmi Saravana

Reputation: 811

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>

Upvotes: 11

j.b.
j.b.

Reputation: 211

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" />

Upvotes: 21

Related Questions