[Windows 8 App]數據綁定-----後台建立綁定

2013-12-23

945
0
Windows 8 控制項
2013-12-25

在後台建立綁定的時候，需要 Windows.UI.Xaml.Data 命名空間下的 Binding

透過使用Binding可以在綁定目標與綁定來源之間進行數據的傳遞

我們透過範例來解說後台綁定

首先，新增一個專案【Student】，開啟【MainPage.xaml】

並對Grid命名LayoutRoot

在Grid的設計畫面中放進這些控制項，如下圖：

【MainPage.xaml】的完整程式碼：


<Page
    x:Class="Student.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Student"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="學生資料表" FontSize="80" VerticalAlignment="Top" Margin="474,175,0,0" Height="133" Width="435"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="姓名：" FontSize="50" VerticalAlignment="Top" Margin="474,313,0,0" Height="69" Width="163"/>
        <TextBlock HorizontalAlignment="Left" Margin="474,425,0,0" TextWrapping="Wrap" Text="學號：" FontSize="50" VerticalAlignment="Top" Height="61" Width="163"/>
        <TextBox x:Name="NameTextBox" HorizontalAlignment="Left" Margin="675,313,0,0" TextWrapping="Wrap" Text="" FontSize="50" VerticalAlignment="Top" Height="69" Width="234"/>
        <TextBox x:Name="NumberTextBox" HorizontalAlignment="Left" Margin="675,425,0,0" TextWrapping="Wrap" Text="" FontSize="50" VerticalAlignment="Top" Height="61" Width="234"/>

    </Grid>
</Page>

前台設計完畢後，開啟【MainPage.xaml.cs】

在Student的命名空間下，新增一個類別Student用來顯示學生資訊，學生的姓名和學號

程式碼如下：


namespace Student
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    ///

    public class Student
    {
        public String Name { get; set; }
        public int Number { get; set; }
        public Student(String name, int number)
        {
            Name = name;
            Number = number;
        }
    }
}

上面程式碼中，Student類別定義了Name、Number 二個屬性

分別代表學生姓名、學生學號

接著定義Student類別的結構方法，並且初始化Name、Number屬性

下面將透過Student的屬性來Binding前台的控制項

程式碼如下：


public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            Student student = new Student("小賴", 1001);
            //將student對象設定為綁定來源
            LayoutRoot.DataContext = student;

            //綁定姓名
            Binding bindingName = new Binding();

            //設定綁定模式
            bindingName.Mode = BindingMode.OneWay;
            bindingName.Path = new PropertyPath("Name");
            NameTextBox.SetBinding(TextBox.TextProperty, bindingName);

            //綁定學號
            Binding bindingNumber = new Binding();
            bindingNumber.Mode = BindingMode.OneWay;
            bindingNumber.Path = new PropertyPath("Number");
            NumberTextBox.SetBinding(TextBox.TextProperty, bindingNumber);

        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }

上面的程式碼是將Student類別的student值給Grid元素的DataContext屬性

指定student對象為綁定數據來源

這樣Grid元素中的所有子元素才能夠與student對象的屬性建立綁定

接著又建立二個來綁定來源與綁定目標之間進行訊息傳遞的Binding

並統一設定每個Binding的Mode屬性值為OneWay，以指定綁定模式為單向數據綁定

然後，設定Path屬性值來指定每個綁定的屬性分別為Name、Number

最後分別呼叫2個TextBox控制項的SetBinding方法建立數據綁定

完整的【MainPage.xaml.cs】程式碼：


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Data;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace Student
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    ///

    public class Student
    {
        public string Name { get; set; }
        public int Number { get; set; }
        public Student(string name, int number)
        {
            Name = name;
            Number = number;
        }
    }
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            Student student = new Student("小賴", 1001);

            LayoutRoot.DataContext = student;

            Binding bindingName = new Binding();

            bindingName.Mode = BindingMode.OneWay;
            bindingName.Path = new PropertyPath("Name");
            NameTextBox.SetBinding(TextBox.TextProperty, bindingName);

            Binding bindingNumber = new Binding();
            bindingNumber.Mode = BindingMode.OneWay;
            bindingNumber.Path = new PropertyPath("Number");
            NumberTextBox.SetBinding(TextBox.TextProperty, bindingNumber);

        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

執行畫面結果如下：

回首頁