Windows Phone 8.1 資料繫結

來源:互聯網
上載者:User

標籤:

 

 

 

資料繫結的意義?

能夠降低後台擷取資料與XAML展示頁面元素兩者間的耦合度。

資料繫結有好多種形式,接下來一一陳述。

 

 

Demo One

首先做一個單一資料的綁定:在後台定義一個公用層級的自動屬性,然後再XAML初始化語句執行前對該屬性賦值,XAML初始化執行後,將當前資料放到資料內容中,然後在前台頁面就可以通過資料繫結拿到當前資料,具體代碼如下:

1 public DateTime Time { get; set; }2 public MainPage()3         {4            //初始化資料5            Time = DateTime.Now; 6            this.InitializeComponent();7            //一定要把資料繫結放在XAML初始化後面8            this.DataContext = Data;9         }

前台代碼:

<TextBox x:Name="txt" Text="{Binding}" />

啟動調試,我們就可以看到目前時間被綁定到了TextBox上。如果我現在有很多屬性要綁定到前台元素上怎麼辦?

 

 

Demo Two

首先建一個ViewModel類,用來定義各種展示用的屬性,假如我們前台需要展示人的各種資訊,包括姓名、年齡、身高,首先定義一個PersonViewModel類(這是一個資料來源),

1 public class PersonViewModel2         {//Person資料來源3             public string Name { get; set; }4             public int Age { get; set; }5             public float Height { get; set; }6         }

然後定義一個用於接受資料的屬性,

public PersonViewModel PersonData { get; set; }

然後在建構函式中進行初始化,

1 //初始化資料2 PersonData = new PersonViewModel { Name = "萵苣的宅森", Age = 24, Height = 175 };3             this.InitializeComponent();4             //將資料繫結到資料內容 一定要放到XAML初始化語句後面5             this.DataContext = PersonData;

最後在前台進行資料繫結,

1 <StackPanel>2         <TextBox x:Name="txtname" Header="姓名" Text="{Binding Name}"/>3         <!—這裡的{Binding Name} 相當於{Binding Path=Name}-->4         <TextBox x:Name="txtAge" Header="年齡" Text="{Binding Age}"/>5 <!—假如Binding的屬性下面還有子屬性(也就是說綁定了一個class)那麼想拿到該屬性下面的屬性就可以用”.”點出來-->6         <TextBox x:Name="txtHeight" Header="身高" Text="{Binding Height}"/>7 <!—假如Binding的屬性是一個集合,那麼也可以使用索引器的形式 屬性[index] 進行資料繫結-->8 </StackPanel>

運行結果如:

以上兩個Demo都是通過後台賦值的形式把資料賦給了資料內容DataContext,我們還可以在前台頁面通過DataContext屬性進行資料繫結。

 

 

Demo Three

將背景

this.DataContext = PersonData;

語句注釋掉,這個時進行調試Person的資訊肯定是不會顯示的,因為我們前台綁定資料需要從資料內容DataContext拿到資料,這時候我們在Page節下增加一個DataContext屬性

DataContext="{Binding PersonData,RelativeSource={RelativeSource Mode=Self}

,就可以以屬性的形式給DataContext賦值,如果想要檢驗資料來源是否正確,只需要在PersonData上按F12轉到定義,如果轉到的是後台資料來源對應的自動屬性

public PersonViewModel PersonData { get; set; }

,那麼就說明DataContext成功賦值。用前台屬性的方式綁定DataContext資料內容要注意:在後台一定要先初始化資料,然後再初始化XAML,你想啊,XAML都初始化完了你再給DataContext賦值,是不是晚了。。

通過這種形式對資料進行綁定就可以完全將前後台分離開,我在後台只需要設定一下資料來源,然後資料繫結的工作完全都在前台進行,不管前台元素是TextBox還是其他的控制項都與後台沒有關係。這樣去開發代碼分工明確,靈活性也高。

到這裡你有沒有產生一個疑問,我把DataContext藝術性的形式設定在Page節為什麼 Page節下面的元素也能夠綁定到資料?這是因為資料內容DataContext是可以繼承的,只要父級元素設定了資料內容,其子級元素都能夠使用這資料內容,當然自己元素也可以綁定自己的或者重寫父級的DataContext(DataContext有個就近原則)。

上面講的都是使用自訂資料來源進行資料的綁定,我們還可以使用UI元素進行資料繫結,這樣還可以實現兩個UI元素之間的互動。

 

 

Demo Four

1 <StackPanel>2         <Slider x:Name="slider" Minimum="0" Maximum="100" Value="10"/>3         <Rectangle Width="{Binding ElementName=slider,Path=Value}" Height="{Binding ElementName=slider,Path=Value}" Fill="Green"/>4 </StackPanel>

定義一個Slider滑動條,通過滑塊來控制矩形的大小,只需要綁定Rectangle的Width和Height屬性,為ElementName 賦予控制者的Name,Path賦予控制者的值變化屬性,即可與被控制者綁定起來,實現互動。

當資料來源和目標屬性的類型不相同時,例如前台需要一個string類型的資料,而我現在拿到的是一個int類型的資料,這時候就需要類型轉換。要實作類別型轉換,可以建立一個轉換工廠,他必須實現IValueConverter介面,在Convert方法下可以編寫轉換用的代碼(ConvertBack也是用來編寫目標資料的方法,這個方式是適用TwoWay繫結模式的)。

這裡又談到了繫結模式,上面幾個Demo用的繫結模式都是Default即預設繫結模式,繫結模式還有OneTime、OneWay、TwoWay三種模式,下面用一個Demo解釋這三種繫結模式的區別。

 

 

Demo Five

當我們滑動滑塊,會發現只有OneTime的值是不變化的,Slider一開始設定的值是多少他就是多少,而在TwoWay的文字框中輸入一個值會導致Slider、Normal、OneWay的值同樣也發生變化。

前台源碼:

 1 <Grid x:Name="LayoutRoot"> 2  3         <Grid.RowDefinitions> 4             <RowDefinition Height="Auto"/> 5             <RowDefinition Height="*"/> 6         </Grid.RowDefinitions> 7  8         <!-- 標題面板 --> 9         <StackPanel Grid.Row="0" Margin="19,0,0,0">10             <TextBlock Text="繫結模式" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>11             <TextBlock Text="繫結模式" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>12         </StackPanel>13 14         <!--TODO: 應將內容放入以下網格-->15         <StackPanel Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">16             <Slider x:Name="slider" Header="資料來源" Grid.Row="0"/>17             <TextBox Header="Normal" Text="{Binding ElementName=slider,Path=Value}"/>18             <TextBox Header="OneTime" Text="{Binding ElementName=slider,Path=Value,Mode=OneTime}"/>19             <TextBox Header="OneWay" Text="{Binding ElementName=slider,Path=Value,Mode=OneWay}"/>20             <TextBox Header="TwoWay" Text="{Binding ElementName=slider,Path=Value,Mode=TwoWay}"/>21         </StackPanel>22 </Grid>

 

Windows Phone 8.1 資料繫結

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.