Windows Phone 数据绑定之UI Element Binding

Windows Phone7.5 Data Cookbook-[Oct. 2011] 中UI Element DataBinding 的学习笔记

1. Element Binding
2. DataContext
3. DataTemplates
4. How DataMode is used
5. Converting data for display
6. Building a Simple App

简介

Windows Phone 7 中的数据绑定基本上与任何数据连接用户界面元素。数据源可能是 CLR 对象、 文件、 XML、 RSS/原子、 SQL Server 数据库，ODATA 或任何 web 服务。数据源可以驻留在设备上或外部源。数据绑定是一个功能强大的功能，轻松地在一个简单的属性中配合的数据元素的 UI 元素。

在本章中，我们会研究不同方面的数据绑定。我们将在第一个方法学习如何声明一个 textbox 元素绑定属性。然后，将为您介绍DataContext，这是非常重要的数据连接到用户界面元素。DataContext 是此外很重要的模型中，MVVM （模型-用于分离视图View-ViewModel） 模式。我们将学习如何 DataTemplates 使它易于重复使用的模板。

DataMode 在设置数据绑定到的一种方法或两个方式更新帮助。通知发送刷新通知有关的数据已被更新的用户界面元素。最后，我们将了解转换器和如何使用它们来转换和显示的数据的格式。

元素绑定

在我们第一中方法，让我们来学习如何创建 XAML 元素和关于数据绑定到另一个控件例如TextBlock绑定对象的ElementName属性

准备

1 打开 Visual Studio，并创建一个 Windows Phone 的应用程序。名称Recipe1 应用程序并单击确定。

让我们建立一个简单显示页面，我们有一TextBox，输入数据时textblock若要显示输入输入的数据。在Textbox中输入文本时，您将看到它显示textblock上显示

1.让我们来更改应用程序标题和页标题的文本块中的MainPage.xaml.cs 文件。打开该文件，然后查找TitlePanel命名 StackPanel

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Grid.ColumnSpan ="2">>

<TextBlock x:Name="ApplicationTitle" Text="Ch1 Recipes" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Element Name" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

2.为了显示两列和三行，我们应该改变GridColumnDefinition RowDefinition  XAML 代码片段中所示。找到这名为 LayoutRootGrid

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="81"/>

<RowDefinition Height="526*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="159*"></ColumnDefinition>

<ColumnDefinition Width="321*"></ColumnDefinition>

</Grid.ColumnDefinitions>

 3 Add three TextBlock elements and a text element inside the ContentPanel grid. Here we will add binding information to the tbNameDisplayContent control. ElementName is assigned to TextBox control name. Path is assigned to the Text property of the TextBox control; this is where the data is fetched.

<Grid x:Name="ContentPanel" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,0,-16">

<TextBlock x:Name ="tbName" Text ="Name:" Margin="2,13,371,582" />

<TextBox x:Name ="txtNameContent" Text ="" Margin="128,0,6,567" />

<TextBlock x:Name ="tbNameDisplay" Text ="Display Name:" Height="43" VerticalAlignment="Top" Margin="2,94,0,0" HorizontalAlignment="Left" Width="133" />

<TextBlock x:Name ="tbNameDisplayContent" Text ="{Binding ElementName=txtNameContent, Path=Text}" Margin="140,100,24,505" />

</Grid>

 

4  F5  现在，在文本框中输入一个名称，并键入时，您将看到TextBlock中的显示文本块，如下面的屏幕快照所示 

 

它是如何工作

我们在使用以下语法XAML 中使用绑定类

<object property="{Binding ElementName=name, Path=property}" ..../>

您可以使用Path = Name或只是在Path属性名称。我们设置绑定到 TextBlock 控件的内容属性的信息。我们使用 ElementName 作为textbox 控件名称，然后我们分配给 textbox 控件 Text 属性Path。基本上，该绑定的数据源是Textbox 的Text 属性

本人理解在Xaml中的Name属性相当于Html中的Id属性，所以可以通过ElementName制定到页面中的控件名称，从而获取他的Path路径指定的值如Text等

在最后的总结，我们学习了如何使用绑定，与 ElementName Path。类似于路径，我们可以使用许多属 Converter, Mode, StringFormat  等。

绑定的信息检查此 MSDN 文章http://msdn.microsoft.com/en-us/library/ms752347.aspx