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

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

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

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

时间： 2024-10-20 04:06:29

wpf 中DataGrid 控件的样式设置及使用的相关文章

winform中DataGrid控件的宽度设置

最近修改一个win5.0的PDA程式,碰到一个问题.就是给DataGrid控件绑定数据的时候,这个控件的宽度不能调整,有时候数据较长,就显示不全.然后想在程式里自定义它的宽度,设置不成功.然后网上没找到合适的方法去设置它的宽度.最后从同事LYL那里得到解决方法 设置数据源: this.dataGrid1.DataSource = ds.Tables[1].DefaultView; 在这之前给DataGrid控件添加表样式,代码如下: DataGridTableStyle h = new Data

WPF中Datagrid控件添加行号

1 /// <summary> 2 /// 导入Excel文件按钮 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 private void InputExcelFile_Click(object sender, RoutedEventArgs e) 7 { 8 //将数据

WPF中Ribbon控件的使用

这篇博客将分享如何在WPF程序中使用Ribbon控件.Ribbon可以很大的提高软件的便捷性. 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可以找到想要的Menu.在Outlook 2003时代,将Home下面的Menu都垂直的排列下来,操作的便捷程度降低了很多.Ribbon的布局会随着窗体的变化动态的调整. 上面的图片中标注了Ribbon的4个区块. 下面我们就在WPF中使用Ribbon控件来实现一个简单的界面. 1. 添加System

WPF中查找控件的扩展类

在wpf中查找控件要用到VisualTreeHelper类,但这个类并没有按照名字查找控件的方法,于是搜索网络,整理出下面这个类,感觉用起来很是方便. 贴出来,供大家参考. /// <summary> /// WPF/Silverlight 查找控件扩展方法 /// </summary> public static class VisualHelperTreeExtension { /// <summary> /// 根据控件名称,查找父控件 /// elementNa

WPF 动态添加控件以及样式字典的引用(Style introduction)

原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的对象就可以了. 下面是Ui,其中定义了一个WrapPanel来存放CheckBox,还有两个按钮,用于测试相关功能. <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c

WPF中窗口控件的跨线程调用

原文:WPF中窗口控件的跨线程调用 在WinForm中,我们要跨线程访问窗口控件,只需要设置属性CheckForIllegalCrossThreadCalls = false;即可. 在WPF中要麻烦一下,同样的不允许跨线程访问,因为没有权限,访问了会抛异常: 没有CheckForIllegalCrossThreadCalls 属性,怎么办? 在WPF中的窗口控件都有一个Dispatcher属性,允许访问控件的线程:既然不允许直接访问,就告诉控件我们要干什么就好了. 方法如下: private

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

wpf中手风琴控件Accordion编辑模板后控件不正常。

昨天有个网友Accordion控件从sl迁移到wpf时候显示不正常.也是就没有效果. 我也是sl做的比较多,wpf玩的少,Accordion模板里触发器,状态组调了一早上都没达到满意效果, 无奈只有百度,发现了老外一个Accordion模板的例子http://blogs.u2u.be/diederik/post/2010/02/20/How-to-play-the-Accordion-WPF-Toolkit.aspx .向我项目里迁移的时候发现,居然不生效!!!! 最后一一对比发现我项目里有sy

easyui 中Datagrid 控件在列较多且无数据时，列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"