Windows Phone Tieng Viet Phan 2

Chỉ có thuộc tính nguồn dữ liệu cho mỗi liên kết con là cần phải ñược nêu một cách rõ ràng, ví dụ ràng buộc với các phần tử mục tiêu "ApplicationTitle" và "PAGETITLE".. Assigning Parent [r]

V : Bingding Data

V.I/ Binding Data

Liên kết dữ liệu về bản chất là cuộc hội thoại giữa một phần tử Windows Phone và một ñối tượng CLR tiêu chuẩn

FrameworkElement giới thiệu thuộc tính DataContext và lớp cơ sở cho các phần tử có thể dùng dữ liệu bị ràng buộc

DataContext có thể ñược chỉ ñịnh cho bất kỳ ñối tượng CLR sử dụng XAML hoặc trực tiếp trong code Ví dụ 3-23 cho thấy một ñối tượng CLR ñơn giản MyData Listing 3-23 ñối tượng CLR ñơn giản

public class MyData

{

public int ID { get; set; }

public string AppTitle { get; set; }

public string PageName { get; set; }

}

Bạn có thể tạo một instance của ñối tượng CLR và gán nó vào bất kỳ FrameworkElement trên trang Ví dụ, có một TextBlock với text là "My Application" trên trang theo mặc ñịnh khi một dự án Windows Phone ñược tạo ra

ðể truy cập vào phần tử này trong code, bạn cần gán x: Nameproperty Các code trong Ví dụ 3-24 sau ñây tạo ra ñối tượng MyData và gán ñối tượng khởi tạo này cho ApplicationTitle : ApplicationTitle.DataContext ( là ID,AppTile, PageName) Listing 3-24 Setting the Element DataContext

// Constructor

public MainPage()

{

InitializeComponent();

this.ApplicationTitle.DataContext = new MyData()

<TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle}"

Style="{StaticResource PhoneTextNormalStyle}" />

Chạy ứng dụng trong Emulator sẽ thấy AppTitle trong thuộc tính phụ thuộc Text của TextBlock "ApplicationTitle" (xem hình 3-28)

I.1/ cơ bản về liên kết

Các thuộc tính quan trọng trong câu lệnh {Binding} là:

•Source: Các ñối tượng CLR cung cấp dữ liệu ðối tượng này ñược gán cho

DataContext của phần tử framework mục tiêu mà chúng ta ñang muốn liên kết Theo trên trước hết ta tạo ra một lớp và một instance của lớp ñó.Instance này có các dữ liệu cụ thể , sau ñó dùng DataContext ñể binding

• Path: Tên của thuộc tính cần liên kết trong ñối tượng nguồn CLR

• Mode : hướng của dữ liệu di chuyển Các giá trị có thể onetime , nơi phần tử framework mục tiêu ñược thiết lập ban ñầu từ ñối tượng nguồn, OneWay (mặc ñịnh), trong ñó phần tử framework mục tiêu ñược cập nhật từ ñối tượng nguồn, và TwoWay nơi phần tử framework mục tiêu cũng cập nhật ñược cho ñối tượng

nguồn

Ví dụ 3-26 xác ñịnh ñối tượng MyData ngay trong XAML và trực tiếp dùng nó làm resource Chú ý rằng resource trong trang bao gồm một khai báo "MyData" với các thuộc tính của MyData ñược ñịnh nghĩa trong thẻ.Trong ràng buộc TextBlock, thuộc tính Source chỉ tới tài nguyên MyData, Path chỉ tới MyData.AppTitle và thuộc tính MyData.PageTitle, Mode là OneTime

Listing 3-26 Assigning the Source per Element

AppTitle="Real Estate Explorer"

PageName="Commercial Real Estate" />

Listing 3-27 Binding Multiple Properties

<TextBlock DataContext="{StaticResource MyData}"

Text="{Binding Path=AppTitle}"

Tag="{Binding Path=ID}" />

DataContext cũng có có giá trị với các phần tử con, vì vậy bạn có thể gán dữ liệu vào một lưới hoặc container cha và nó ñược sử dụng "miễn phí" bởi tất cả các phần tử con trong lưới hay container Ví dụ 3-28 cho thấy dữ liệu ñược liên kết với một Grid Chỉ có thuộc tính nguồn dữ liệu cho mỗi liên kết con là cần phải ñược nêu một cách rõ ràng, ví dụ ràng buộc với các phần tử mục tiêu

AppTitle="Real Estate Explorer"

PageName="Commercial Real Estate" />

I.2/ Liên kết bằng code

