wpf DataGrid好看的样式

XML 复制代码

<Window x:Class="UITest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UITest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="DataGridStyle" TargetType="DataGrid">
            <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle}"></Setter>
            <Setter Property="CellStyle" Value="{DynamicResource CellStyle}"></Setter>
            <Setter Property="RowStyle" Value="{DynamicResource RowStyle}"></Setter>
            <Setter Property="Background" Value="White"></Setter>
            <Setter Property="EnableRowVirtualization" Value="True"></Setter>
            <Setter Property="GridLinesVisibility" Value="None"></Setter>
            <Setter Property="CanUserAddRows" Value="False"></Setter>
            <Setter Property="AutoGenerateColumns" Value="False"></Setter>
            <Setter Property="IsEnabled" Value="True"></Setter>
            <Setter Property="HeadersVisibility" Value="Column"></Setter>
        </Style>
        <Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
            <Setter Property="Height" Value="35"></Setter>
            <Setter Property="Background" Value="#F2F2F2"></Setter>
            <Setter Property="BorderThickness" Value="0,0,1,1"></Setter>
            <Setter Property="BorderBrush" Value="#CBCBCB"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        </Style>
        <Style x:Key="RowStyle" TargetType="DataGridRow">
            <Setter Property="Cursor" Value="Hand"></Setter>
            <Setter Property="BorderBrush" Value="red"/>
            <Setter Property="BorderThickness" Value="0,0,0,1"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="#F2F2F2"/>
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background"  Value="#CBCBCB" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="CellStyle" TargetType="DataGridCell">
            <Setter Property="Height" Value="35"></Setter>
            <Setter Property="FontSize" Value="13"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridCell">
                        <Border x:Name="Bg" Background="Transparent" BorderThickness="0" UseLayoutRounding="True" BorderBrush="#FFCBCBCB">
                            <ContentPresenter HorizontalAlignment="Center"  VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <DataGrid x:Name="myDataGrid" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DataGridStyle}" Margin="5">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding Id}" Width="80"/>
                <DataGridCheckBoxColumn Header="Name" Binding="{Binding Name}" Width="120"/>
                <DataGridComboBoxColumn Header="Age" SelectedItemBinding="{Binding Age}" Width="200"/>
                <DataGridTemplateColumn Header="Actions" Width="80">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="Edit" Command="{Binding EditCommand}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

cs 复制代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UITest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 创建数据源
            var data = new List<Person>
        {
            new Person { Id = 1, Name = "Alice", Age = 25 },
            new Person { Id = 2, Name = "Bob", Age = 30 },
            new Person { Id = 3, Name = "Charlie", Age = 35 }
        };

            // 绑定数据到 DataGrid
            myDataGrid.ItemsSource = data;
        }
        public class Person
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public int Age { get; set; }
        }
    }
}