[Windows 8 App]數據綁定------前台設定綁定

2013-12-23

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

前一篇介紹了如何從後台設定綁定

在前台設定Binding也需要Binding的支持

不同的地方是在前台視以敘述聲明的方式將Binding標記給綁定的目標屬性

根據項目的不同需求

可以在標記中設定Binding類別的相對應屬性質來指定綁定模式、綁定來源屬性以及轉換器

下面將透過範例來說明前台設定綁定的部分

首先，新增一個專案【ForegroundBinding】

本範例定義一個類別【Person】，新增了姓名和年齡的Name和Age兩個屬性

並將Person類別的與TextBox的Text屬性之間建立綁定

使Name和Age屬性顯示在TextBox文字框中

開啟【MainPage.xaml】，在Grid設計畫面中新增一個TextBox的控制項

然後將Binding的值給TextBox控制項的Text屬性

【MainPage.xaml】的Grid程式碼如下：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBox x:Name="ShowTextBox" HorizontalAlignment="Left" Margin="397,279,0,0" TextWrapping="Wrap" Text="{Binding}" FontSize="30" IsReadOnly="True" VerticalAlignment="Top" Height="176" Width="586"/>
</Grid>

接下來開啟【MainPage.xaml.cs】，在【ForegroundBinding】的命名空間下建立一個類別Person

並新增Name和Age兩個屬性，最後透過ToString方法來指定前台的TextBox顯示格式

程式碼如下：

public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public Person(string name, int age)
        {
            Name = name;
            Age = age;
        }

        public override string ToString()
        {
            return "姓名" + Name + ", 年齡" + Age;
        }
    }

然後在MainPage的方法下，將Person類別的值給TextBox控制項的DataContext屬性以綁定數據來源

程式碼如下：

public MainPage()
{
   this.InitializeComponent();
   ShowTextBox.DataContext = new Person("Frank", 20); 
}

這是【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;

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

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

    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public Person(string name, int age)
        {
            Name = name;
            Age = age;
        }

        public override string ToString()
        {
            return "姓名" + Name + ", 年齡" + Age;
        }
    }
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            ShowTextBox.DataContext = new Person("Frank", 20); 
        }

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

專案執行後的畫面：

回首頁