Windows Phone Tieng Viet Phan 2

<span class='text_page_counter'>(1)</span>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();. Nguyễn Văn Thạnh-AnLang-Huế | 69.

<span class='text_page_counter'>(2)</span> this.ApplicationTitle.DataContext = new MyData() { ID = 1, AppTitle = "Real Estate Explorer", PageName = "explorer" }; }. MyData bây giờ ñã có ApplicationTitle, nhưng không có gì hiển thị cho ñến khi thuộc tính của FrameworkElement là ApplicationTitle ràng buộc với thuộc tính của ñố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 ra ngay trong XAML. Ví dụ 3-25 cho thấy một markup thành lập mối quan hệ giữa MyData với một phần tử Windows Phone trên trang. Path chỉ ñến thuộc tính của MyData là AppTitle. ðể hiển thị các AppTitle ñịnh nghĩa trong Ví dụ 3-24, ta dùng biểu thức liên kết như trong 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 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à:. Nguyễn Văn Thạnh-AnLang-Huế | 70.

<span class='text_page_counter'>(3)</span> •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 <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.

<span class='text_page_counter'>(4)</span> <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 trong cùng một ñối tượng, ta gán DataContext cho một ñối tượng resource, và sau ñó liên kết mỗi thuộc tính, bỏ ñi phần thuộc tính Source. Ví dụ dưới ñâ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ũ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 "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.

<span class='text_page_counter'>(5)</span> </phone:PhoneApplicationPage.Resources> <Tạo liên kết cho Grid > <Grid x:Name="LayoutRoot" DataContext="{StaticResource MyData}"> ... < các phần tử con của 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 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", Nguyễn Văn Thạnh-AnLang-Huế | 73.

<span class='text_page_counter'>(6)</span> 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 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 : ) 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() Nguyễn Văn Thạnh-AnLang-Huế | 74.

