DataGrid自定义数据样式

WPF响应式表格
作者：邱名涛
撰写时间：2019年6月9日
关键技术：DataGrid自定义数据样式

前端代码：

<Window x:Class="WpfApplication1.窗口随意拉伸"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="窗口随意拉伸">

    <DockPanel>
        <DockPanel DockPanel.Dock="Top" Margin="0,50,0,0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Border BorderBrush="CadetBlue" BorderThickness="2">
                        <TextBlock TextAlignment="Center" FontSize="20" Text="DataGrid表格样式"/>
                    </Border>
                </Grid>
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Border BorderBrush="Red" BorderThickness="1">
                            <TextBlock TextAlignment="Center" FontSize="20" Text="红色边框"/>
                        </Border>
                    </Grid>
                    <Grid Grid.Column="1">
                        <Border BorderBrush="Yellow" BorderThickness="1">
                            <TextBlock TextAlignment="Center" FontSize="20" Text="绿色边框"/>
                        </Border>
                    </Grid>
                    <Grid Grid.Column="2">
                        <Border BorderBrush="Blue" BorderThickness="1">
                            <TextBlock TextAlignment="Center" FontSize="20" Text="蓝色边框"/>
                        </Border>
                    </Grid>
                </Grid>
                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Button Background="Wheat" FontSize="20" Content="数据"/>
                    </Grid>
                    <Grid Grid.Column="1">
                        <Button Background="OldLace" FontSize="20" Content="背景"/>
                    </Grid>
                </Grid>
            </Grid>
        </DockPanel>
        <DockPanel>
            <DataGrid x:Name="DataGrid"  ItemsSource="{Binding}" AutoGenerateColumns="False"
            SelectionUnit="CellOrRowHeader" IsReadOnly="True">
                <DataGrid.ColumnHeaderStyle>
                    <Style TargetType="DataGridColumnHeader">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="Yellow" Offset="0.5"/>
                                    <GradientStop Color="White" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Foreground" Value="Black"/>
                        <Setter Property="FontSize" Value="13" />
                    </Style>
                </DataGrid.ColumnHeaderStyle>

                <DataGrid.Columns>
                    <DataGridTextColumn Header="名称"
                                    Binding="{Binding Name}">
                        <DataGridColumn.HeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="SkyBlue" Offset="0.5"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="Black"/>
                                <Setter Property="FontSize" Value="13"/>
                                <Setter Property="Width" Value="80"/>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="ToolTip" Value="Sort by Column"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </DataGridColumn.HeaderStyle>
                    </DataGridTextColumn>

                    <DataGridTextColumn Header="类型"
                                    Binding="{Binding Type}" >
                        <DataGridColumn.HeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="LightGreen" Offset="0.5"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="Black"/>
                                <Setter Property="FontSize" Value="13"/>
                                <Setter Property="Width" Value="50"/>
                            </Style>
                        </DataGridColumn.HeaderStyle>
                    </DataGridTextColumn>

                    <DataGridComboBoxColumn Header="下拉框" 
                                SelectedItemBinding="{Binding Sex}" >
                        <DataGridColumn.HeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="LightPink" Offset="0.5"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="Black"/>
                                <Setter Property="FontSize" Value="13"/>
                                <Setter Property="Width" Value="70"/>
                            </Style>
                        </DataGridColumn.HeaderStyle>
                    </DataGridComboBoxColumn>

                    <DataGridCheckBoxColumn Header="选中框" Width="100" 
                                Binding="{Binding Pass}"/>

                </DataGrid.Columns>
                <DataGrid.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="Red"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </DataGrid.CellStyle>
            </DataGrid>
        </DockPanel>
    </DockPanel>
</Window>

后台代码：

using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    /// <summary>
    /// 窗口随意拉伸.xaml 的交互逻辑
    /// </summary>
    public partial class 窗口随意拉伸 : Window
    {
        public 窗口随意拉伸()
        {
            InitializeComponent();
            DataGrid.Loaded += (s, e) =>
            {
                DataGrid.Columns.AsParallel().ForEach(column =>
                {
                    column.MinWidth = column.ActualWidth;
                    column.Width = new DataGridLength(1, DataGridLengthUnitType.Star);
                });
            };

            List<Hero> Heros = new List<Hero>();
            Hero hero1 = new Hero();
            hero1.Name = "管理员";
            hero1.Type = "后台管理";
            //hero1.DegreeOfDifficulty = "5";

            Hero hero2 = new Hero();
            hero2.Name = "工程师";
            hero2.Type = "负责前台";
            //hero2.DegreeOfDifficulty = "3";

            Hero hero3 = new Hero();
            hero3.Name = "老板";
            hero3.Type = "Boss";
            //hero3.DegreeOfDifficulty = "2";

            Hero hero4 = new Hero();
            hero3.Name = "服务员";
            hero3.Type = "员工";
            //hero3.DegreeOfDifficulty = "2";

            Heros.Add(hero1);
            Heros.Add(hero2);
            Heros.Add(hero3);

            this.DataContext = Heros;
        }

        public class Hero
        {
            public string Name { get; set; }

            public string Type { get; set; }

            public string DegreeOfDifficulty { get; set; }
        }
    }
}

效果图片