Silverlight数据绑定与列表控件实战指南

# Silverlight数据绑定与列表控件实战指南 ## 1. 元素到元素绑定 在开发过程中，除了将元素绑定到数据外，还可以直接将元素绑定到其他元素，这能显著提高代码的可读性和效率。绑定到元素的语法与绑定到数据项非常相似，唯一的区别在于绑定中需要指定 `ElementName`，这就如同将 `ItemsSource` 设置为该元素一样。 例如，若要将一个控件的 `IsEnabled` 属性绑定到一个复选框的 `IsChecked` 属性，假设复选框名为 `EnableButton`，绑定语法如下： ```xml IsEnabled="{Binding IsChecked, Mode=OneWay, ElementName=EnableButton}" ``` ### 1.1 操作步骤 下面通过一个简单的示例来演示元素到元素的绑定： 1. **创建项目**：在 Visual Studio 2008 中创建一个新的 Silverlight 应用程序，将项目命名为 `Ch5_ElementBinding`，并让 Visual Studio 创建一个网站项目来托管应用程序。 2. **编辑 XAML 文件**：编辑 `MainPage.xaml` 文件，在根 `Grid` 中添加一个 `StackPanel`。在 `StackPanel` 中放置一个 `ToggleButton` 和一个名为 `EnableButton` 的 `CheckBox`，使 `ToggleButton` 显示在 `CheckBox` 上方。为 `StackPanel` 添加 20 像素的边距，为 `ToggleButton` 和 `CheckBox` 添加 5 像素的边距，以在控件之间添加一些间距。代码如下： ```xml <Grid x:Name="LayoutRoot" Background="White"> <StackPanel Margin="20"> <ToggleButton Margin="5" Content="Click to Toggle" /> <CheckBox x:Name="EnableButton" IsChecked="true" Margin="5" Content="Enable Button" /> </StackPanel> </Grid> ``` 3. **进行绑定**：将 `ToggleButton` 的 `IsEnabled` 属性绑定到 `CheckBox` 的 `IsChecked` 属性。使用单向绑定，并将 `ElementName` 设置为 `EnableButton`。更新后的源代码如下： ```xml <Grid x:Name="LayoutRoot" Background="White"> <StackPanel Margin="20"> <ToggleButton Margin="5" Content="Click to Toggle" IsEnabled="{Binding IsChecked, Mode=OneWay, ElementName=EnableButton}" /> <CheckBox x:Name="EnableButton" IsChecked="true" Margin="5" Content="Enable Button" /> </StackPanel> </Grid> ``` 4. **运行示例**：运行示例，你会看到 `ToggleButton` 处于启用状态。 5. **测试绑定效果**：取消选中 `Enable Button` 复选框，你会看到 `ToggleButton` 不再启用。 ## 2. DataGrid 控件 数据网格类型的控件已经存在很长时间了，对于需要显示大量数据的开发者来说，它一直是首选。Silverlight 提供的 `DataGrid` 控件不仅仅是一个标准的数据网格，它还包含了大量丰富的用户功能，这些功能在过去只有第三方数据网格组件才具备。例如，Silverlight `DataGrid` 可以处理网格列的调整大小和重新排序。 ### 2.1 简单 DataGrid 示例 下面通过一个简单的示例来演示如何构建一个 `DataGrid`： 1. **创建项目**：在 Visual Studio 2008 中创建一个新的 Silverlight 应用程序，将项目命名为 `SimpleDataGrid`，并让 Visual Studio 创建一个托管网站应用程序。 2. **添加 DataGrid**：将 `DataGrid` 添加到应用程序中。在 XAML 的根 `Grid` 中添加 `DataGrid`，并将 `Margin` 属性设置为 10，以在网格周围添加一些间距。同时，给 `DataGrid` 命名为 `grid`。默认情况下，`Grid` 的 `AutoGenerateColumns` 属性设置为 `true`。如果要手动定义列，则需要将此属性设置为 `false`。由于这里希望网格自动创建列，因此可以省略该属性。`DataGrid` 定义如下： ```xml <Grid x:Name="LayoutRoot" Background="White"> <data:DataGrid x:Name="grid" Margin="10" /> </Grid> ``` 3. **构建绑定类**：构建一个将绑定到 `DataGrid` 的类，为了简单起见，将该类命名为 `GridData`，并为其提供三个属性：`Name`（字符串类型）、`Age`（整数类型）和 `Male`（布尔类型）。同时，创建一个静态方法，该方法将返回一个包含一些示例数据的 `ObservableCollection`，这些数据将绑定到网格。将该类直接定义在 `MainPage.xaml.cs` 文件中。代码如下： ```csharp namespace SimpleDataGrid { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } } public class GridData { public string Name { get; set; } public int Age { get; set; } public bool Male { get; set; } public static ObservableCollection<GridData> GetData() { ObservableCollection<GridData> data = new ObservableCollection<GridData>(); data.Add(new GridData() { Name = "John Doe", Age = 30, Male = true }); data.Add(new GridData() { Name = "Jane Doe", Age = 32, Male = false}); data.Add(new GridData() { Name = "Jason Smith", Age = 54, Male = true }); data.Add(new GridData() { Name = "Kayli Jayne", Age = 25, Male = false }); return data; } } } ``` 4. **创建事件处理程序**：为页面的 `Loaded` 事件创建一个事件处理程序： ```csharp public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded); } void Page_Loaded(object sender, RoutedEventArgs e) { } } ``` 5. **绑定数据**：当页面加载时，调用 `GridData` 类的 `GetData()` 方法，并将其绑定到 `DataGrid` 的 `ItemsSource` 属性： ```csharp public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded); } void Page_Loaded(object sender, RoutedEventArgs e) { this.grid.ItemsSource = GridData.GetData(); } } ``` 6. **运行应用程序**：构建并运行应用程序，如果一切正常，你应该会看到 `DataGrid` 显示出来。 ### 2.2 DataGrid 功能探索 运行上述示例后，可以对 `DataGrid` 的一些功能进行探索： - **排序功能**：点击任何列标题，你会发现排序功能自动可用。 - **调整列大小**：将光标放在某一列的边缘，使用鼠标点击并拖动列的边缘来调整列的大小。 - **重新排序列**：点击并按住某一列标题，然后向左或向右拖动到另一列标题的边缘，你会看到一个小红三角形出现在列上方。当小红三角形位于你想要的位置时，释放鼠标，你会看到该列现在出现在 `DataGrid` 中的新位置。 ### 2.3 DataGrid 列集合 在前面的示例中，允许 `DataGrid` 根据绑定的数据自动生成列。但如果想要对 `DataGrid` 中创建的列有更多的控制，或者想要添加包含更复杂信息（如图像）的列，可以通过以下步骤实现： 1. 将 `AutoGenerateColumns` 属性设置为 `false`。 2. 手动生成列。 在 `DataGrid` 中使用 `Columns` 集合来定义列。以下是在 XAML 中设置 `Columns` 集合的示例： ```xml <my:DataGrid x:Name="grid" Margin="10" AutoGenerateColumns="False"> <my:DataGrid.Columns> </my:DataGrid.Columns> </my:DataGrid> ``` ### 2.4 列类型 `Columns` 集合中可以包含三种类型的列： | 列类型 | 描述 | | ---- | ---- | | `DataGridTextColumn` | 用于定义网格中的纯文本列，相当于 ASP.NET `DataGrid` 中的 `BoundColumn`。主要可设置的属性有 `Header`（定义列标题显示的文本）和 `DisplayMemberBinding`（定义绑定到列的数据源中的属性）。 | | `DataGridCheckBoxColumn` | 包含一个复选框。如果要在网格中以复选框形式显示数据，可使用此控件。 | | `DataGridTemplateColumn` | 当网格列中的数据既不是纯文本也不是复选框时，可使用此列来定义列的内容。它包