本次要实现的效果为：
这个DataGrid需要绑定一个集合对象，所以要先定义一个Experience类，包含三个字段
/// <summary>
/// 定义工作经历类
/// </summary>
public class Experience
{
/// <summary>
/// 获取或设置工作的起始时间
/// </summary>
public string Start { get; set; }
/// <summary>
/// 获取或设置工作的结束时间
/// </summary>
public string End { get; set; }
/// <summary>
/// 获取或设置工作地点
/// </summary>
public string Location { get; set; }
}
接下来在 Window_Loaded(object sender, RoutedEventArgs e) 时间中设置DataGrid的数据源
private void Window_Loaded(object sender, RoutedEventArgs e)
{
List<Experience> list = new List<Experience>()
{
new Experience(){ Start="1990-01-01", End="1991-01-01", Location="北京"},
new Experience(){ Start="1991-01-01", End="1992-01-01", Location="郑州"},
new Experience(){ Start="1992-01-01", End="1993-01-01", Location="上海"},
new Experience(){ Start="1993-01-01", End="1994-01-01", Location="洛阳"},
new Experience(){ Start="1994-01-01", End="1995-01-01", Location="天津"},
new Experience(){ Start="1995-01-01", End="1996-01-01", Location="大连"},
};
//把XAML中DataGrid的ItemSource绑定到List对象上去
this.grid_user.ItemsSource = list;
}接下来看一下XAML中是怎样创建DataGrid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition />
</Grid.RowDefinitions>
<Label Background="#82c772"
Content="个人经历"
Padding="20,5,0,0"
FontSize="14"
Foreground="White" />
<DataGrid Name="grid_saffer"
Grid.Row="1"
IsReadOnly="True"
AlternationCount="2"
AutoGenerateColumns="true" >
<DataGrid.Columns>
<DataGridTextColumn Header="开始时间"
Width="1*"
Binding="{Binding start}" />
<DataGridTextColumn Header="结束时间"
Width="1*"
Binding="{Binding end}" />
<DataGridTextColumn Header="地点"
Width="1*"
Binding="{Binding location}" />
</DataGrid.Columns>
</DataGrid>
</Grid>这里有几个属性需要说一下
AlternationCount="2" 表示两行交替显示背景色。如果不设置此属性则显示效果为：
AutoGenerateColumns="False" 表示不让DataGrid自动生成列。如果设置成true，则效果如下： 多出了不需要的列
HeadersVisibility="Column" 设置此属性为只显示列标题单元格，行标题不显示。如果不设置此属性则效果为：
到此为止还没有真正为DataGrid添加任何样式，接下来展示样式代码
<Application x:Class="ListviewStyle.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:location="clr-namespace:ListviewStyle" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="DataGrid"> <!--网格线颜色--> <Setter Property="CanUserResizeColumns" Value="false" /> //该属性指示是否允许用户调整列宽度 <Setter Property="Background" Value="#E6DBBB" /> <Setter Property="BorderBrush" Value="#d6c79b" /> <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" > <Setter Property="Width" Value="50"/> <Setter Property="Height" Value="30"/> <Setter Property="FontSize" Value="14" /> <Setter Property="Background" Value="White" /> <Setter Property="FontWeight" Value="Bold"/> </Style>--> <Style TargetType="DataGridColumnHeader"> <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" /> <!--<TextBlock Background="Red"> <ContentPresenter></ContentPresenter></TextBlock>--> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Height" Value="25" /> </Style> <!--行样式触发--> <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式--> <Style TargetType="DataGridRow"> <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="#fbe178" /> <!--<Setter Property="Foreground" Value="White"/>--> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter Property="Foreground" Value="Black" /> </Trigger> </Style.Triggers> </Style> <!--单元格样式触发--> <Style TargetType="DataGridCell"> <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="Background" Value="White"/> <Setter Property="BorderThickness" Value="0"/>--> <Setter Property="Foreground" Value="Black" /> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> </Application.Resources> </Application>
建议：样式代码比较多，最好是先复制到自己项目中看效果，然后再细看样式的实现。 在此，内容已介绍完，如有疑问请留言。
评论回复