Windows Phone7天初學(4):數據綁定

 

數據綁定提供了一種數據呈現與交互的簡捷方式，使得數據與UI分離,並能自動更新、同步。

綁定有綁定目標、綁定源、綁定模式、轉換器等要素。。

綁定目標爲Silverlight控件，可以是FrameworkElement類型的對象，實際上綁定的是該控件的一個特定屬性。

綁定源爲數據對象，也可以是任意的CLR對象。

轉換器：進行數據類型或格式的轉換。

綁定模式，三種模式的數據綁定。

（ 1）OneTime：一次綁定，在綁定創建時使用源數據更新目標，適用於只顯示數據而不進行數據的更新。

（2）OneWay：單向綁定，在綁定創建時或者源數據發生變化時更新到目標，適用於顯示變化的數據。

（3）TwoWay：雙向綁定，在任何時候都可以同時更新源數據和目標。

當模式爲OneWay或TwoWay時，源對象必須實現INotifyPropertyChanged接口。

綁定源的方式有：

（1） Source:表示綁定源對象。

（2） RelativeSource，指定綁定源相對於綁定目標的位置來標識綁定源。

（3） ElementName,綁定源也是UI對象。

可以在C#代碼中，也可以在XAML聲明中進行綁定，現列舉常見的幾種綁定方式：

（1） 綁定源爲UI對象。

通過slider的值來控制矩形控件圖形的寬度。

<Slider Name="slider" Value="20" Maximum="200" />

<Rectangle ;{Binding Path=Value，Mode=OneWay，ElementName=slider}" />
Mode默認爲OneWay, “Path=”也可可省略，因此上式還可簡寫爲：

<Rectangle ;{Binding Value，ElementName=slider}" />

（2） C#代碼中實現綁定

定義數據源：

Public class Classmate

{

public string cName{get;set;}

public int cAge{get;set;}

}

創建同學類的實例作爲綁定源：

Public Classmate myClassmate=new Classmate

{

cName=“王根山“,

cAge=”29”

};

Binding bd=new Binding();

Bd.Source= myClassmate;

bd.Path=new PropertyPath(“cName”);

bd.SetBinding(TextBox.TextProperty,cTextBox);

多個控件綁定同一數據源，可統一指定數據源,用DataContext來實現，原數據源賦值語句均可省略。

Canvas1.DataContext= myClassmate;

（3） XAML聲明中實現綁定

添加命名空間的支持：

xmlns:local="clr-namespace:WindowsPhoneApplication4"

資源項中實例化類：

<phone:PhoneApplicationPage.Resources>

<local:Classmate x:Key="dataClass" cName="萬常山" cAge="28"></local:Classmate>

</phone:PhoneApplicationPage.Resources>

在XAML中實現綁定：

<TextBox Name=“cTextBox” Text=“{Binding path= cName,Mode=OneWay }” />

也可以如同C#代碼中實現綁定，在C#代碼中定義數據源：

Canvas1.DataContext= myClassmate;

(4) 使用數據綁定設計器實現綁定

除了C#、XAML來實現綁定，還可藉助於Visual Studio的可視化工具，直接實現綁定，實際是XAML實現綁定的可視化方式，自動生成XAML代碼。

在屬性面板中單擊屬性右側的小圖標，會彈出菜單，如圖4-1所示：

圖4-1

在彈出菜單中選擇Apply Data Binding..,會出現數據綁定設計器，可定義Source、Path等屬性，如圖4-2:

圖4-2

案例4-1:數據綁定實現

集合對象的數據綁定，用自定義模板方式實現。

（1）創建Windows Phone程序。

（2）添加新類Classmate

public class Classmate

{

public int cId { get; set; }

public string cName { get; set; }

public int cAge { get; set; }

}

（4） XAML頁面綁定代碼如下：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<ListBox Height="297" ItemsSource="{Binding}" HorizontalAlignment="Left" Margin="35,35,0,0" Name="listBox1" VerticalAlignment="Top" ;357" >

<ListBox.ItemTemplate >

<DataTemplate >

<StackPanel Height="50" HorizontalAlignment="Center" ;480" VerticalAlignment="Top" Orientation="Horizontal" >

<TextBlock Height="60" HorizontalAlignment="Left" Text="{Binding cId}" VerticalAlignment="Top" ;100" />

<TextBlock Height="60" HorizontalAlignment="Left" Text="{Binding cName}" VerticalAlignment="Top" ;100" />

<TextBlock Height="60" HorizontalAlignment="Left" Text="{Binding cAge}" VerticalAlignment="Top" ;100" />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

（5） 在C#代碼中定義數據源：

ObservableCollection<Classmate> classmates=new ObservableCollection<Classmate>

{

new Classmate {cId=1,cName ="王啓大",cAge=28},

new Classmate {cId=2,cName ="萬正領",cAge=25},

};

public MainPage()

{

InitializeComponent();

listBox1.DataContext = classmates;

}

（6）F5運行，效果如下：