CODEWITHSUNDEEP
wpfdatagridrowalignment
Francois
Francois

Reputation: 901

How to center the content of cells in a data grid?

I set the min height of a datagrid that way:

<DataGrid MinRowHeight="40">

After feeding the datagrid with datas, the text in each cell is top and left aligned. I could not find an easy way to center that text.

Any suggestions for doing that?

Upvotes: 33

Views: 67365

Answers (11)

Aymendps
Aymendps

Reputation: 1530

This is rather an old post, but if someone still needs this and finds that the borders/separations of cells are gone when using the approved answer, it's because they are using a Grid instead of Border which is the default.

Here is the default ControlTemplate of the DataGridCell element, with centered vertical and horizental alignment.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridCell}">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Upvotes: 1

PPr
PPr

Reputation: 81

This below code display datagrid cell conent in center..

<Style x:Key="DataGridCellStyle" TargetType="DataGridCell">
            <!--DISPLAY CONTENT IN MIDDLE-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="Center" />                        
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Upvotes: 2

Coden
Coden

Reputation: 2868

Here a better approach to center the content vertically:

<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 0

The Pademelon
The Pademelon

Reputation: 942

This style will set the VerticalAlignment to Center for all DataGridCells without needing to be applied explicitly.

<Style TargetType="DataGridCell">
    <Style.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Style.Resources>
</Style>

I find this to be the most elegant solution.

Upvotes: 5

Steven Davis
Steven Davis

Reputation: 21

Here is a slightly longer version of Arpit Shah's answer.

<DataGrid AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding Rows}">
    <DataGrid.Resources>
        <Style x:Key="RightAligned" TargetType="DataGridCell">
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn CellStyle="{StaticResource RightAligned}" 
                            Binding="{Binding Path=Quantity, Mode=OneWay}" 
                            Header="Quantity" Width="60" />
        <DataGridTextColumn Binding="{Binding Path=Category, Mode=OneWay}" 
                            Header="Category" Width="150" />
    </DataGrid.Columns>
</DataGrid>

Upvotes: 0

lea
lea

Reputation: 319

The following code will center the contents of cells in DataGrid:

<Style TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
</Style>

Upvotes: 31

Meysam Chegini
Meysam Chegini

Reputation: 999

use ElementStyle

 <DataGridTextColumn ElementStyle="{StaticResource Centering}"/>

  <Style x:Key="Centering" TargetType="{x:Type TextBlock}">
       <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>

Upvotes: 9

Arpit Shah
Arpit Shah

Reputation: 81

Modify your style tag like this.....

 <Style x:Key="CellTextCentre" TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
    <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter> 
 </Style>

Upvotes: 2

Francois
Francois

Reputation: 901

Final solution:

<Style x:Key="DataGridContentCellCentering" TargetType="{x:Type DataGridCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 54

Rachel
Rachel

Reputation: 132548

Try setting the DataGrid's Vertical and HorizontalContentAlignment to Center

<DataGrid VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />

If that doesn't work, you can use the solution in this answer. It uses a style that aligns the DataGrid cell contents

Upvotes: 6

blindmeis
blindmeis

Reputation: 22435

you can use styles. i add a sample for DataGridCheckBoxColumn, i hope it put you in the right direction.

<DataGridCheckBoxColumn Header="is active" IsReadOnly="False">
      <DataGridCheckBoxColumn.ElementStyle>
            <Style TargetType="CheckBox">
                 <Setter Property="VerticalAlignment" Value="Center"/>
                  <Setter Property="HorizontalAlignment" Value="Center"/>
             </Style>
      </DataGridCheckBoxColumn.ElementStyle>
      <DataGridCheckBoxColumn.Binding>
             <Binding Path="ISACTIVE" ValidatesOnDataErrors="True" Converter="{StaticResource MyBoolToIsActiveConverter}" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"
                                 NotifyOnValidationError="True" ValidatesOnExceptions="True">
                        </Binding>
                    </DataGridCheckBoxColumn.Binding>
                </DataGridCheckBoxColumn>

Upvotes: 9

Related Questions