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 liệu chất là hội thoại phần tử Windows Phone và ñối tượng CLR tiêu chuẩn FrameworkElement giới thiệu thuộc tính DataContext và lớp sở cho các phần tử có thể dùng liệu bị ràng buộc DataContext có thể ñược ñịnh cho ñối tượng CLR sử dụng XAML trực tiếp code Ví dụ 3-23 cho thấy ñố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 instance ñối tượng CLR và gán nó vào FrameworkElement trên trang Ví dụ, có TextBlock với text là "My Application" trên trang theo mặc ñịnh dự án Windows Phone ñược tạo ðể truy cập vào phần tử này code, bạn cần gán x: Nameproperty Các code Ví dụ 3-24 sau ñây tạo ñố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(); Nguyễn Văn Thạnh-AnLang-Huế | 69 this.ApplicationTitle.DataContext = new MyData() { ID = 1, AppTitle = "Real Estate Explorer", PageName = "explorer" }; } MyData bây ñã có ApplicationTitle, không có gì hiển thị cho ñến thuộc tính FrameworkElement là ApplicationTitle ràng buộc với thuộc tính ñối tượng CLR MyData Bởi vì chúng ta ñang làm việc với các thuộc tính phụ thuộc, ràng buộc có thể tạo XAML Ví dụ 3-25 cho thấy markup thành lập mối quan hệ MyData với phần tử Windows Phone trên trang Path ñến thuộc tính MyData là AppTitle ðể hiển thị các AppTitle ñịnh nghĩa Ví dụ 3-24, ta dùng biểu thức liên kết Ví dụ 3-25 Listing 3-25 Binding the Text DependencyProperty <TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle}" Style="{StaticResource PhoneTextNormalStyle}" /> Chạy ứng dụng Emulator thấy AppTitle thuộc tính phụ thuộc Text TextBlock "ApplicationTitle" (xem hình 3-28) I.1/ liên kết Các thuộc tính quan trọng câu lệnh {Binding} là: Nguyễn Văn Thạnh-AnLang-Huế | 70 •Source: Các ñối tượng CLR cung cấp liệu ðối tượng này ñược gán cho DataContext 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 lớp và instance lớp ñó.Instance này có các liệu cụ thể , sau ñó dùng DataContext ñể binding • Path: Tên thuộc tính cần liên kết ñối tượng nguồn CLR • Mode : hướng 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), ñó 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ập nhật ñược cho ñối tượng nguồn Ví dụ 3-26 xác ñịnh ñối tượng MyData XAML và trực tiếp dùng nó làm resource Chú ý resource trang bao gồm khai báo "MyData" với các thuộc tính MyData ñược ñịnh nghĩa thẻ.Trong ràng buộc TextBlock, thuộc tính Source tới tài nguyên MyData, Path tới MyData.AppTitle và thuộc tính MyData.PageTitle, Mode là OneTime Listing 3-26 Assigning the Source per Element <phone:PhoneApplicationPage > <!→ Khai báo MyData làm resource với các thuộc tính →> <phone:PhoneApplicationPage.Resources> <local:MyData x:Key="MyData" ID="1" AppTitle="Real Estate Explorer" PageName="Commercial Real Estate" /> </phone:PhoneApplicationPage.Resources> <! - - - Tạo liên kết cho TextBlock > <TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle, Source={StaticResource MyData}, Mode=OneTime}" /> Nguyễn Văn Thạnh-AnLang-Huế | 71 <TextBlock x:Name="PageTitle" Text="{Binding Path=PageName, Source={StaticResource MyData}, Mode=OneTime}" /> </Grid> </phone:PhoneApplicationPage> ðể ràng buộc nhiều thuộc tính cùng ñối tượng, ta gán DataContext cho ñối tượng resource, và sau ñó liên kết thuộc tính, bỏ ñi phần thuộc tính Source Ví dụ ñây ñặt DataContext cho MyData, và sau ñó các Text và Tag ñược liên kết với ñối tượng nguồn Ví dụ 3-27 cho thấy các thiết lập thuộc tính quan trọng: Listing 3-27 Binding Multiple Properties <TextBlock DataContext="{StaticResource MyData}" Text="{Binding Path=AppTitle}" Tag="{Binding Path=ID}" /> DataContext có có giá trị với các phần tử con, vì bạn có thể gán liệu vào lưới container cha và nó ñược sử dụng "miễn phí" tất các phần tử lưới hay container Ví dụ 3-28 cho thấy liệu ñược liên kết với Grid Chỉ có thuộc tính nguồn liệu cho liên kết là cần phải ñược nêu 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" Listing 3-28 Assigning Parent Container DataContext <phone:PhoneApplicationPage > <phone:PhoneApplicationPage.Resources> <local:MyData x:Key="MyData" ID="1" AppTitle="Real Estate Explorer" PageName="Commercial Real Estate" /> Nguyễn Văn Thạnh-AnLang-Huế | 72 </phone:PhoneApplicationPage.Resources> <Tạo liên kết cho Grid > <Grid x:Name="LayoutRoot" DataContext="{StaticResource MyData}"> < các phần tử grid dùng liên kết này > <TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle}" Tag="{Binding Path=ID}"/> <TextBlock x:Name="PageTitle" Text="{Binding Path=PageName"/> </Grid> </phone:PhoneApplicationPage> I.2/ Liên kết code Binding yêu cầu ba ñối tượng: các FrameworkElement ñể hiển thị liệu, ñối tượng CLR ñể chứa liệu và ñối tượng Binding ñể quản lý các ñối thoại hai ñối tượng trên Biểu thức ràng buộc XAML che lấp tồn ñối tượng ràng buộc, ñối tượng liên kết thấy rõ ràng ràng buộc code Ví dụ 3-29 cho thấy việc tạo ñối tượng Binding và xác ñịnh nó với tham chiếu ñối tượng CLR, ñường dẫn ñến thuộc tính ñối tượng CLR bị ràng buộc, và hướng liệu di chuyển Listing 3-29 Binding a CLR Object in Code // Tạo instance ñối tượng CLR BikeType bikeType = new BikeType() { TypeName = "Touring", Nguyễn Văn Thạnh-AnLang-Huế | 73 TypeDescription = "Durable and comfortable bikes for long journeys." }; // Tạo ñối tượng liên kết Binding binding = new Binding() { Source = bikeType, Path = new PropertyPath("TypeName"), Mode = BindingMode.OneTime }; // Gán ñối tượng liên kết với phần tử Framework BindInCodeTextBox.SetBinding(TextBox.TextProperty, binding); I.3/ Liên kết với tập thuộc tính ñối tượng nguồn ItemsSource (hoặc hậu duệ nó ListBox) có thể ñược ñịnh thực Ienumerable nào list array Bằng cách thay ñổi ví dụ MyData và từ list<> tổng quát , chúng ta có thể biểu diễn cho 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 Ví dụ 3-30 trước 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() Nguyễn Văn Thạnh-AnLang-Huế | 74 { this.ID = 1; this.AppTitle = "Real Estate Explorer"; this.PageName = "Explorer"; this.Add(new Item { Title = "Open House", Description = "Open Houses in your area"}); this.Add(new Item {Title = "Price Reduction",Description = "New deals this week"}); this.Add(new Item {Title = "Recently Sold",Description = "What's moving in the market" }); } } Xét ví dụ 3-31Tập hợp các ràng buộc Ví dụ 3-31 gồm ba phần chính Thứ nhất, tài nguyên "MyData" ñã ñược xác ñịnh Code này (nằm code - behind ) khởi tạo liệu hàm dựng MyData thay vì XAML Thứ hai, DataContext "LayoutRoot" Grid ñược gán Cuối cùng, 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 - 29 kết 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 > Nguyễn Văn Thạnh-AnLang-Huế | 75 `<local:MyData x:Key="MyData" /> </phone:PhoneApplicationPage.Resources> <!—gán DataContext > <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MyData}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle}" Style="{StaticResource PhoneTextNormalStyle}" /> <TextBlock x:Name="PageTitle" Text="{Binding Path=PageName}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" /> </StackPanel> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <!—Grid này liên kết tập liệu thuộc tính > <ItemsControl ItemsSource="{StaticResource MyData}" DisplayMemberPath="Title" /> </Grid> </Grid> </phone:PhoneApplicationPage> Nguyễn Văn Thạnh-AnLang-Huế | 76 I.4/ liên kết Đối tượng Bài tập này thể ràng buộc ñối tượng và tập liệu thuộc tính các ñối tượng với các phần tử framework Tạo ứng dụng Windows Phone App 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 lớp là MyData.cs Sau ñó nhấp vào nút Add ñể tạo lớp và ñóng hộp thoại Trong code-behind, thay MyData class ñoạn code ñây < - Tạo lớp tên Item có 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> Nguyễn Văn Thạnh-AnLang-Huế | 77 { public string AppTitle { get; set; } public string PageName { get; set; } public MyData() { this.AppTitle = "Real Estate Explorer"; this.PageName = "explorer"; this.Add(new Item {Title = "Open House",Description = "Open Houses in your area"}); this.Add(new Item {Title = "Price Reduction",Description = "New deals this week"}); this.Add(new Item {Title = "Recently Sold",Description = "What's moving in the market"}); } } Mở giao diện XAML cho MainPage.xaml Thêm không gian tên XML có tên local trỏ ñến dự án nơi MyData ñược lưu trữ Bây trang có tất các ñối tượng 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 Thêm phần tử nguồn thuộc phần tử PhoneApplicationPage bên phần tử nguồn, thêm thẻ local:MyData với Key = "MyData" Bây bạn có thể tham khảo MyData nguồn tài nguyên tĩnh <phone:PhoneApplicationPage.Resources> <local:MyData x:Key="MyData" /> Nguyễn Văn Thạnh-AnLang-Huế | 78 </phone:PhoneApplicationPage.Resources> Tìm phần tử lưới có tên là "LayoutRoot" Thêm thuộc tính DataContext và gán MyData cho StaticResource MyData bây ñã sẵn sàng cho phần tử lưới và phần tử bên lưới <Grid x:Name="LayoutRoot" DataContext="{StaticResource MyData}"> Xác ñịnh vị trí phần tử "TitlePanel" XAML Xác ñịnh vị trí các văn TextBlock "MY APPLICATION” Thay ñổi Textproperty thành "{Binding Path=AppTitle}" Xác ñịnh vị trí phần tử TextBlock với text "page name" Thay ñổi Textproperty thành {Binding Path=PageName}" <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="{Binding Path=AppTitle}" Margin="12,0" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock Text="{Binding Path=PageName}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> Xác ñịnh vị trí phần tử lưới có tên là "ContentPanel" Thêm ItemsControl với ItemsSourceproperty gán cho MyData và thiết lập DisplayMemberPath Là "Title" <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ItemsControl ItemsSource="{StaticResource MyData}" DisplayMemberPath="Title" /> </Grid> Nguyễn Văn Thạnh-AnLang-Huế | 79 10 ứng dụng và trang tiêu ñề hiển thị các thuộc tính AppTitle và PAGETITLE từ MyData ItemsControl hiển thị các 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 là nguồn ràng buộc Ví dụ, bạn có Thanh trượt (slider) cần cập nhật TextBlock, bạn có thể liên kết Text với giá trị Slider Ví dụ này sử dụng kế thừa ItemsControl, ListBox ListBox có thể ñược sử dụng giống 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ị hộp công cụ, có sẵn ñể sử dụng markup Chúng tôi ràng buộc các nội dung ñược chọn ListBox với văn 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 phần tử nguồn và ñường dẫn ñến thuộc tính trên phần tử nguồn Lưu ý các ví dụ ñây là thuộc tính Path sử dụng cú pháp dấu chấm , ñó là Selected.Content, ñể ñi vào liệu cần thiết phần tử mục tiêu TextBox Nguyễn Văn Thạnh-AnLang-Huế | 80 (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"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <ListBox x:Name="PriorityList" Height="100" HorizontalAlignment="Stretch" VerticalAlignment="Top" SelectedIndex="0"> <ListBoxItem Content="High" /> <ListBoxItem Content="Medium" /> <ListBoxItem Content="Low" /> </ListBox> <TextBox Text="{Binding ElementName=PriorityList, Path=SelectedItem.Content}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="1" /> </Grid> ListBox không ñược chấp nhận và không còn xuất hộp công cụ thay vào ñó, LongListSelector ñược khuyến khích Microsoft, chí là ñể hiển thị danh sách phẳng ñơn giản LongListSelector dễ trình bày, linh hoạt, và có thể hiển thị danh sách các nhóm khác Nguyễn Văn Thạnh-AnLang-Huế | 81 I.6/ Bộ chuyển đổi (Converter) Bộ chuyển ñổi là ñiều hợp nằm trung gian các liệu ñến từ các nguồn và các liệu ñi ngoài tới phần tử mục tiêu Chuyển ñổi là lựa chọn tốt bạn cần linh hoạt, tái sử dụng, công cụ ña dụng có thể ñược ñặt trực tiếp XAML Ví dụ, 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 DateTime ( ngày ) thành Date và time ñịnh dạng chuỗi Khi nào các liệu là loại và bạn cần hiển thị liệu ñó theo nhiều cách khác nhau, thì nên sử dụng chuyển ñổi Sử dụng chuyển ñổi ñòi hỏi ba bước sau: Tạo lớp thực chuyển ñổi IValueConverter IValueConverter có hai phương thức, Convert() và ConvertBack () phương thức Convert () có ñối tượng tham số và trả ñối tượng có loại liệu khác Bề mặt chuyển ñổi nguồn có thể ñược sử dụng ñánh dấu XAML Thêm thuộc tính Converter cho ñánh dấu liên kết Ví dụ 3-33 cho thấy chuyển ñổi ñơn giản trả giá trị ,ví dụ Visibility với ñầu vào là Boolean Boolean ñược chuyển vào "giá trị" tham số Giá trị ñược giả ñịnh là Boolean Bạn có thể tùy chọn sử dụng tham số "TargetType" ñể thực kiểm tra kiểu trước cho phép chuyển ñổi Nếu "giá trị" là ñúng, thì các tham số Visibility.Visible ñược trả lại, không, Visibility.Collapsed ñược trả Ví dụ 3-33.ðịnh nghĩa converter public class BoolToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) Nguyễn Văn Thạnh-AnLang-Huế | 82 { return (bool)value ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } Các resource cần có x: Key là nó có thể ñược dùng biểu thức Binding Trong Ví dụ 3-34, boolToVisibilityConverter có key là "Visibility Converter" ñược tham chiếu biểu thức ràng buộc Một nguồn thứ hai "MyData" có thuộc tính chuỗi Title và Boolean IsFavorite Listing 3-34 Defining the Converter as a Resource <phone:PhoneApplicationPage.Resources> <local:BoolToVisibilityConverter x:Key="VisibilityConverter" /> <local:MyData x:Key="MyData" Title="Hot Chocolate" IsFavorite="true" /> </phone:PhoneApplicationPage.Resources> Biểu thức Binding cho thuộc tính Visibility TextBlock Ví dụ 3-35 bao gồm các ñường dẫn ñến thuộc tính Boolean IsFavorite và các thuộc tính Converter trỏ ñến các nguồn tài nguyên tĩnh VisibilityConverter Listing 3-35 Using a Converter in a Binding Expression <TextBlock DataContext="{StaticResource MyData}" Text="{Binding Path=Title}" Visibility="{Binding Path=IsFavorite, Nguyễn Văn Thạnh-AnLang-Huế | 83 Converter={StaticResource VisibilityConverter}}"/> I.7/ Thực thi và Bind Converter Các bước sau ñây trình bày cách làm nào ñể ràng buộc ñối tượng sử dụng converter converter chấp nhận 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) tạo Windows Phone App 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 Thay code behind lớp : public enum Status { NotStarted, Deferred, InProgress, Complete }; public class Project { public Status ProjectStatus { get; set; } public string ProjectTitle { get; set; } } Thêm các using : using System.Windows.Data; using System.Windows.Media; Thêm lớp thứ hai cho dự án và ñặt tên là "StatusToBrushConverter" Thay code cũ ñoạn code ñược liệt kê ñây StatusToBrushConverter có Status kiểu liệt kê và trả ñối tượng Brush Mỗi Status có Brush màu tương ứng public class StatusToBrushConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, Nguyễn Văn Thạnh-AnLang-Huế | 84 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; } } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } Trong Solution Explorer xác ñịnh vị trí tập tin MainPage.xaml, nhấp ñúp ñể mở XAML ñể chỉnh sửa Thêm không gian tên XML ñặt tên local ñể trở lại các dự án Tạo các Resource cho trang cách sử dụng mã ñây Resource ñầu tiên tạo ñối tượng dự án với các liệu và ñược ñặt Key là "Project1" ñể tham khảo sau Nguồn thứ hai tạo instance StatusToBrushConverter <phone:PhoneApplicationPage.Resources> <local:Project x:Key="Project1" Nguyễn Văn Thạnh-AnLang-Huế | 85 ProjectTitle="Implement TPS Reports" ProjectStatus="InProgress" /> <local:StatusToBrushConverter x:Key="StatusToBrushConverter" /> </phone:PhoneApplicationPage.Resources> ðịnh vị Grid tên "ContentPanel" và ñặt các markup in ñậm vào Grid tags <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top" DataContext="{StaticResource Project1}"> <Ellipse Fill="{Binding Path=ProjectStatus, Converter={StaticResource StatusToBrushConverter}}" Width="25" Height="25" VerticalAlignment="Top" Margin="5" /> <TextBlock Text="{Binding Path=ProjectTitle}" VerticalAlignment="top" Margin="5" /> </StackPanel> </Grid> 10 Chuyển qua Design view ContentPanel phải sau: Nguyễn Văn Thạnh-AnLang-Huế | 86 11 Thêm thuộc tính DataContext vào StackPanel.Gán StaticResource Project1 cho StackPanel DataContext <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top" DataContext="{StaticResource Project1}"> 12 Thay ñổi thuộc tình ñổ màu cho ellip ñể liên kết với thuộc tính ProjectStatus ñối tượng dự án Trong biểu thức binding thuộc tính Converter phải tới static resource StatusToBrushConverter <Ellipse Fill="{Binding Path=ProjectStatus, Converter={StaticResource StatusToBrushConverter}}" Width="25" Height="25" VerticalAlignment="Top" Margin="5" /> 13 Bind thuộc tính Text TextBlock với ProjectTitle ñối tượng Project <TextBlock Text="{Binding Path=ProjectTitle}" VerticalAlignment="top" Margin="5" /> Nguyễn Văn Thạnh-AnLang-Huế | 87 14 Chuyển qua Design view ñể xem kết 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ả 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 lớp có thể khác so với ví dụ ñây, vấn ñề là không có code cấp ứng dụng bổ sung vào ñể có ñược tất các chức này Nếu không có Binding biểu thức và Converters, bạn buộc phải viết số câu lệnh ñiều kiện ñể ánh xạ các giá trị Status với Brush , ñịnh brushes, và chắn code ñã ñược gọi nào giá trị status thay ñổi namespace ImplementAndBindAConverter { public partial class MainPage : PhoneApplicationPage { public MainPage() { Nguyễn Văn Thạnh-AnLang-Huế | 88 InitializeComponent(); } } } I.8/Liên kết theo DataTemplate Khi bạn cần phải ràng buộc thuộc tính, cần layout dạng tự với nhiều phần tử, hãy sử dụng DataTemplate ItemsControl, ListBox, và LongListSelector tất ñều có thuộc tính ItemTemplate loại DataTemplate dùng cho mục ñích này Template ñược dùng cho Item danh sách Cú pháp ñánh dấu XAML trông giống ví dụ 3-36 Listing 3-36 Defining a DataTemplate <phone:LongListSelector > <phone:LongListSelector.ItemTemplate> <DataTemplate> <! put any content here > </DataTemplate> </phone:LongListSelector.ItemTemplate> </phone:LongListSelector> Thay vì sử dụng các ràng buộc DisplayMemberPathto ñến thuộc tính cụ thể, bạn có thể ràng buộc _ nhiều tính chất và các phần tử bạn muốn bên DataTemplate, và xếp trực quan nào Lưu ý dòng LongListSelector có nhiều phần tử và phần tử ñược liên kết với thuộc tính riêng Về gì DataTemplatecan làm, hãy nhìn vào ví dụ hình 3-34 Nguyễn Văn Thạnh-AnLang-Huế | 89 I.9/ Ràng buộc Template Các bước sau ñây trình bày cách sử dụng DataTemplate ñể xếp, ràng buộc, và hiển thị nhiều thuộc tính ñối tượng Tạo ứng dụng Phone Windows 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 lớp là Movie.cs, nhấp vào add Button ñể tạo các lớp và ñóng hộp thoại Thay các code - behind lớp Movie ñoạn code ñây Movie object ñịnh nghĩa Title ,Quote, và Year Lớp Movies là danh sách chung Movie tạo và khởi tạo số phim constructor public class Movie { public string Title { get; set; } public string Quote { get; set; } Nguyễn Văn Thạnh-AnLang-Huế | 90 public int Year { get; set; } } public class Movies : List<Movie> { public Movies() { this.Add(new Movie() { Title = "A League of Their Own", Quote = "There's no crying in baseball!", Year = 1992 }); this.Add(new Movie() { Title = " Les Misérables", Quote = " Even the darkest night will end and the sun will rise.", Year = 2012 }); this.Add(new Movie() { Title = "Dirty Harry", Quote = "Do I feel lucky?' Well, ya, punk?", Year = 1971 }); Nguyễn Văn Thạnh-AnLang-Huế | 91 } } Mở MainPage.xaml Thêm XML namespace ñặt là local tham khảo ñến project Ví dụ sau khai báo namespace local cho dự án BindATemplate <phone:PhoneApplicationPage xmlns:local="clr-namespace:BindATemplate" "> Tạo phần tử Resources cho trang cách sử dụng mã ñây Nguồn tạo ñối tượng Moviescollection và có key là "Movies" ñể tham khảo sau <phone:PhoneApplicationPage.Resources> <local:Movies x:Key="Movies" /> </phone:PhoneApplicationPage.Resources> Xác ñịnh vị trí Grid tên là "ContentPanel" và thêm LongListSelector bên Grid XAML ðiều này ñặt lên Shell LongListSelector ItemTemplate, nó sẵn sàng nhận nội dung bạn ñặt ñó <phone:LongListSelector Height="100" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <phone:LongListSelector.ItemTemplate> <DataTemplate> <! add content here > </DataTemplate> </phone:LongListSelector.ItemTemplate> </phone:LongListSelector > Nguyễn Văn Thạnh-AnLang-Huế | 92 Thêm phần tử Grid bên DataTemplate Thiết lập các ñịnh nghĩa cho hai hàng và hai cột Grid Nối các nguồn Movies static với ItemsSource LongListSelector <phone:LongListSelector ItemsSource="{StaticResource Movies}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <phone:LongListSelector.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <! add content to Grid here > </Grid> </DataTemplate> </phone:LongListSelector.ItemTemplate> </phone:LongListSelector> Nguyễn Văn Thạnh-AnLang-Huế | 93 Bên grid, thêm ba phần tử TextBlock và ràng buộc chúng với Year,Title, và Quote Chú ý ví dụ sử dụng built-in phone style và phần tử ñược ñặt phần riêng biệt Grid sử dụng Row và column kèm theo thuộc tính <TextBlock Text="{Binding Path=Year}" Style="{StaticResource PhoneTextSmallStyle}" Grid.Column="0" Grid.Row="0" VerticalAlignment="top" Margin="5" /> <TextBlock Text="{Binding Path=Title}" Style="{StaticResource PhoneTextNormalStyle}" Grid.Column="1" Grid.Row="0" VerticalAlignment="top" Margin="5" /> <TextBlock Text="{Binding Path=Quote}" Style="{StaticResource PhoneTextAccentStyle}" Grid.Column="1" Grid.Row="1" VerticalAlignment="top" Margin="5" /> 10 Chạy ứng dụng : Nguyễn Văn Thạnh-AnLang-Huế | 94 Nguyễn Văn Thạnh-AnLang-Huế | 95