Silverlight系列（3）Silverlight中的数据访问

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());

        }

转自：http://www.hdaccp.com/new.aspx?id=383