Binding yêu cầu ba ñối tượng: các FrameworkElement ñể hiển thị dữ liệu, một ñối tượng CLR ñể chứa dữ liệu và một ñối tượng Binding ñể quản lý các ñối thoại giữa hai ñối tượng trên Biểu thức ràng buộc XAML che lấp sự tồn tại của ñối tượng ràng buộc, nhưng ñối tượng liên kết sẽ thấy rõ ràng hơn khi ràng buộc bằng code Ví dụ 3-29 cho thấy việc tạo ra một ñối tượng Binding và xác ñịnh nó với một tham chiếu ñối tượng CLR, một ñường dẫn ñến thuộc tính ñối tượng CLR

bị ràng buộc, và hướng dữ liệu di chuyển

Listing 3-29 Binding a CLR Object in Code

// Tạo một instance của ñối tượng CLR

BikeType bikeType = new BikeType()

{

TypeName = "Touring",

TypeDescription = "Durable and comfortable bikes for long journeys."

};

// Tạo ñối tượng liên kết

Binding binding = new Binding()

I.3/ Liên kết với tập thuộc tính của ñối tượng nguồn

ItemsSource (hoặc hậu duệ của nó ListBox) có thể ñược chỉ ñịnh thực hiện bất kỳ Ienumerable nào như list hoặc array Bằng cách thay ñổi ví dụ MyData và từ một list<> tổng quát , chúng ta có thể biểu diễn cho một danh sách các type Item

