WPF入门(四)-WPF+LINQ实现数据绑定、交互及简单datagrid样式

本事例是基于WPF+LINQ实现的，先上效果图：

 

 

要实现这个效果,首先要做的操作肯定是绑定数据，下面是LINQ生成的数据表关系图：

 

 

创建数据上下文

 

WPFDataDataContext db = new WPFDataDataContext(); 

 

在XAML界面,使用了两个控件,ComboBox与DataGrid,下面先实现数据的绑定,通过下拉菜单的选择项绑定对应班级的所有信息，所以应该先实现ComboBox控件的数据绑定：

 

/// <summary> /// 向下拉列表中绑定班级信息 /// </summary> public void ToBindcbClass() { //绑定数据源 cbClass.ItemsSource = db.classic.ToList(); //绑定显示值 cbClass.DisplayMemberPath = "className"; //绑定选中的值 cbClass.SelectedValuePath = "classID"; //默认选中 cbClass.SelectedIndex = 0; }

 

然后通过下拉菜单改变事件绑定DataGrid

 

/// <summary> /// 下拉列表改变事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void cbClass_SelectionChanged(object sender, SelectionChangedEventArgs e) { //重新绑定DataGrid ToBinddgInfo(); } /// <summary> /// 根据班级信息向DataGrid中绑定学生信息 /// </summary> public void ToBinddgInfo() { //获取班级编号 int cid = int.Parse(cbClass.SelectedValue.ToString()); dgInfo.ItemsSource = db.stuInfo.Where(s => s.classID == cid); }

 

XAML需要指定绑定的标题和属性

 

<DataGrid AutoGenerateColumns="False" Height="135" HorizontalAlignment="Left" Margin="12,41,0,0" Name="dgInfo" VerticalAlignment="Top" Width="260" IsReadOnly="True" GridLinesVisibility="All" CanUserResizeColumns="False" Background="White" ColumnWidth="SizeToHeader" SelectionChanged="dgInfo_SelectionChanged" > <DataGrid.Columns> <DataGridTextColumn Binding="{Binding stuName}" Header="姓名" /> <DataGridTextColumn Binding="{Binding stuNo}" Header="学号" /> <DataGridTextColumn Binding="{Binding stuSex}" Header="性别" /> <DataGridTextColumn Binding="{Binding stuAge}" Header="年龄" /> <DataGridTextColumn Binding="{Binding classic.className}" Header="班级" CanUserSort="False"/> </DataGrid.Columns> </DataGrid>

 

 

需要操作DataGrid选中行数据的话,可以做以下操作：

 

 /// <summary> /// 行选择事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void dgInfo_SelectionChanged(object sender, SelectionChangedEventArgs e) { //获取当前选中行的对象 stuInfo stu = dgInfo.CurrentItem as stuInfo; if (stu != null) { //取出主键做对应操作 // MessageBox.Show(stu.stuId.ToString()); } }

 

数据的绑定就出来了,跟以前的winform很类似吧,看下效果：

 

 

确实样式不是很好看,这个时候我们就可以用到Style,Tigger这些来美化我们的控件了

 

我这里做了几个简单的样式效果,标题背景色字体修改、鼠标移动的光棒效果、选中行突出等

 

代码如下

 

<Window.Resources> <Style TargetType="DataGrid"> <!--拖动改变单元格大小--> <Setter Property="CanUserResizeColumns" Value="false"/> <!--网格线颜色--> <Setter Property="HorizontalGridLinesBrush"> <Setter.Value> <SolidColorBrush Color="LightBlue"/> </Setter.Value> </Setter> <Setter Property="VerticalGridLinesBrush"> <Setter.Value> <SolidColorBrush Color="LightBlue"/> </Setter.Value> </Setter> </Style> <!--标题栏样式--> <Style TargetType="DataGridColumnHeader" > <Setter Property="Width" Value="50"/> <Setter Property="FontSize" Value="14" /> <Setter Property="Background" Value="lightBlue" /> <!--加粗--> <Setter Property="FontWeight" Value="Bold"/> </Style> <!--行样式触发--> <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式--> <Style TargetType="DataGridRow"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="BorderBrush" Value="Red" /> <Setter Property="BorderThickness" Value="1" /> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="LightGray"/> </Trigger> </Style.Triggers> </Style> <!--单元格样式触发--> <Style TargetType="DataGridCell"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="White"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Foreground" Value="Red"/> </Trigger> </Style.Triggers> </Style> </Window.Resources>

 

然后一个具有简单样式的DataGrid就展现出来了.

 

效果图见本文开头。