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就展现出来了.

效果图见本文开头。