实现摘要列表的全面指南

### 实现摘要列表的全面指南 在开发应用程序时，展示摘要列表是一项常见需求。本文将详细介绍如何使用 `BusyIndicator` 控件、`DataGrid` 控件和 `ListBox` 控件来实现摘要列表的显示、数据检索、列配置、图像显示、数据编辑等功能。 #### 1. BusyIndicator 控件的使用 `BusyIndicator` 控件不仅可以通过动画告知用户有操作正在进行，还能在与服务器通信时自动禁用用户界面的特定区域。以下是其相关特性及使用方法： - **隐藏进度条**：可以通过修改 `BusyIndicator` 控件的 `ProgressBarStyle` 来设置进度条的可见性。示例代码如下： ```xml <controlsToolkit:BusyIndicator.ProgressBarStyle> <Style TargetType="ProgressBar"> <Setter Property="Visibility" Value="Collapsed"/> </Style> </controlsToolkit:BusyIndicator.ProgressBarStyle> ``` - **禁用用户界面区域**：`BusyIndicator` 继承自 `ContentControl`，拥有 `Content` 属性。当 `IsBusy` 属性设置为 `True` 时，其内容区域内的所有控件将被禁用，这是通过在该区域覆盖一个半透明的 `Rectangle` 控件实现的。可以通过 `OverlayStyle` 属性修改该 `Rectangle` 控件的属性。 - **控制显示延迟**：为避免在短时间服务器调用或连续多次服务器调用时 `BusyIndicator` 控件闪烁，可以使用 `DisplayAfter` 属性控制其在显示指示器之前处于忙碌状态的时长，默认值为 0.1 秒。 #### 2. 显示摘要列表 常用的显示摘要列表的控件有 `DataGrid` 控件和 `ListBox` 控件，下面将介绍如何为这两个控件填充数据。 ##### 2.1 从服务器检索数据 `DataGrid` 控件和 `ListBox` 控件都有 `ItemsSource` 属性，可通过为该属性分配对象集合来填充列表。填充方式有基于 XAML 和基于代码两种： - **基于 XAML 的方法**：使用 `ElementName` 绑定将控件的 `ItemsSource` 属性绑定到 `DomainDataSource` 控件的 `Data` 属性。示例代码如下： ```xml <ListBox ItemsSource="{Binding ElementName=productSummaryDDS, Path=Data}" /> ``` - **基于代码的方法**：在代码中直接为控件的 `ItemsSource` 属性分配集合。示例代码如下： ```csharp productsDataGrid.ItemsSource = operation.Entities; ``` 也可以使用更符合 MVVM 模式的方法，将 `ItemsSource` 属性绑定到 `ViewModel` 或代码隐藏文件中的属性。 #### 3. 配置和自定义用于显示数据的控件 虽然 `DataGrid` 控件和 `ListBox` 控件的填充方式相同，但它们的配置和自定义方式有很大差异，下面重点介绍 `DataGrid` 控件的配置和自定义。 ##### 3.1 配置和自定义 DataGrid 控件 配置 `DataGrid` 控件主要是设置要显示的列。如果实体的元数据中包含展示层信息（使用 `Display` 属性），只需将集合分配给 `DataGrid` 的 `ItemsSource` 属性并将 `AutoGenerateColumns` 属性设置为 `True` 即可。若没有这些元数据，则需要手动配置列。 ##### 3.2 配置 DataGrid 列 Silverlight 中的 `DataGrid` 控件有三种不同的列类型： | 列类型 | 描述 | | ---- | ---- | | `DataGridTextColumn` | 摘要列表场景中最常用的列类型。只读模式下在 `TextBlock` 中显示绑定属性值，编辑模式下在 `TextBox` 中显示。 | | `DataGridCheckBoxColumn` | 用于显示布尔值，在只读和编辑模式下都在 `CheckBox` 中显示绑定属性值（只读模式下禁用）。 | | `DataGridTemplateColumn` | 当其他两种列类型不适用时使用。可以通过定义单元格模板（`CellTemplate` 属性）和可选的单元格编辑模板（`CellEditingTemplate` 属性）来自定义列的显示和编辑方式。 | 以下是一个简单的 `DataGrid` 配置示例，包含三种列类型： ```xml <sdk:DataGrid AutoGenerateColumns="False"> <sdk:DataGrid.Columns> <sdk:DataGridTextColumn Binding="{Binding Path=Name}" Header="Name" /> <sdk:DataGridTemplateColumn Header="Qty Available"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Path=QuantityAvailable}" /> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> <sdk:DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <toolkit:NumericUpDown Value="{Binding Path=QuantityAvailable, Mode=TwoWay}" /> </DataTemplate> ```