Search code examples
c#wpfdatagridalignment

How to center column cells differently in WPF


This is my datagrid which contains 7 columns, here is an image of content in my datagrid:

enter image description here

I applied next code:

<DataGrid Grid.Row="1" VerticalContentAlignment="Center"  IsReadOnly="True" AlternatingRowBackground="#E0E4E5" AlternationCount="2"  GridLinesVisibility="Horizontal" FontSize="16" RowHeight="35" SelectionUnit="FullRow" RowHeaderWidth="0" HorizontalGridLinesBrush="Gray" VerticalGridLinesBrush="#EBEBEB" CanUserAddRows="False" MinHeight="200" x:Name="dtgItems" Margin="15,0,4,10" AutoGenerateColumns="False" Background="Transparent" SelectionChanged="dtgItems_SelectionChanged"  ScrollViewer.CanContentScroll="False" EnableRowVirtualization ="False" >

            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Background" Value="#0091EA"/>
                    <Setter Property="Opacity" Value="1"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="FontFamily" Value="Arial"/>
                    <Setter Property="Height" Value="40"/>
                </Style>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#0091EA"/>
            </DataGrid.Resources>
            <DataGrid.CellStyle>
                <StaticResource ResourceKey="DataGridCentering"/>
            </DataGrid.CellStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding OrdinalNumber}"   Header="OrdinalNumber"   Foreground="Black" FontSize="15" FontFamily="Verdana" Width="10*" />
                <DataGridTextColumn Binding="{Binding ArticleCode}"   Header="Code"   Foreground="Black" FontSize="15" FontFamily="Verdana" Width="10*"  />
                <DataGridTextColumn Binding="{Binding ArticleTitle}"     Header="Title"   Foreground="Black" FontSize="15" FontFamily="Verdana" Width="40*"   />
                <DataGridTextColumn Binding="{Binding Quantity, StringFormat=N2}"       Header="Qty"   Foreground="Black"      FontSize="15" FontFamily="Verdana" Width="10*" />
                <DataGridTextColumn Binding="{Binding Price, StringFormat=N2}"   Header="Price"      Foreground="Black"     FontSize="15" FontFamily="Verdana" Width="10*" />
                <DataGridTextColumn Binding="{Binding Discount, StringFormat=N2}"    Header="Discount"  Foreground="Black"           FontSize="15" FontFamily="Verdana"  Width="10*"/>
                <DataGridTextColumn Binding="{Binding TotalAmount, StringFormat=N2}"    Header="Total"  Foreground="Black"           FontSize="15" FontFamily="Verdana"  Width="10*"/>
            </DataGrid.Columns>
        </DataGrid>

as its possible to noticed I applied

VerticalContentAlignment="Center"  on my `DataGrid` so all of my content is alligned center, but I would like to align `VerticalContentAlignment="Left"` to some of my cells/column, for example I would like to align Title to Left..

So how could I apply different alignment on different cell/column?

Thanks guys, Cheers

P.S I tried with this:

<DataGrid.Resources>

    <Style x:Key="LeftAlignCell" TargetType="DataGridCell">
        <Setter Property="VerticalContentAlignment" Value="Left"/>
    </Style>

<DataGrid.Resources>

AND

ElementStyle="{StaticResource  LeftAlignCell}"

I applied ElementStyle to my DataGridTextColumn

But I received following error : Requested value left was not found. So I guess it is not working this way..


Solution

  • You may want

        <Setter Property="HorizontalContentAlignment" Value="Left" />
    

    because it is the horizontal alignment, not the vertical one you're speaking about