wpf 中DataGrid 控件的样式设置及使用

本次要实现的效果为：

这个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

这里有几个属性需要说一下

AlternationCount="2" 表示两行交替显示背景色。如果不设置此属性则显示效果为：

wpf 中DataGrid 控件的样式设置及使用

AutoGenerateColumns="False" 表示不让DataGrid自动生成列。如果设置成true，则效果如下：多出了不需要的列

wpf 中DataGrid 控件的样式设置及使用

HeadersVisibility="Column" 设置此属性为只显示列标题单元格，行标题不显示。如果不设置此属性则效果为：

wpf 中DataGrid 控件的样式设置及使用

到此为止还没有真正为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>

<Setter Property="CanUserResizeColumns" Value="false" /> //该属性指示是否允许用户调整列宽度

<Setter.Value>

</Setter.Value>

</Setter>

<Setter.Value>

</Setter.Value>

</Setter>

</Style>

<!--<Style TargetType="DataGridColumnHeader" >

</Style>-->

<Setter.Value>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<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">

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Height"

Value="25" />

</Style>

<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" />

</Trigger>

<Trigger Property="IsSelected"

Value="True">

<Setter Property="Foreground"

Value="Black" />

</Trigger>

</Style.Triggers>

</Style>

<Setter.Value>

<TextBlock TextAlignment="Center"

VerticalAlignment="Center">

</TextBlock>

</ControlTemplate>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsSelected"

Value="True">

<!--<Setter Property="Background" Value="White"/>

<Setter Property="Foreground"

Value="Black" />

</Trigger>

</Style.Triggers>

</Style>

</ResourceDictionary>

</Application.Resources>

</Application>

建议：样式代码比较多，最好是先复制到自己项目中看效果，然后再细看样式的实现。在此，内容已介绍完，如有疑问请留言。

秒客网

wpf 中DataGrid 控件的样式设置及使用

相关文章