Căn Giữa Tiêu Đề Cột và Nội Dung Ô

Để căn giữa tiêu đề của các cột trong DataGrid, bạn có thể định nghĩa một Style riêng cho DataGridColumnHeader:

<Style x:Key="ColumnHeaderCenterStyle" TargetType="DataGridColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Background" Value="#A9A9A9"/>
    <Setter Property="Foreground" Value="White"/>
</Style>

Tương tự, để căn giữa nội dung bên trong các ô, bạn có thể tạo Style cho DataGridCell:

<Style x:Key="DataCellCenterStyle" TargetType="DataGridCell">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
</Style>

Bạn cũng có thể cần một bộ chuyển đổi màu sắc nếu muốn chuyển đổi chuỗi màu thành đối tượng màu thực tế:

<local:StringToColorConverter x:Key="ColorConverter"/>

Áp Dụng Các Kiểu Dáng Phổ Biến

Dưới đây là một tập hợp các Style tùy chỉnh để cải thiện giao diện của DataGrid:

<!-- Kiểu dáng cho tiêu đề cột -->
<Style TargetType="DataGridColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Background" Value="#808080"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="#808080"/>
    <Setter Property="Height" Value="35"/>
    <Setter Property="FontSize" Value="13"/>
</Style>

<!-- Kiểu dáng cho ô dữ liệu -->
<Style TargetType="DataGridCell">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Kiểu dáng cho TextBlock để căn giữa -->
<Style TargetType="TextBlock" x:Key="TextBlockCenterStyle">
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
</Style>

<!-- Kiểu dáng cho hàng, bao gồm thay đổi màu xen kẽ và hiệu ứng khi di chuột/chọn -->
<Style TargetType="DataGridRow">
    <Setter Property="Height" Value="35"/>
    <Style.Triggers>
        <Trigger Property="AlternationIndex" Value="0">
            <Setter Property="Background" Value="White"/>
        </Trigger>
        <Trigger Property="AlternationIndex" Value="1">
            <Setter Property="Background" Value="#ADD8E6"/> <!-- Màu xanh nhạt -->
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#FFD700"/> <!-- Màu vàng kim -->
        </Trigger>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="#00BFFF"/> <!-- Màu xanh dương đậm -->
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="#05c4ff"/>
        </Trigger>
    </Style.Triggers>
</Style>

<!-- Kiểu dáng chung cho DataGrid -->
<Style TargetType="DataGrid">
    <Setter Property="CanUserResizeColumns" Value="False"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="#808080"/>
    <Setter Property="SelectionUnit" Value="FullRow"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="RowHeaderWidth" Value="0"/>
    <Setter Property="HorizontalGridLinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="#D3D3D3"/> <!-- Màu xám nhạt -->
        </Setter.Value>
    </Setter>
    <Setter Property="VerticalGridLinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="#D3D3D3"/>
        </Setter.Value>
    </Setter>
</Style>

Hiển Thị Số Thứ Tự Tự Động Cho Mỗi Hàng

Để thêm cột số thứ tự tự động vào DataGrid, bạn có thể thực hiện hai bước sau:

1. Thêm một cột mới vào DataGrid trong tệp XAML:

<DataGridTextColumn Header="STT" Width="*" 
                        Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRow}}, Path=Header}"  
                        CellStyle="{StaticResource DataCellCenterStyle}" />

2. Xử lý sự kiện LoadingRow của DataGrid trong mã C#:

private void DataGrid_LoadingRow(object sender, DataGridRowEventArgs e)
{
    // Đặt số thứ tự cho tiêu đề của hàng, bắt đầu từ 1
    e.Row.Header = e.Row.GetIndex() + 1;
}