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?
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>
The following code will center the contents of cells in DataGrid:
<Style TargetType="DataGridCell">
<Setter Property="TextBlock.TextAlignment" Value="Center" />
</Style>
use ElementStyle
<DataGridTextColumn ElementStyle="{StaticResource Centering}"/>
<Style x:Key="Centering" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
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>
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
This style will set the VerticalAlignment
to Center
for all DataGridCell
s 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.
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>
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>
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>
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>
精彩评论