<span class='text_page_counter'>(7)</span> { 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 trong Ví dụ 3-31 gồm ba phần chính. Thứ nhất, tài nguyên "MyData" ñã ñược xác ñịnh. Code mới này (nằm trong code - behind ) khởi tạo dữ liệu trong hàm dựng MyData thay vì trong XAML. Thứ hai, DataContext của "LayoutRoot" Grid ñược gán. 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-->. Nguyễn Văn Thạnh-AnLang-Huế | 75.

<span class='text_page_counter'>(8)</span> `<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 dữ 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.

<span class='text_page_counter'>(9)</span> 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> Nguyễn Văn Thạnh-AnLang-Huế | 77.

<span class='text_page_counter'>(10)</span> { 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"}); } }. 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" />. Nguyễn Văn Thạnh-AnLang-Huế | 78.

<span class='text_page_counter'>(11)</span> </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. <Grid x:Name="LayoutRoot". DataContext="{StaticResource MyData}"> 8. Xác ñịnh vị trí phần tử "TitlePanel" trong XAML. Xác ñịnh vị trí các văn bả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>. 9. Xác ñịnh vị trí phần tử lưới có tên là "ContentPanel". Thêm một 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.

<span class='text_page_counter'>(12)</span> 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 Nguyễn Văn Thạnh-AnLang-Huế | 80.

<span class='text_page_counter'>(13)</span> (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 hiện trong hộp công cụ. thay vào ñó, LongListSelector ñược khuyến khích bởi Microsoft, thậm chí là ñể hiển thị danh sách phẳng ñơn giản. LongListSelector dễ trình bày, rất linh hoạt, và có thể hiển thị danh sách trong các nhóm khác nhau. Nguyễn Văn Thạnh-AnLang-Huế | 81.

<span class='text_page_counter'>(14)</span> 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ề. Ví dụ 3-33.ðịnh nghĩa một 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.

<span class='text_page_counter'>(15)</span> { 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 chỉ có một x: Key là nó có thể ñược dùng trong biểu thức Binding. Trong Ví dụ 3-34, boolToVisibilityConverter có key là "Visibility Converter" sẽ ñược tham chiếu trong biểu thức ràng buộc. Một nguồn thứ hai "MyData" có thuộc tính chuỗi Title và một 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 của TextBlock trong Ví dụ 3-35 bao gồm các ñường dẫn ñến một 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.

<span class='text_page_counter'>(16)</span> 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; } } 4. Thêm các using : using System.Windows.Data; using System.Windows.Media; 5. Thêm một lớp thứ hai cho dự án và ñặt tên là "StatusToBrushConverter". Thay code cũ bằng ñoạn code ñược liệt kê dưới ñây. StatusToBrushConverter có Status kiểu liệt kê và trả về một ñối tượng Brush. Mỗi Status sẽ có một 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.

<span class='text_page_counter'>(17)</span> 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(); }. } 6. Trong Solution Explorer xác ñịnh vị trí tập tin MainPage.xaml, rồi nhấp ñúp ñể mở XAML ñể chỉnh sửa. 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". Nguyễn Văn Thạnh-AnLang-Huế | 85.

<span class='text_page_counter'>(18)</span> ProjectTitle="Implement TPS Reports" ProjectStatus="InProgress" /> <local:StatusToBrushConverter x:Key="StatusToBrushConverter" /> </phone:PhoneApplicationPage.Resources>. 9. ðị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 như sau:. Nguyễn Văn Thạnh-AnLang-Huế | 86.

<span class='text_page_counter'>(19)</span> 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 của ñối tượng dự án . Trong biểu thức binding thuộc tính Converter phải chỉ 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 của TextBlock với ProjectTitle của ñối tượng Project. <TextBlock Text="{Binding Path=ProjectTitle}" VerticalAlignment="top" Margin="5" />. Nguyễn Văn Thạnh-AnLang-Huế | 87.

<span class='text_page_counter'>(20)</span> 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. namespace ImplementAndBindAConverter { public partial class MainPage : PhoneApplicationPage { public MainPage() { Nguyễn Văn Thạnh-AnLang-Huế | 88.

<span class='text_page_counter'>(21)</span> 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 <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 chỉ một 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ử như bạn muốn bên trong DataTemplate, và trong bất kỳ sự sắp xếp trực quan nào. Lưu ý rằng mỗi dòng trong LongListSelector có nhiều phần tử và mỗi phần tử ñược liên kết với một thuộc tính riêng . Về những gì DataTemplatecan làm, hãy nhìn vào ví dụ trong hình 3-34.. Nguyễn Văn Thạnh-AnLang-Huế | 89.

<span class='text_page_counter'>(22)</span> 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; } Nguyễn Văn Thạnh-AnLang-Huế | 90.

<span class='text_page_counter'>(23)</span> 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, do ya, punk?", Year = 1971 }); Nguyễn Văn Thạnh-AnLang-Huế | 91.

<span class='text_page_counter'>(24)</span> } } 4. Mở MainPage.xaml. 5. Thêm một XML namespace ñặt là local tham khảo ñến project hiện tại. Ví dụ sau khai báo namespace local cho dự án BindATemplate <phone:PhoneApplicationPage xmlns:local="clr-namespace:BindATemplate" ..."> 6. Tạo ra một phần tử Resources cho trang bằng cách sử dụng mã dưới ñây. Nguồn tạo ra một ñối tượng Moviescollection và có key là "Movies" ñể tham khảo sau. <phone:PhoneApplicationPage.Resources> <local:Movies x:Key="Movies" /> </phone:PhoneApplicationPage.Resources> 7. Xác ñịnh vị trí Grid tên là "ContentPanel" và thêm LongListSelector bên trong Grid. XAML ðiều này chỉ ñặt lên Shell của LongListSelector ItemTemplate, nó sẵn sàng nhận bất cứ nội dung bạn ñặt trong ñó. <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.

<span class='text_page_counter'>(25)</span> 8. Thêm một phần tử Grid bên trong DataTemplate. Thiết lập các ñịnh nghĩa cho hai hàng và hai cột trong Grid. Nối các nguồn Movies static với ItemsSource của 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.

<span class='text_page_counter'>(26)</span> 9. Bên trong grid, thêm ba phần tử TextBlock và ràng buộc chúng với Year,Title, và Quote. Chú ý rằng ví dụ sử dụng built-in phone style và mỗi phần tử ñược ñặt trong một phần riêng biệt của 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.

<span class='text_page_counter'>(27)</span> Nguyễn Văn Thạnh-AnLang-Huế | 95.

<span class='text_page_counter'>(28)</span>