超级会员免费看
Blend数据绑定技术全解析
1. 运行时操作集合
自定义的
PurchaseOrders
集合继承自
ObservableCollection
类。这个集合有个独特的能力，当集合内容发生变化（添加、移除或更新项目）时，能自动刷新UI数据绑定。
操作步骤如下：
1. 在窗口设计界面添加一个新的
Button
控件，并通过属性窗口处理其
Click
事件。
2. 当首次定义对象数据源时，IDE会在主窗口添加一个名为
PurchaseOrdersDataSource
的对象资源，它对应
PurchaseOrders
集合的一个实例。运行应用程序时，会使用默认构造函数创建集合对象。
3. 若要访问该类的实例，只需在资源容器中通过键名定位该项目。以下是添加新
PurchaseOrder
对象到集合的
Click
事件处理程序示例：
private void btnAddNewObject_Click(object sender, System.Windows.RoutedEventArgs e)
{
// 首先，获取对象资源
PurchaseOrders myOrders = (PurchaseOrders)this.Resources["PurchaseOrdersDataSource"];
// 生成数值属性的随机值
Random r = new Random();
int amount = r.Next(50);
double cost = r.NextDouble();
// 最后，添加新的随机测试项
myOrders.Add(new PurchaseOrder(amount, cost, "TEST ITEM!"));
}
运行应用程序并多次点击按钮，会发现
ListBox
和
DataGrid
对象会自动更新。
2. 使用数据模板
接下来的示例将复用
PurchaseOrder
和
PurchaseOrders
类，展示如何使用Blend创建自定义数据模板。
操作步骤如下：
1. 创建一个名为
FunWithDataTemplates
的新WPF应用程序项目。
2. 使用
Project ➤ Add Existing Item
复制包含业务对象和自定义集合的C#文件。
3. 确保项目已构建，创建一个新的对象数据源连接到
PurchaseOrders
对象，将
PurchaseOrders
节点从数据面板拖到窗口设计界面。此时会看到默认的数据模板显示效果。IDE生成的默认数据模板如下：
<DataTemplate x:Key="PurchaseOrderTemplate">
<StackPanel>
<TextBlock Text="{Binding Amount}"/>
<TextBlock Text="{Binding Description}"/>
<TextBlock Text="{Binding TotalCost}"/>
</StackPanel>
</DataTemplate>
3. 编辑数据模板
若要修改默认数据模板，可按以下步骤操作：
1. 打开资源面板，按名称定位模板，点击“编辑资源”按钮进行编辑。
2. 定位“对象和时间线”面板，选择第一个
TextBlock
。
4. 为数据模板中的项目设置样式
此时可使用属性面板更改设置，为
TextBlock
中
Amount
属性的显示样式进行设置。例如，将
Foreground
属性改为新的颜色值，调整字体设置。示例配置如下：
<TextBlock Text="{Binding Amount}" Foreground="#FFE91616" FontWeight="Bold" FontSize="18.667"/>
运行程序，会看到每个
Amount
属性的显示更有趣。
5. 为数据模板定义复合UI元素
仅添加颜色还不够，对象属性仍不够清晰。可按以下步骤优化：
1. 回到“对象和时间线”面板，再次选择第一个
TextBlock
，右键点击并选择“分组到 ➤ StackPanel”，将其分组到新的嵌套
StackPanel
中。
2. 设置新
StackPanel
的
Orientation
属性为
Horizontal
。
3. 在现有
TextBlock
上方添加一个新的
Label
控件，设置其
Content
属性为
Amount
。
4. 调整布局，将新
Label
的
Width
属性设置为70。
对数据模板中其余两个
TextBlock
控件也进行类似操作。最终的XAML代码示例如下：
<DataTemplate x:Key="PurchaseOrderTemplate">
<StackPanel>
<StackPanel Orientation="Horizontal" >
<Label Width="70" Content="Amount" BorderBrush="#FF309914" FontWeight="Bold" FontStyle="Italic"/>
<TextBlock Text="{Binding Amount}" Foreground="#FFE91616" FontWeight="Bold" FontSize="18.667" d:LayoutOverrides="Width"/>
</StackPanel>
<StackPanel Orientation="Horizontal" >
<Label Width="70" Content="Cost" FontWeight="Bold" FontStyle="Italic"/>
<TextBlock Text="{Binding TotalCost}" Foreground="#FF1031E7" FontWeight="Bold" FontSize="18.667" d:LayoutOverrides="Width"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<ed:BlockArrow Fill="#FF5A5AC2" Height="11" Orientation="Right" Stroke="#FF1030E4" Width="15" StrokeThickness="2"/>
<TextBlock Text="{Binding Description}" d:LayoutOverrides="Width" Foreground="#FFAD11DE"/>
</StackPanel>
</StackPanel>
</DataTemplate>
编辑数据模板时，可点击“对象和时间线”面板中的“返回窗口/用户控件范围”按钮回到窗口设计界面。运行应用程序，可在样式化的列表框数据显示中选择特定项目。
6. 创建包含数据模板的控件模板
若要为数据模板添加交互性，可按以下步骤操作：
1. 右键点击当前使用数据模板的控件（如
ListBox
），在“编辑其他模板”菜单选项中，选择编辑“生成的项目容器”的副本。
2. 在“创建样式资源”对话框中，将样式命名为
myListStyle
，并保存为窗口级资源。
7. 为模板添加交互性
-
查看“对象和时间线”面板，选择内部的
<ContentPresenter>节点。 -
打开“状态”面板，选择
Selected状态激活状态编辑器。 -
对
<ContentPresenter>进行修改，如将X和Y缩放比例设置为0.85。 -
添加弹跳效果：
-
在“状态”面板中为
Selected状态添加新的过渡。 - 使用相关动画缓动编辑器添加喜欢的弹跳效果。
- 设置动画的持续时间，如设置为1秒。
-
在“状态”面板中为
运行应用程序并选择列表中的项目，会看到数据模板定义的复合项目有弹跳效果。
8. 定义WPF XML数据源
.NET平台支持多种以编程方式操作XML数据的方法，如
System.Xml
命名空间和LINQ to XML API。Blend IDE提供了一种将UI元素绑定到XML文档数据的方法。
操作步骤如下：
1. 创建一个名为
WpfXmlDataBinding
的新WPF应用程序项目。
2. 若有想操作的XML文档，可使用该文件；示例使用以下
Inventory.xml
文件：
<?xml version="1.0" encoding="utf-8"?>
<Inventory>
<Product ProductID ="0">
<Cost>5.00</Cost>
<Description>Eight Times the sugar and twice the caffeine</Description>
<Name>Super Spazz Soda Pop</Name>
<HotItem>true</HotItem>
</Product>
<Product ProductID ="1">
<Cost>10.00</Cost>
<Description>A soothing night time cookie</Description>
<Name>Sleepy Time Cookies</Name>
<HotItem>true</HotItem>
</Product>
<Product ProductID ="2">
<Cost>15.00</Cost>
<Description>It's Tofu, what can you say?</Description>
<Name>Joe's Tofu</Name>
<HotItem>false</HotItem>
</Product>
</Inventory>
-
使用
Project ➤ Add Existing Item将文件插入项目。 -
打开
MainWindow.xaml在设计界面，定位数据面板，选择添加新的XML数据源。 -
在“创建XML数据源”对话框中，浏览选择XML文档，将新的XML数据源命名为
InventoryXmlDataStore，并将对象资源存储在当前文档中。 -
点击“确定”按钮，此时数据面板会显示XML数据源。查看
MainWindow.xaml的XAML数据，会发现定义了一个新的XmlDataProvider类型的资源：
<Window.Resources>
<XmlDataProvider x:Key="InventoryDataSource" Source="\Inventory.xml" d:IsDataSource="True"/>
</Window.Resources>
9. 通过XPath将XML数据绑定到UI元素
建立XML数据源后，可将数据面板中的节点拖到设计界面。
- 若将整个
Product
节点拖到设计界面，IDE会生成一个
ListBox
，显示每个XML元素的所有数据。其
ItemsSource
属性使用XPath表达式绑定到
<Products>
节点：
<ListBox HorizontalAlignment="Left" ItemTemplate="{DynamicResource ProductTemplate}" ItemsSource="{Binding XPath=/Inventory/Product}" Margin="89,65,0,77" Width="200"/>
生成的模板使用额外的XPath表达式连接
<Product>
节点的各种属性和子节点：
<DataTemplate x:Key="ProductTemplate">
<StackPanel>
<TextBlock Text="{Binding XPath=@ProductID}"/>
<TextBlock Text="{Binding XPath=Cost}"/>
<TextBlock Text="{Binding XPath=Description}"/>
<CheckBox IsChecked="{Binding XPath=HotItem}"/>
<TextBlock Text="{Binding XPath=Name}"/>
</StackPanel>
</DataTemplate>
-
也可将单个属性（如
ProductID）或子节点（Cost、Description等）直接拖到设计界面，生成只显示该子集数据的ListBox控件。例如，将HotItem节点拖到设计界面，IDE会生成一个新的ListBox控件和相关数据模板：
<!-- The ListBox -->
<ListBox HorizontalAlignment="Right" ItemTemplate="{DynamicResource ProductTemplate1}" ItemsSource="{Binding XPath=/Inventory/Product}" Margin="0,78,54,64" Width="200"/>
<!-- The data template-->
<DataTemplate x:Key="ProductTemplate1">
<StackPanel>
<CheckBox IsChecked="{Binding XPath=HotItem}"/>
</StackPanel>
</DataTemplate>
可使用前面介绍的技术修改这些数据模板。
10. 创建列表详细信息数据绑定
数据面板有列表模式和详细信息模式。点击详细信息模式按钮后，将单个属性从数据面板拖到设计界面时，数据值会被捕获到
TextBlock
控件中；将父节点拖到设计界面，IDE会生成允许循环查看所选项目“详细信息”的标记。
操作步骤如下：
1. 创建一个名为
ListDetailsDataBinding
的新WPF（或Silverlight）应用程序项目。
2. 向项目中添加包含
PurchaseOrder
和
PurchaseOrders
类的C#文件，构建项目，使用数据面板定义一个新的对象数据源，映射到自定义的
PurchaseOrders
类。
3. 确保数据面板处于默认的列表模式，将
Description
节点拖到设计界面生成一个
ListBox
，显示每个项目的文本描述。
4. 点击数据面板的详细信息模式按钮，使用
Shift+click
操作选择
Amount
、
Description
和
TotalCost
三个属性。
5. 将这些属性拖到设计界面，IDE会生成一个包含一组相关
TextBlock
控件的
Grid
对象。
通过以上这些操作和示例，展示了多种自定义数据绑定操作外观和交互性的方法，希望能帮助你更熟练地使用Blend IDE来定制数据绑定操作的显示效果。
Blend数据绑定技术全解析
11. 数据绑定操作总结与对比
为了更清晰地理解不同数据绑定操作的特点和适用场景，下面对前面介绍的几种数据绑定方式进行总结和对比。
| 绑定方式 | 操作对象 | 主要特点 | 适用场景 |
|---|---|---|---|
| 运行时操作集合 |
自定义的
PurchaseOrders
集合
|
利用
ObservableCollection
的特性，当集合内容变化时自动刷新UI绑定
| 需要动态更新集合数据并实时显示在UI上的场景 |
| 使用数据模板 |
PurchaseOrder
和
PurchaseOrders
类
| 可以自定义数据的显示样式，提高UI的美观度和可读性 | 需要对数据显示进行个性化设计的场景 |
| 定义WPF XML数据源 | XML文档 | 通过XPath将XML数据绑定到UI元素，方便处理XML格式的数据 | 处理XML数据并在UI上展示的场景 |
| 创建列表详细信息数据绑定 | 数据面板的不同模式 | 可以在列表模式和详细信息模式之间切换，灵活展示数据 | 需要根据不同需求展示数据详情或列表的场景 |
12. 数据绑定流程梳理
下面是一个mermaid格式的流程图，展示了从创建数据源到完成数据绑定并添加交互性的整体流程：
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;
A([开始]):::startend --> B(创建项目):::process
B --> C{选择数据源类型}:::decision
C -->|对象数据源| D(定义对象数据源):::process
C -->|XML数据源| E(定义XML数据源):::process
D --> F(创建数据模板):::process
E --> F
F --> G(编辑数据模板样式):::process
G --> H(创建包含数据模板的控件模板):::process
H --> I(为模板添加交互性):::process
I --> J([结束]):::startend
13. 注意事项和常见问题
在进行数据绑定操作时，有一些注意事项和常见问题需要关注：
-
XML数据源绑定 ：
- 虽然不强制将XML数据文件包含在项目中才能进行绑定，但这样做便于在Blend中打开文件进行编辑。
- 确保XML文件的路径和格式正确，否则可能导致数据源无法正常加载。
-
数据模板编辑 ：
- 编辑数据模板时，若界面元素显示过小，可使用设计界面左下角的控制工具或鼠标滚轮进行缩放。
- 修改数据模板后，要及时保存并重新运行应用程序，以查看修改效果。
-
交互性添加 ：
- 设置动画持续时间时，默认值为0会导致看不到动画效果，需设置合适的时间。
-
确保在正确的状态下进行交互性设置，如选择
Selected状态进行相关修改。
14. 拓展应用思路
除了上述介绍的基本操作，数据绑定技术还有很多拓展应用的思路：
-
动态数据更新
：结合网络请求或数据库操作，实现数据的实时更新和显示。例如，在运行时操作集合的基础上，定期从服务器获取新的
PurchaseOrder数据并添加到集合中。 - 多数据源绑定 ：在一个应用程序中同时使用对象数据源和XML数据源，实现不同类型数据的整合显示。
- 复杂交互效果 ：除了简单的缩放和弹跳效果，还可以结合动画和事件处理，实现更复杂的交互效果，如淡入淡出、旋转等。
通过不断探索和实践，你可以充分发挥数据绑定技术的优势，开发出更加丰富和交互性强的应用程序。希望这些内容能帮助你更好地掌握Blend数据绑定技术，在实际项目中灵活运用。
扫一扫
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
