一、效果
二、后台代码
public partial class DataGridUserControl : UserControl
{
public ObservableCollection<UserInfo> UserInfos { get; set; } = new ObservableCollection<UserInfo>();
public ObservableCollection<string> SexList { get; set; } = new ObservableCollection<string>() { "男", "女" };
public DataGridUserControl()
{
InitializeComponent();
this.DataContext = this;
Init();
}
private void Init()
{
Random random = new Random();
var img = new BitmapImage(new Uri("../bird1.png", UriKind.Relative));
foreach (var s in Enumerable.Range(0, 10)) {
UserInfos.Add(new UserInfo() {
Check = Convert.ToBoolean( random.Next(0, 2)),
Index = s,
Name ="lr"+s,
Sex= random.Next(0,2)==0?"男":"女",
Age= random.Next(0,80),
Image = img
});
}
}
}
三、UserInfo
public class UserInfo : INotifyPropertyChanged {
public event PropertyChangedEventHandler PropertyChanged;
private bool _check;
public bool Check
{
get { return _check; }
set
{
_check = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
}
}
private int _index;
public int Index
{
get { return _index; }
set {
_index = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
}
}
private string _name;
public string Name
{
get { return _name; }
set
{
_name = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
}
}
private string _sex;
public string Sex
{
get { return _sex; }
set
{
_sex = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
}
}
private int _age;
public int Age
{
get { return _age; }
set
{
_age = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
}
}
private BitmapImage _img;
public BitmapImage Image
{
get { return _img; }
set
{
_img = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
}
}
}
四、xaml
<UserControl.Resources>
<CollectionViewSource x:Key="ItemsCVS" Source="{Binding SexList}" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<DataGrid ItemsSource="{Binding UserInfos}" AutoGenerateColumns="False" Margin="10" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="选中" Binding="{Binding Check}" Width="50" />
<DataGridTextColumn Header="序号" Binding="{Binding Index}" Width="50"/>
<DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="50"/>
<DataGridComboBoxColumn Header="姓别" Width="50"
ItemsSource="{Binding Source={StaticResource ItemsCVS} }" SelectedItemBinding="{Binding Sex}"/>
<DataGridTextColumn Header="年龄" Binding="{Binding Age}"/>
<DataGridTemplateColumn Header="头像" Width="50">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Image}" Stretch="Uniform" Width="40" Height="40"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<DataGrid ItemsSource="{Binding UserInfos}" AutoGenerateColumns="False" Margin="10" Grid.Column="1"
Style="{StaticResource DataGridStyle}" DataGrid.CellStyle="{StaticResource DataGridCellStyle}" DataGrid.RowStyle ="{StaticResource DataGridRowStyle}" DataGrid.ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="选中" Binding="{Binding Check}" Width="50" />
<DataGridTextColumn Header="序号" Binding="{Binding Index}" Width="50"/>
<DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="50"/>
<DataGridComboBoxColumn Header="姓别" Width="50"
ItemsSource="{Binding Source={StaticResource ItemsCVS} }" SelectedItemBinding="{Binding Sex}"/>
<DataGridTextColumn Header="年龄" Binding="{Binding Age}"/>
<DataGridTemplateColumn Header="头像" Width="80">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Image}" Stretch="Uniform" Width="30" Height="30"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
五、Style
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--DataGrid样式-->
<Style TargetType="DataGrid" x:Key="DataGridStyle">
<!--网格线颜色-->
<Setter Property="CanUserResizeColumns" Value="false"/>
<Setter Property="Background" Value="#FFF7EDAD" />
<Setter Property="BorderBrush" Value="#FFF5F7F5" />
<Setter Property="HorizontalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="#d6c79b"/>
</Setter.Value>
</Setter>
<Setter Property="VerticalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="#d6c79b"/>
</Setter.Value>
</Setter>
</Style>
<!--标题栏样式-->
<Style TargetType="DataGridColumnHeader" x:Key="DataGridColumnHeaderStyle">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="28" />
<Setter Property="Foreground" Value="#323433" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1"
BorderBrush="#e6dbba"
Width="Auto">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0"
VerticalAlignment="Center" RenderTransformOrigin="1,1" />
<Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="25"/>
</Style>
<!--行样式触发-->
<!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
<Style TargetType="DataGridRow" x:Key="DataGridRowStyle">
<Setter Property="Background" Value="#F2F2F2" />
<Setter Property="Height" Value="25"/>
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<!--隔行换色-->
<Trigger Property="AlternationIndex" Value="0" >
<Setter Property="Background" Value="#e7e7e7" />
</Trigger>
<Trigger Property="AlternationIndex" Value="1" >
<Setter Property="Background" Value="#f2f2f2" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray"/>
<!--<Setter Property="Foreground" Value="White"/>-->
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
<!--单元格样式触发-->
<Style TargetType="DataGridCell" x:Key="DataGridCellStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<TextBlock TextAlignment="Center" VerticalAlignment="Center" >
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>