( Inumerate : loại ñối tương dùng ñể liệt kê.Về Iemurable xin xem thêm : http://msdn.microsoft.com/en-us/library/9eekhta0(v=vs.110).aspx )

Dành ít phút ñể kiểm tra các ñối tượng MyData và Item trong Ví dụ 3-30 trước khi chuyển sang xem cách chúng ràng buộc

Listing 3-30 Binding a CLR Object in Code

public class MyData : List<Item>

{

public int ID { get; set; }

public string AppTitle { get; set; }

public string PageName { get; set; }

public MyData()

Cuối cùng, một ItemsControl ñược thêm vào grid "ContentPanel", ñó là

ItemsControl ItemsSource ñược gán cho các tài nguyên tĩnh MyData và

DisplayMemberPath là "Title"

Hình 3 - 29 chỉ ra kết quả khi chạy

Listing 3-31 Binding a CLR Object in Code

<phone:PhoneApplicationPage

xmlns:local="clr-namespace:BindingCollections">

<phone:PhoneApplicationPage.Resources>

<!—xác ñịnh resource >

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

<!—Grid này liên kết tập dữ liệu thuộc tính >

<ItemsControl ItemsSource="{StaticResource MyData}"

DisplayMemberPath="Title" />

</Grid>

</Grid>

</phone:PhoneApplicationPage>

I.4/ liên kết Đối tượng

Bài tập này thể hiện ràng buộc ñối tượng và tập dữ liệu thuộc tính các ñối tượng với các phần tử framework

1 Tạo ra một ứng dụng Windows Phone App mới

2 Trong Solution Explorer, bấm chuột phải vào dự án và chọn Add> Class từ menu ngữ cảnh Trong Add New Item dialog, ñặt tên của lớp là MyData.cs

Sau ñó nhấp vào nút Add ñể tạo ra lớp và ñóng hộp thoại

3 Trong code-behind, thay thế MyData class bằng ñoạn code dưới ñây

< - Tạo lớp tên Item có 2 thuộc tính Title và Description >

public class Item

{

public string Title { get; set; }

public string Description { get; set; }

}

< - Tạo lớp MyData có kiểu List< Item> >

public class MyData : List<Item>

{

public string AppTitle { get; set; }

public string PageName { get; set; }

market"});

}

}

4 Mở giao diện XAML cho MainPage.xaml

5 Thêm một không gian tên XML có tên local trỏ ñến dự án hiện tại nơi MyData ñược lưu trữ Bây giờ trang có tất cả các ñối tượng trong dự án sẵn cho các XAML trên trang Hình 3-30 cho thấy khai báo không gian tên XML local cho Asembly tên BindObjects

6 Thêm một phần tử nguồn thuộc phần tử PhoneApplicationPage bên trong

phần tử nguồn, thêm một thẻ local:MyData với Key = "MyData" Bây giờ bạn có thể tham khảo MyData như một nguồn tài nguyên tĩnh

<phone:PhoneApplicationPage.Resources>

<local:MyData x:Key="MyData" />

</phone:PhoneApplicationPage.Resources>

7 Tìm phần tử lưới có tên là "LayoutRoot" Thêm một thuộc tính DataContext và gán MyData cho StaticResource MyData bây giờ ñã sẵn sàng cho phần tử lưới và phần tử con bên trong lưới

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock Text="{Binding Path=AppTitle}"

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

<ItemsControl ItemsSource="{StaticResource MyData}"

DisplayMemberPath="Title" />

</Grid>

10 ứng dụng và trang tiêu ñề sẽ hiển thị các thuộc tính AppTitle và PAGETITLE

từ MyData ItemsControl sẽ hiển thị các bộ sưu tập cung cấp từ MyData items (xem hình 3-31)

I.5/ Liên kết với các phần tử khác

Bạn có thể sử dụng phần tử khác trên trang như là một nguồn ràng buộc Ví dụ, nếu bạn có một Thanh trượt (slider) cần cập nhật một TextBlock, bạn có thể liên kết Text với giá trị Slider

Ví dụ tiếp theo này sử dụng một kế thừa ItemsControl, ListBox ListBox có thể ñược sử dụng giống như ItemsControl ngoại trừ các mục có thể ñược lựa chọn và ñánh dấu ListBox không hiển thị trong hộp công cụ, nhưng vẫn có sẵn ñể sử dụng trong markup Chúng tôi sẽ ràng buộc các nội dung ñược chọn trong ListBox với văn bản trong một TextBox

Trong biểu thức ràng buộc cho các phần tử mục tiêu cần ñược cập nhật, ta thiết lập các thuộc tính ElementName cho tên của phần tử nguồn và ñường dẫn ñến một thuộc tính trên phần tử nguồn Lưu ý trong các ví dụ dưới ñây là thuộc tính Path

sử dụng cú pháp dấu chấm , ñó là Selected.Content, ñể ñi vào dữ liệu cần thiết của phần tử mục tiêu TextBox

(xem Ví dụ 3-32)

Listing 3-32 Binding the TextBox to the ListBox SelectedItem

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

I.6/ Bộ chuyển đổi (Converter)

Bộ chuyển ñổi là bộ ñiều hợp nằm trung gian giữa các dữ liệu ñến từ các nguồn và các dữ liệu ñi ra ngoài tới phần tử mục tiêu Chuyển ñổi là một lựa chọn tốt khi bạn cần một sự linh hoạt, tái sử dụng, công cụ ña dụng có thể ñược ñặt trực tiếp trong XAML

Ví dụ, bộ chuyển ñổi có thể nhận giá trị Ví dụ "Stop", "Slow", và "Go" và chuyển ñổi các giá trị màu "ñỏ", "vàng", và "xanh" tương ứng Hoặc, bạn có thể chuyển ñổi các giá trị Boolean thành các giá trị Ví dụ Visibility Hoặc, có thể chuyển ñổi một DateTime ( ngày giờ ) thành một Date và time ñịnh dạng chuỗi Khi nào các dữ liệu cơ bản là một loại và bạn cần hiển thị dữ liệu ñó theo nhiều cách khác nhau, thì nên sử dụng một bộ chuyển ñổi Sử dụng một bộ chuyển ñổi ñòi hỏi ba bước sau:

1 Tạo ra một lớp thực hiện chuyển ñổi IValueConverter IValueConverter chỉ có hai phương thức, Convert() và ConvertBack () phương thức Convert () có một ñối tượng như một tham số và trả về một ñối tượng có một loại dữ liệu khác

2 Bề mặt chuyển ñổi như một nguồn có thể ñược sử dụng trong ñánh dấu XAML

3 Thêm một thuộc tính Converter cho ñánh dấu liên kết

Ví dụ 3-33 cho thấy một chuyển ñổi ñơn giản trả về một giá trị ,ví dụ Visibility với ñầu vào là Boolean Boolean ñược chuyển vào trong "giá trị" tham số Giá trị ñược giả ñịnh là một Boolean Bạn có thể tùy chọn sử dụng tham số "TargetType" ñể thực hiện kiểm tra kiểu trước khi cho phép chuyển ñổi Nếu "giá trị" là ñúng, thì các tham số Visibility.Visible ñược trả lại, nếu không, Visibility.Collapsed ñược trả về

"MyData" có thuộc tính chuỗi Title và một Boolean IsFavorite

Listing 3-34 Defining the Converter as a Resource

Listing 3-35 Using a Converter in a Binding Expression

<TextBlock

DataContext="{StaticResource MyData}"

Text="{Binding Path=Title}"

Visibility="{Binding Path=IsFavorite,

Converter={StaticResource VisibilityConverter}}"/>

