3.1 数据绑定
在Silverlight中进行数据绑定需要使用Binding类，在该类中提供了OneTime、OneWay、TwoWay三个属性，这三个属性指定数据源与目标的互动方式。
首先创建一个Student类：
public class Student
{
public string Name { get; set; }
public int Age { get; set; }
public string Sex { get; set; }
public string Address { get; set; }
}
XAML代码如下：
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="154*" />
<ColumnDefinition Width="246*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*" />
<RowDefinition Height="40*" />
<RowDefinition Height="40*" />
<RowDefinition Height="40*" />
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<TextBlock Height="33" HorizontalAlignment="Left" Margin="60,12,0,0" Name="textBlock1" Text="姓名：" VerticalAlignment="Top" FontSize="20" Width="60" FontStretch="Normal" />
<TextBlock FontSize="20" Height="33" HorizontalAlignment="Left" Margin="60,17,0,0" Name="textBlock2" Text="年龄：" VerticalAlignment="Top" Width="60" Grid.Row="1" />
<TextBlock FontSize="20" Height="33" HorizontalAlignment="Left" Margin="60,27,0,0" Name="textBlock3" Text="性别：" VerticalAlignment="Top" Width="60" Grid.Row="2" />
<TextBlock FontSize="20" Height="33" HorizontalAlignment="Left" Margin="60,18,0,0" Name="textBlock4" Text="地址：" VerticalAlignment="Top" Width="60" Grid.Row="3" />
<TextBox Grid.Column="1" Height="23" Text="{Binding Name,Mode=OneTime}" HorizontalAlignment="Left" Margin="27,18,0,0" Name="txtName" VerticalAlignment="Top" Width="120" />
<TextBox Height="23" Text="{Binding Age,Mode=OneTime}" HorizontalAlignment="Left" Margin="27,17,0,0" Name="txtAge" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="1" />
<TextBox Height="23" Text="{Binding Sex,Mode=OneTime}" HorizontalAlignment="Left" Margin="27,27,0,0" Name="txtSex" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="2" />
<TextBox Height="23" Text="{Binding Address,Mode=OneTime}" HorizontalAlignment="Left" Margin="27,18,0,0" Name="txtAddress" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="3" />
<Button Content="保存" Grid.ColumnSpan="2" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="142,25,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
CS代码如下：
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
Student stu = new Student
{
Name="张三",
Age=20,
Sex="男",
Address="河北邯郸"
};
this.txtName.DataContext = stu;
this.txtAge.DataContext = stu;
this.txtSex.DataContext = stu;
this.txtAddress.DataContext = stu;
}
运行效果如下：
3.1.1 OneTime
这种绑定方式是单向的，仅用了做一次显示，上述示例中就用了这种方式。
3.1.2 OneWay
这种方式的绑定控件的值会随着数据源的变化而变化。但控件值发生变化，数据源不会随之变化
修改XAML：Text="{Binding Name,Mode=OneWay}"
修改Student类，引入命名空间 System.ComponentModel，并实现INotifyPropertyChanged接口，代码如下：
public class Student :INotifyPropertyChanged
{
private string name;
public string Name {
get
{
return name;
}
set
{
name = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Name"));
}
}
}
public int Age { get; set; }
public string Sex { get; set; }
public string Address { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
}
“保存”按钮的点击事件如下：
private void btnSave_Click(object sender, RoutedEventArgs e)
{
stu.Name = "李四";
}
当Stu对象的属性发生改变时，txtName的Text属性也随之发生变化
3.1.3 TwoWay
Text="{Binding Name,Mode=TwoWay}"
“保存”按钮的点击事件如下：
private void btnSave_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(stu.Name);
}
修改文本框中的内容时，弹出窗口也会发生变化。
3.2 Combobox控件
Silverlight的ComboBox与winform中的ComboBox存在类似的地方，但也有不同之处，本章包含以下内容:
一、ComboBox 如何添加和绑定数据。
二、ComboBox 如何添加自定义Item。
三、ComboBox 如何取得所选项的值。
首先我们在页面添加4个ComboBox分别用不同的形式进行绑定。
<ComboBox Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="comboBox" VerticalAlignment="Top" Width="165" SelectionChanged="comboBox_SelectionChanged" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,65,0,0" Name="comboBox1" VerticalAlignment="Top" Width="161" />
<ComboBox Height="27" HorizontalAlignment="Left" Margin="12,123,0,0" Name="comboBox2" VerticalAlignment="Top" Width="163" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,180,0,0" Name="comboBox3" VerticalAlignment="Top" Width="165" SelectionChanged="comboBox3_SelectionChanged" />
接下来，我们先介绍添加和绑定数据的方法。
如何添加和绑定数据:
this.comboBox.Items.Add("武汉");
this.comboBox.Items.Add("大连");
this.comboBox.Items.Add("苏州");
上面的代码用最简单的方法添加了3个string类型的对象到comboBox中，运行后效果如下:
对于自定义的数据类型我们可以用下面的方法进行绑定:
第一步:定义数据对象
public class MyData
{
public DateTime Time { get; set; }
public string Place{ get; set; }
}
第二步:填充数据，并进行绑定:
List<MyData> list = new List<MyData>
{
new MyData{Time =DateTime.Now.AddDays(1),Place="中山路"},
new MyData{Time =DateTime.Now.AddDays(2),Place="光谷高新"}
};
this.comboBox3.DisplayMemberPath = "Place";
this.comboBox3.ItemsSource = list;
我们通过设置this.comboBox3.DisplayMemberPath = "Place" 来定义显示哪个字段。运行效果如下图:
是不是很简单呢，那么接下来我们介绍一下如何进行自定义Item的添加。
如何添加自定义Item:
要添加自定义Item我们就需要用到ComboBoxItem对象。
ComboBoxItem cbiRight = new ComboBoxItem();
cbiRight.Background = new SolidColorBrush(Colors.Yellow);
cbiRight.HorizontalContentAlignment = HorizontalAlignment.Right;
cbiRight.SetValue(ComboBoxItem.ContentProperty, "上海");
ComboBoxItem cbiCenter = new ComboBoxItem();
cbiCenter.Background = new SolidColorBrush(Colors.Cyan);
cbiCenter.HorizontalContentAlignment = HorizontalAlignment.Center;
cbiCenter.SetValue(ComboBoxItem.ContentProperty, "北京");
ComboBoxItem cbiLeft = new ComboBoxItem();
cbiLeft.Background = new SolidColorBrush(Colors.LightGray);
cbiLeft.HorizontalContentAlignment = HorizontalAlignment.Left;
cbiLeft.SetValue(ComboBoxItem.ContentProperty, "深圳");
在上面的代码中，我们分别对3个ComboBoxItem对象设置了背景色、对齐方式和值，剩下要做的只需要将这些对象添加到ComboBox中即可。
this.comboBox1.Items.Add(cbiRight);
this.comboBox1.Items.Add(cbiCenter);
this.comboBox1.Items.Add(cbiLeft);
运行效果如下:
在某些情况下我们需要显示更复杂的效果，比如在下拉框中显示图片，那这样的需求应该如何处理呢？看看后面的代码就知道了。
既然我们需要显示图片，那么我们就先定义一个Image图片对象，然后我们在定义一个Label进行文字显示。
Image img = new Image();
img.Source = new BitmapImage(new Uri("0.jpg",UriKind .Relative));
Label lbl = new Label();
lbl.Content = "带图片的选项";
然后我们需要用一个容器装载这两个对象，这里我们使用的是StackPanel。
StackPanel sp = new StackPanel();
sp.Orientation = Orientation.Horizontal;
sp.Children.Add(img);
sp.Children.Add(lbl);
在这里可以看到我们在设置StackPanel的方向时选择的是 Orientation.Horizontal，就表示我们添加的两个对象会水平的显示在下拉框中。
最后一步就是把这个容器加载到我们的ComboBox中。
ComboBoxItem multipleCmb = new ComboBoxItem();
multipleCmb.Content = sp;
this.comboBox2.Items.Add(multipleCmb);
运行结果如下，我们可以看到图片和文字同时现实在一个选择项内。
现在我们已经用不同的方法把数据添加到ComboBox中了，接下来的问题就是如何取得所选项的值。
如何取得所选项的值:
一般情况下有两种方式进行取值代码如下:
private void comboBox3_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MyData md = (sender as ComboBox).SelectedItem as MyData;
DateTime selectedDateTime = md.Time;
string selectedPlace = md.Place;
MyData md2 = comboBox3.SelectedValue as MyData;
DateTime selectedDateTime2 = md2.Time;
string selectedPlace2 = md2.Place;
}
这里的 MyData 是我们在前面自定义的数据类型，当我们在SelectionChanged事件中进行取值时，可分别对SelectedItem和SelectedValue进行操作,我们只需要将它们显示的转换成正确的数据类型即可。
3.3 DataGrid控件
Silverlight DataGrid常用事件
BeginningEdit：发生于一个单元格或行进入编辑模式之前。
CellEditEnded：发生于一个单元格编辑已被确认或取消。
CellEditEnding：发生于一个单元格正在结束编辑时。
CurrentCellChanged：发生于一个单元格成为当前单元格时。
PreparingCellForEdit：发生于在DataGridTemplateColumn下的单元格进入编辑模式时。
SelectionChanged：发生于当SelectedItem或SelectedItems属性值改变时。
Silverlight DataGrid常用方法：
BeginEdit：使DataGrid进入编辑状态。
CancelEdit：取消DataGrid的编辑状态。
CollapseRowGroup：闭合DataGrid的行分组。
CommitEdit：确认DataGrid的编辑完成。
ExpandRowGroup：展开DataGrid的行分组。
GetGroupFromItem：从具体Item中得到分组。
ScrollIntoView：滚动DataGrid视图。
Silverlight DataGrid常用属性：
AlternatingRowBackground：获取或设置一个笔刷用来描绘DataGrid奇数行的背景。
AreRowDetailsFrozen：获取或设置一个值用来判断是否冻结每行内容的详细信息。
AreRowGroupHeadersFrozen：获取或设置一个值用来判断是否冻结分组行的头部。
AutoGenerateColumns：获取或设置一个值用来判断是否允许自动生成表列。
CanUserReorderColumns：获取或设置一个值用来判断是否允许用户重新排列表列的位置。
CanUserSortColumns：获取或设置一个值用来判断是否允许用户按列对表中内容进行排序。
CellStyle：获取或设置单元格的样式。
ColumnHeaderHeight：获取或设置列头的高度。
ColumnHeaderStyle：获取或设置列头的样式。
Columns：获取组件中包含所有列的集合。
ColumnWidth：获取或设置列宽。
CurrentColumn：获取或设置包含当前单元格的列。
CurrentItem：获取包含当前单元格且与行绑定的数据项。
DragIndicatorStyle：获取或设置当拖曳列头时的样式。
DropLocationIndicatorStyle：获取或设置呈现列头时的样式。
FrozenColumnCount：获取或设置冻结列的个数。
GridLinesVisibility：获取或设置网格线的显示形式。
HeadersVisibility：获取或设置行头及列头的显示形式。
HorizontalGridLinesBrush：获取或设置水平网格线的笔刷。
HorizontalScrollBarVisibility：获取或设置水平滚动条的显示样式。
IsReadOnly：获取或设置DataGrid是否为只读。
MaxColumnWidth：获取或设置DataGrid的最大列宽。
MinColumnWidth：获取或设置DataGrid的最小列宽。
RowBackground：获取或设置用于填充行背景的笔刷。
RowDetailsTemplate：获取或设置被用于显示行详细部分的内容的模板。
RowDetailsVisibilityMode：获取或设置一个值用以判定行详细部分是否显示。
RowGroupHeaderStyles：获取呈现行分组头部的样式。
RowHeaderStyle：获取或设置呈现行头的样式。
RowHeaderWidth：获取或设置行头的宽度。
RowHeight：获取或设置每行的高度。
RowStyle：获取或设置呈现行时的样式。
SelectedIndex：获取或设置当前选中部分的索引值。
SelectedItem：获取或设置与当前被选中行绑定的数据项。
SelectedItems：获取与当前被选中的各行绑定的数据项们的列表(List)。
SelectionMode：获取或设置DataGrid的选取模式。
VerticalGridLinesBrush：获取或设置垂直网格线的笔刷。
VerticalScrollBarVisibility：获取或设置垂直滚动条的显示样式。
示例：
XAML代码：
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<data:DataGrid AutoGenerateColumns="False" Height="199" HorizontalAlignment="Left" Margin="32,58,0,0" Name="dgStudent" VerticalAlignment="Top" Width="342" DataContext="{Binding}" SelectionMode="Single">
<data:DataGrid.Columns>
<data:DataGridTextColumn Binding="{Binding Name}" Header="姓名" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" />
<data:DataGridTextColumn Binding="{Binding Age}" Header="年龄" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" />
<data:DataGridTextColumn Binding="{Binding Sex}" Header="性别" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" />
<data:DataGridTextColumn Binding="{Binding Address}" Header="地址" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" />
<data:DataGridTemplateColumn CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="操作" Width="Auto">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="选择" Click="btnSelect_Click" Name="btnSelect"></Button>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
后台代码：
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
List<Student> stus = new List<Student>
{
new Student{ Name="张三", Age=20, Sex="男", Address="河北邯郸"},
new Student{ Name="张三", Age=18, Sex="男", Address="河北邯郸"}
};
dgStudent.ItemsSource = stus;
}
private void btnSelect_Click(object sender, RoutedEventArgs e)
{
Student stu = dgStudent.SelectedItem as Student;
MessageBox.Show(stu.Age.ToString());
}