I.7/ Thực thi và Bind một Converter

Các bước sau ñây trình bày cách làm thế nào ñể ràng buộc ñối tượng sử dụng một converter converter chấp nhận một giá trị liệt kê (High, Medium, và Low) ñể ñối tượng brush sử dụng tô màu phần tử Ellipse (Red, Yellow, và

Green)

1 tạo một Windows Phone App

2 Trong Solution Explorer, kích phải project và chọn Add ➤Class Trong hộp thoại Add New Item,ñặt tên là Project.cs, sau ñó kích nút Add và ñóng hộp thoại

3 Thay code behind của lớp bằng :

public enum Status { NotStarted, Deferred, InProgress, Complete };

public class Project

{

public Status ProjectStatus { get; set; }

public string ProjectTitle { get; set; }

public class StatusToBrushConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter,

System.Globalization.CultureInfo culture) {

switch ((Status)value)

{

case Status.Complete: return new SolidColorBrush(Colors.Black);

case Status.Deferred: return new SolidColorBrush(Colors.LightGray);

case Status.InProgress: return new SolidColorBrush(Colors.Green);

case Status.NotStarted: return new SolidColorBrush(Colors.Red);

default: return Colors.Transparent;

7 Thêm một không gian tên XML ñặt tên local ñể chỉ trở lại các dự án hiện tại

8 Tạo ra các Resource cho trang bằng cách sử dụng mã dưới ñây Resource ñầu tiên tạo ra một ñối tượng của dự án với các dữ liệu và ñược ñặt Key là "Project1"

ñể tham khảo sau Nguồn thứ hai tạo ra một instance của StatusToBrushConverter

<phone:PhoneApplicationPage.Resources>

<local:Project x:Key="Project1"

11 Thêm thuộc tính DataContext vào StackPanel.Gán StaticResource Project1 cho StackPanel DataContext

13 Bind thuộc tính Text của TextBlock với ProjectTitle của ñối tượng Project

<TextBlock Text="{Binding Path=ProjectTitle}"

VerticalAlignment="top"

Margin="5" />

14 Chuyển qua Design view ñể xem kết quả Thuộc tính Fill ñã ñược ràng buộc với thuộc tính ProjectStatus và có giá trị "InProgress" Converter nhận giá trị

"InProgress" và trả về màu Green tương ứng

Tìm ñến tập tin MainPage.xaml.cs code - behind ñể xem các code ứng dụng Việc ñặt tên của lớp có thể khác nhau so với ví dụ ở ñây, nhưng vấn ñề là không có code cấp ứng dụng bổ sung vào ñể có ñược tất cả các chức năng này Nếu không có Binding biểu thức và Converters, bạn sẽ buộc phải viết một số câu lệnh ñiều kiện

ñể ánh xạ các giá trị Status với Brush , chỉ ñịnh brushes, và chắc chắn rằng code ñã ñược gọi bất cứ khi nào giá trị status thay ñổi

InitializeComponent();

}

}

}

I.8/Liên kết theo DataTemplate

Khi bạn cần phải ràng buộc một bộ thuộc tính, cần layout dạng tự do với nhiều phần tử, hãy sử dụng DataTemplate

ItemsControl, ListBox, và LongListSelector tất cả ñều có thuộc tính ItemTemplate loại DataTemplate dùng cho mục ñích này Template ñược dùng cho mỗi Item trong danh sách Cú pháp ñánh dấu XAML trông giống như ví dụ 3-36

Listing 3-36 Defining a DataTemplate

I.9/ Ràng buộc một Template

Các bước sau ñây trình bày cách sử dụng một DataTemplate ñể sắp xếp, ràng buộc,

và hiển thị nhiều thuộc tính của một ñối tượng

1 Tạo ra một ứng dụng Phone Windows mới

2 Trong Solution Explorer, bấm chuột phải vào dự án và chọn Add ➤ class từ menu ngữ cảnh Trong mục Add New Item, ñặt tên của lớp là Movie.cs, rồi nhấp vào add Button ñể tạo ra các lớp và ñóng hộp thoại

3 Thay thế các code - behind của lớp Movie bằng ñoạn code dưới ñây Movie object ñịnh nghĩa một Title ,Quote, và Year Lớp Movies là một danh sách chung của Movie tạo ra và khởi tạo một số bộ phim trong constructor

public class Movie

{

public string Title { get; set; }

public string Quote { get; set; }