Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
2013캄보디아
2013캄보디아
Loading in …3
×
1 of 19

Chươngii

10

Share

Download to read offline

Chương 2 : Thiết kế giao diện của ứng dụng
I. XAML
1. XAML là gì?
XAML (eXtensible Application Markup Language) là một ngôn ngữ đánh dấu với cú pháp tương tự XML dùng để tạo các đối tượng .Net trong các ứng dụng WPF, Silverlight và WF. Mặc dù đây là những mảng đề tài lớn nhưng nếu bạn đã biết đến XML, sẽ không khó để làm quen với XAML.
XAML được dùng để tạo giao diện đồ họa cho ứng dụng thông qua các đối tượng của .Net hoặc do bạn tự định nghĩa. Do đó mỗi thẻ XAML phải ánh xạ và có tên tương ứng với một lớp.
Giống như các ngôn ngữ đánh dấu HTML, XML cho phép các thẻ lồng nhau. Điều này giúp bạn tạo ra các control đa dạng hơn, ví dụ như bạn có thể lồng một TextBox vào trong Button. Bên cạnh đó, các giá trị có kiểu dữ liệu cơ bản như chuỗi, số, màu,… mà bạn gán cho các thuộc tính của thẻ cũng phải được đặt trong cặp nháy kép.
2. Khai báo đối tượng:
2.1 Khai báo trực tiếp:
Sử dụng thẻ đóng và thẻ mở để khai báo một đối tượng giống như khai báo một phần tử trong XML. Ta có thể sử dụng cú pháp này để khai báo đối tượng gốc (root object) hoặc để set các giá trị cho thuộc tính.
2.2 Khai báo gián tiếp:
Sử dụng giá trị trực tiếp để khai báo một đối tượng. Ta có thể sử dụng cú pháp này để thiết lập giá trị của thuộc tính.
3. Thiết lập các thuộc tính cho đối tượng:
3.1 Sử dụng cú pháp theo thuộc tính:
Dưới đây là ví dụ để set các giá trị cho các thuộc tính: Weight, Height, Fill của đối tượng Rectangle:
<rectangle height="100" width="100" />
Trong Visual Studio cho phép chúng ta gán các thuộc tính cho các đối tượng bằng các thanh công cụ trong Properties Panel:


3.2 Sử dụng cú pháp theo đặc tính của thành phần:
Chẳng hạn set đặc tính Fill cho đối tượng Rectangle bằng cách này:
<rectangle height="100" width="100">
<rectangle.fill>
<solidcolorbrush />
</rectangle.fill>
</rectangle>
4. Root element và namespace trong XAML:
Một file XAML chỉ có một Root Element và thỏa mãn 2 tiêu chí : well-formed
XML (có thẻ đóng và thẻ mở) và valid XML (tuân thủ theo DTD).
Cấu trúc của 1 page XAML như sau:
<phone:phoneapplicationpage>
<!--LayoutRoot is the root grid where all page content is pl

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Chươngii

  1. 1. https://www.facebook.com/windowsphone8VN Trang 1 Chương 2 : Thiết kế giao diện của ứng dụng I. XAML 1. XAML là gì? XAML (eXtensible Application Markup Language) là một ngôn ngữ đánh dấu với cú pháp tương tự XML dùng để tạo các đối tượng .Net trong các ứng dụng WPF, Silverlight và WF. Mặc dù đây là những mảng đề tài lớn nhưng nếu bạn đã biết đến XML, sẽ không khó để làm quen với XAML. XAML được dùng để tạo giao diện đồ họa cho ứng dụng thông qua các đối tượng của .Net hoặc do bạn tự định nghĩa. Do đó mỗi thẻ XAML phải ánh xạ và có tên tương ứng với một lớp. Giống như các ngôn ngữ đánh dấu HTML, XML cho phép các thẻ lồng nhau. Điều này giúp bạn tạo ra các control đa dạng hơn, ví dụ như bạn có thể lồng một TextBox vào trong Button. Bên cạnh đó, các giá trị có kiểu dữ liệu cơ bản như chuỗi, số, màu,… mà bạn gán cho các thuộc tính của thẻ cũng phải được đặt trong cặp nháy kép. 2. Khai báo đối tượng: 2.1 Khai báo trực tiếp: Sử dụng thẻ đóng và thẻ mở để khai báo một đối tượng giống như khai báo một phần tử trong XML. Ta có thể sử dụng cú pháp này để khai báo đối tượng gốc (root object) hoặc để set các giá trị cho thuộc tính. 2.2 Khai báo gián tiếp: Sử dụng giá trị trực tiếp để khai báo một đối tượng. Ta có thể sử dụng cú pháp này để thiết lập giá trị của thuộc tính. 3. Thiết lập các thuộc tính cho đối tượng: 3.1 Sử dụng cú pháp theo thuộc tính: Dưới đây là ví dụ để set các giá trị cho các thuộc tính: Weight, Height, Fill của đối tượng Rectangle: <Rectangle Width="100" Height="100" Fill="Red"/> Trong Visual Studio cho phép chúng ta gán các thuộc tính cho các đối tượng bằng các thanh công cụ trong Properties Panel:
  2. 2. https://www.facebook.com/windowsphone8VN Trang 2 3.2 Sử dụng cú pháp theo đặc tính của thành phần: Chẳng hạn set đặc tính Fill cho đối tượng Rectangle bằng cách này: <Rectangle Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Green"/> </Rectangle.Fill> </Rectangle> 4. Root element và namespace trong XAML: Một file XAML chỉ có một Root Element và thỏa mãn 2 tiêu chí : well-formed XML (có thẻ đóng và thẻ mở) và valid XML (tuân thủ theo DTD). Cấu trúc của 1 page XAML như sau: <phone:PhoneApplicationPage x:Class="Canvas.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr- namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <!--...--> </Grid>
  3. 3. https://www.facebook.com/windowsphone8VN Trang 3 </phone:PhoneApplicationPage>  Khai báo namespace trong XAML: Các namespace trong XAML được khai báo qua thuộc tính (attribute) xmlns (XML name space). Thuộc tính xmlns này cho phép sử dụng nhiều lần trong tài liệu XAML, tuy nhiên mỗi thuộc tính này được phân biệt thông qua prefix mà bạn gán cho namespace mà nó khai báo. Namespace chứa các lớp mà bạn cần dùng đến trong ứng dụng. Ngoài namespace mặc định dùng cho những lớp cơ bản của WP, bạn có thể thêm bất kì namespace nào khác bên trong hoặc ngoài assembly. x:Class="Maps.MainPage" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:phone="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr- namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:maps="clrnamespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.M aps" xmlns:toolkit="clr- namespace:Microsoft.Phone.Maps.Toolkit;assembly=Microsoft.Phone.Controls.To olkit" mc:Ignorable="d" các thuộc tính xmlns khai báo trong 2 namespace được sử dụng trong các ứng dụng Windows Phone: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" • Namespace đầu tiên http://schemas.microsoft.com/winfx/2006/xaml/presentation chứa các lớp cơ bản được sử dụng trong WPF. Namespace được khai báo không kèm theo prefix và là namespace mặc định đối với tất cả các lớp mà bạn sử dụng trong tập tin XAML hiện tại. • Namespace thứ hai http://schemas.microsoft.com/winfx/2006/xaml chứa các chức năng của XAML để bổ sung thuộc tính cho các đối tượng và chỉ ra cách bộ phân tích XAMLsẽ xử lý. Namespace này được ánh xạ vào prefix ‘x’ như một bí danh (alias), trong ví dụ bạn cũng có thể thấy cách prefix được sử dụng x:Class="Maps.MainPage" → Việc sử dụng bí danh này cũng tương tự như trong C#: using text = System.Text;
  4. 4. https://www.facebook.com/windowsphone8VN Trang 4 5. File .xaml và file .xaml.cs: Theo sau 1 file xaml là 1 file code-behind (.xaml.cs), file .xaml.cs này là phần logic của file .xaml. Trong code-behind ta cũng có thể khởi tạo các đối tượng và khai báo các thuộc tính như bên XAML. Ví dụ sau đây sẽ làm rõ điều này: XAML: <Button Name="btnPlay" Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Red" Click="btnPlay_Click">Btn XAML </Button> C#: public MainPage() { InitializeComponent(); Button myButton = new Button(); myButton.Name = "btnMeo"; myButton.Height = 200; myButton.Width = 200; myButton.VerticalAlignment = System.Windows.VerticalAlignment.Top; myButton.HorizontalAlignment = System.Windows.HorizontalAlignment.Right; myButton.Background = new SolidColorBrush(Colors.Red); myButton.Content = "btn C#"; ContentPanel.Children.Add(myButton); }
  5. 5. https://www.facebook.com/windowsphone8VN Trang 5 6. Event: Để tạo một event cho 1 đối tượng nào đó trong XAML thì ta có thể code hoặc dùng công cụ trong Visual Studio như trong Windows Form: XAML: <Button Click="btnCong_Click" x:Name="equalsButton" Content="equals"/> C#: private void btnCong_Click(object sender, RoutedEventArgs e) { calculateResult(); } II. Layout: Windows phone sử dụng các dạng panel khác nhau để bố trí giao diện. Trong đó gồm có 3 loại chính sau đây :
  6. 6. https://www.facebook.com/windowsphone8VN Trang 6 o Stackpanel o Canvas o Grid 1. Stackpanel: Stack Panel là layout mà ở đó các thành phần của nó được bố trí đơn giản thành từng dòng đơn và được xếp chồng lên nhau. Được định hướng (qua thuộc tính oriented) theo 2 chiều : chiều dọc (horizontally) và chiều ngang (vertically). Một thành phần con của stack Panel khi được khởi tạo sẽ có giá trị mặc định là verticall. Stack Panel được dùng khi ta muốn có một UI và các mục nhỏ. XAML: <StackPanel Margin="20"> <Rectangle Fill="Red" Width="50" Height="50" Margin="5" /> <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" /> <Rectangle Fill="Green" Width="50" Height="50" Margin="5" /> <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" /> </StackPanel> 2. Canvas: Canvas dùng để định nghĩa một khu vực layout mà ở đó mà ta có thể định vị một cách rõ ràng các thành phần con bằng tọa độ tương đối so với tọa độ của canvas. Canvas hữu dụng khi dùng để thiết kế các giao diện mà các thành phần con không phải di chuyển. Các thành phần con được điều khiển bởi tọa độ x và y thông qua Canvas.Left và Canvas.Top
  7. 7. https://www.facebook.com/windowsphone8VN Trang 7 XAML: 3. Grid: Grid được xem là layout linh hoạt nhất , nó hỗ trợ sắp xếp theo các hàng và các cột. Chúng ta có thể định nghĩa một cách rõ ràng số hàng ( row) và số cột ( column) của Grid bằng hai thuộc tình trong mã code "RowDefinitions" và "ColumnDefinitions". Chúng ta có thể đặt các control vào chính xác vị trí từng ô trong Grid bằng thuộc tính "Grid.Row" và "Grid.Column". Để cung cấp kích thước cho các hàng và các cột ta sẽ dùng Auto và "*" (trong "*" ta sẽ gán thêm các number phía trước nó để chỉnh về bề rộng như mong muốn. - Auto: kích thước của cột và hàng sẽ tự động điều chỉnh theo kích thược của nội dung bên trong nó. - "*" : kích thước của hàng và cột sẽ tự động điều chỉnh theo tỉ lệ phần còn lại của nó. XAML: <Grid ShowGridLines="True" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Canvas Background >"Transparent"= <Rectangle Canvas.Left="30" Canvas.Top="200" Fill "red"= Width "200"= Height="200"/> </Canvas>
  8. 8. https://www.facebook.com/windowsphone8VN Trang 8 <TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" /> <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" /> <Button Content="1st row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="0" /> <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" /> </Grid> III. Định hướng màn hình: - Windows phone hỗ trợ định hướng màn hình theo chiều dọc(portrait) và chiều ngang (landscape “left + right”). - Đối với người dùng thì chỉ cần xoay điện thoại để có thể nhận được định hướng màn hình mới theo ý mình. Còn trong chế độ máy ảo Emulator thì ta có thể điều chỉnh bẳng các nút định hướng màn hình trên thanh công cụ :
  9. 9. https://www.facebook.com/windowsphone8VN Trang 9  Định hướng màn hình là portrait thì chiều cao của trang sẽ lớn hơn chiều rộng của trang.  Định hướng màn hình là landscape thì gồm có 2 loại ( landscape left or landscape right) nếu là landscape left thì thanh StatusBar sẽ nằm bên trái và ngược lại. Khi tạo một ứng dụng thì định hướng màn hình mặc định là portrait. Để hỗ trợ định hướng màn hình theo cả 2 chiều portrait và landscape ta cần them code xử lý. Tùy vào mục đích của ứng dụng, có thể thiết kế layout của ứng dụng chỉ hỗ trợ hoặc portrait hoặc landscape hoặc hỗ trợ cả 2 loại. Để thêm code xử lý ta có thể thêm code trong mã XAML hoặc trong code-behind. Trong mã XAML thay đổi giá trị của thuộc tính SupportedOrientations. Để hiểu rõ hơn ta sẽ làm 2 ví dụ ngay dưới đây. Ví dụ_1: khi ứng dụng sử dụng yêu cầu phải được cuộn lên cuộn xuống(Scrolling): XAML:  Ban đầu khi ta tạo mới một ứng dụng, thì định hướng màn hình chỉ hỗ trợ kiểu portrait: SupportedOrientations="Portrait" Orientation="Portrait" ……………………………………………………………………………………………………………………………………………………………………………………………… <ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto"> <StackPanel Background="Transparent" > <Button Content="Đây là button" /> <Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/> <Rectangle Width="100" Height="100" HorizontalAlignment="Center" Fill="{StaticResource PhoneAccentBrush}"/> <Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/> <TextBlock Text="This is a line of text that will wrap in portrait orientation but not landscape orientation." TextWrapping="Wrap" /> <CheckBox Content="A CheckBox"/> <RadioButton Content="A RadioButton" /> </StackPanel> </ScrollViewer>
  10. 10. Lập Trình Windows Phone 8 Trang 10 Ví dụ_2: ứng dụng sử dụng layout dạng grid, cũng gán giá trị của thuộc tính SupportedOrientations là PortraitOrLandscape. XAML: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>  Sửa lại code trên như sau để được hỗ trợ cả 2 định hướng: SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
  11. 11. Lập Trình Windows Phone 8 Trang 11 <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image Source="/Images/rrr.png" /> <StackPanel x:Name="buttonList" Grid.Row="1" Grid.ColumnSpan="2"> <Button Content="Action 1" HorizontalAlignment="Left"/> <Button Content="Action 2"/> <Button Content="Action 3"/> <Button Content="Action 4"/> </StackPanel> </Grid> C#: void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait)) { Grid.SetRow(buttonList, 1); Grid.SetColumn(buttonList, 0); } else { Grid.SetRow(buttonList, 0); Grid.SetColumn(buttonList, 1); } } IV. Resources và Style: 1. Resources: Resources chứa các đối tượng được định nghĩa để có thể sử dụng nhiều lần mà không cần khai báo lại, các khai báo trong Resources thường là style, properties, classes. Resource thường được đặt trong các file .xaml (App.xaml, UserControl.xaml…) và .resx (AppResources.resx). Tùy vào mục đích mà ta có thể đặt các resource ở vị trí và phạm vi truy xuất phụ hợp nhất. Ví dụ: - Application Level Resources <Application x:Class="Canvas.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"> <!-- Application Resources--> <Application.Resources> <!--...--> </Application.Resources> <!--...--> </Application>
  12. 12. Lập Trình Windows Phone 8 Trang 12 Ví dụ: - Resources at Various Levels: <phone:PhoneApplicationPage.Resources> <!--Resources for the entire page go here--> </phone:PhoneApplicationPage.Resources> |-------------------------#-----------------------| <Grid> <Grid.Resources> <!--Resources used in the grid go here--> </Grid.Resources> <StackPanel> <StackPanel.Resources> <!--Resources used in the stackpanel go here--> </StackPanel.Resources> <Button> <Button.Resources> <!--Resources used in the Button go here--> </Button.Resources> </Button> </StackPanel> </Grid> 2. Style Thành phần Style cho phép người lập trình lưu trữ một danh sách các giá trị thuộc tính vào một nơi thuận tiện. Nó tương tự như cách làm việc của CSS trong các ứng dụng Web. Thông thường, các Style được lưu trữ trong phần Resource hoặc một thư mục Resource riêng của project. Các thuộc tính quan trọng nhất của thành phần Style bao gồm BasedOn, TargetType và Setters. Được xem như một loại tài nguyên, Style có thể được khai báo ở bất kì phân cấp nào, chẳng hạn như Grid, Windows hoặc ở mức Applications. Một khi đã chia thành các file tài nguyên riêng thì vấn đề tiếp theo là làm thế nào để chúng ta có thể tham chiếu tới tài nguyên đó. Ở đây ta sẽ dùng một giá trị khóa khi định nghĩa một tài nguyên trong XAML đó là x:Key.Khi cần tham chiếu tới tài nguyên này ta sử dụng giá trị của x:Key. Qua các ví dưới đây để có thể hiểu rõ hơn. Ví dụ: Các cách khai báo style cho các đối tượng Button  Button Properties : <Button Content="Update" Background="Red" BorderBrush="Maroon" BorderThickness="5" />  Button Properties Moved into a Style <Button Content="Update"> <Button.Style> <Style TargetType="Button"> <Setter Property="Background" Value="Red" />
  13. 13. Lập Trình Windows Phone 8 Trang 13 <Setter Property="BorderBrush" Value="Maroon" /> <Setter Property="BorderThickness" Value="5" /> </Style> </Button.Style> </Button>  Style Defined in a Resource <Grid> <Grid.Resources> <Style x:Key="MyButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Red" /> <Setter Property="BorderBrush" Value="Maroon" /> <Setter Property="BorderThickness" Value="5" /> </Style> </Grid.Resources> <Button Content="Update" Style="{StaticResource MyButtonStyle}" /> </Grid> Có 3 từ khóa ta cần chú ý :  x:Key : khai báo tên của style ( tên này là duy nhất).  TargetType: dùng để giới hạn loại điều khiển nào được sử dụng Style đó. Chẳng hạn Style với thuộc tính TargetType thiết lập cho button thì style này sẽ không thể áp dụng cho textbox.  StaticResource: để sử dụng Style đã khai báo ta khai báo thuộc tính Style kèm theo StaticResource và tên của Style theo sau. Ta có thể thiết lập style cho các đối tượng bằng cách sử dụng Properties Panel trong VS. 2.1 Style Inheritance: Style có tính chất kế thừa thông qua thuộc tính BaseOn, trong đó thì một style sẽ kế thừa thuộc tính chung của style khác. Mỗi kiểu hiển thị chỉ hỗ trợ một giá trị BaseOn. Sau đây là một ví dụ Style MyBigBorderStyle sẽ kế thừa các thuộc tính của MyButtonStyle :
  14. 14. Lập Trình Windows Phone 8 Trang 14 2.2 Implicit Styles: Bằng cách sư dụng thuông tính x:Key để đặt tên cho Style và sau đó sử dụng bằng cách gọi style đã khai báo {StaticResource keyname} đó là một Explicit Style. Nếu ta không khai báo thuộc tính x:Key thì style đó sẽ áp dụng cho tất cả các trường hợp của TargetType. Chẳng hạn như sau : 2.3 Merging Resources: Resource Dictionary là một cách lưu trữ các resource theo dạng hash table. Mỗi phần tử trong resource là một đối tượng và có thể được truy xuất thông qua định danh của chúng bằng cách dùng chỉ thị x:key. Đây là một giải pháp để tách riêng các resource như template, style,… ra khỏi tài liệu XAML. Resource Dictionary là một item template trong Visual Studio, vì vậy bạn chỉ cần Add > New Item trong Visual Studio để tạo một tài liệu .xaml mới với phần tử gốc là <ResourceDictionary>. Ví dụ: Trong project, ta tạo 1 file XAML tên “MyResources.xaml” và khai báo 1 Resource Dictionary như sau:
  15. 15. Lập Trình Windows Phone 8 Trang 15 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="MyButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Red" /> <Setter Property="BorderBrush" Value="Maroon" /> <Setter Property="BorderThickness" Value="5" /> </Style> <Style x:Key="MyBigBorderStyle" TargetType="Button" BasedOn="{StaticResource MyButtonStyle}"> <Setter Property="BorderThickness" Value="20" /> </Style> </ResourceDictionary> Sau đó mở file App.xaml ra và thêm vào như sau: <!--Application Resources--> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="MyResources.xaml"/> </ResourceDictionary.MergedDictionaries> <local:LocalizedStrings xmlns:local="clr-namespace:Style" x:Key="LocalizedStrings"/> </ResourceDictionary> </Application.Resources> Bây giờ thì chúng ta đã có thể sử dụng những gì đã định nghĩa trong file MyResources.xaml. 2.4 Themes: Người dùng có thể thiết lập một theme trên thiết bị để thay đổi màu nền, sáng và tối, và để thiết lập các Color Accent. Theme Resources mặc định trong mỗi ứng dụng : FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" Theme setting
  16. 16. Lập Trình Windows Phone 8 Trang 16 Ta có thể tham khảo Theme Resource trong Windows Phone 8 trong địa chỉ sau: http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx Chúng ta có thể xem mã XAML định nghĩa các style có sẵn trong thư mục sau: C:Program Files (x86)Microsoft SDKsWindows Phonev8.0Design 2.5 Định nghĩa và sử dụng Style: - Tạo 1 Windows Phone App mới. - Trong cửa sổ visual studio ta mở MainPage.xaml ra. Và chuyển qua cửa sổ Design view - Sau đó thì kéo 1 StackPanel từ toolbox vào Page như sau: - Mở cửa sổ Properties panel trong VS lên, tại vị trí Margin của StackPanel ta lam như sau: Design Folder
  17. 17. Lập Trình Windows Phone 8 Trang 17 - Set thuộc tính Orientation của StackPanel là Horizontal. - Kéo 3 Button và Stackpanel Trong file MainPage.xaml ta thêm đoạn code sau: <phone:PhoneApplicationPage.Resources> <Style TargetType="Button" x:Name="ButtonStyle"> <Setter Property="BorderThickness" Value="0" /> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFAAD3E6" Offset="0" /> <GradientStop Color="#FF198BD3" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </phone:PhoneApplicationPage.Resources> Sau đó gán Style này cho 3 Button vừa tạo: <Button Content="Hide" Style="{StaticResource ButtonStyle}"/>
  18. 18. Lập Trình Windows Phone 8 Trang 18 Kết quả mà ta nhận được là : 3. Template: Bằng việc sử dụng Style, ta có thể tạo ra một diện mạo nhất quán và dễ sửa đổi cho giao diện ứng dụng. Tuy nhiên, đôi khi bạn muốn đi xa hơn. Chẳng hạn, bạn muốn các nút bấm không phải là hình chữ nhật như thường lệ mà là hình ellipse. Hay bạn muốn hiển thị một tập dữ liệu nhân viên trong một công ty, trong đó, mỗi bản ghi nhân viên lại được trình bày theo một định dạng xác định. Bạn không thể đạt được điều này bằng những Setter căn bản trong Style. Trong trường hợp đó, bạn phải dùng đến khái niệm gọi là Khuôn mẫu (Template). Trong WP, có hai dạng khuôn mẫu được sử dụng: ControlTemplate dùng để định lại cấu trúc hiển thị cho điều khiển UI; và DataTemplate dùng để định ra cách thức hiển thị dữ liệu. Phần sau đây sẽ trình bày lần lượt hai dạng khuôn mẫu này. Phần này em nghĩ demo trực tiếp thì các bạn sẽ dễ hiểu hơn! V. Databinding: Data binding (liên kết dữ liệu) là một trong những cách đơn giản để ứng dụng của bạn hiển thị và tương tác với dữ liệu. Việc tách riêng phần giao diện (UI) và dữ liệu (data) sẽ mang lại sự thuận tiện khi thiết kế giao diện cũng như là khi viết mã quản lý dữ liệu. Khi có một kết nối (connection) giữa phần giao diện với phần dữ liệu thì những thay đổi từ một phía sẽ được cập nhật ở phía còn lại. Ví dụ, bạn dùng một TextBox để hiển thị tên của người dùng,TextBox này được liên kết (bind) với thuộc tính Name của một đối tượng người dùng, nếu bạn nhập một tên khác vào TextBox thì giá trị này sẽ được cập nhật tự động vào thuộc tính Name. Tương tự như vậy, nếu bạn thay đổi giá trị của Name thì giá trị này sẽ cập nhật lên TextBox. Data binding được sử dụng ở trong rất nhiều trường hợp: khi bạn muốn hiển thị danh sách các bài hát với ListBox (hoặc LongListSelector), hiển thị tên người dùng với TextBlock, hiển thị ảnh với Image v.v. Trong bài viết này chúng ta sẽ dùng những ví dụ nhỏ để minh họa cho các trường hợp bạn hay sử dụng Data binding.
  19. 19. Lập Trình Windows Phone 8 Trang 19 Binding Source có thể là bất cứ một đối tượng nào, nó chứa dữ liệu mà sẽ được liên kết đến Binding Target. Để có thể trở thành Binding Target thì đối tượng giao diện phải là một FrameworkElement, còn thuộc tính của nó phải là một DependencyProperty. Ví dụ, TextBlock là một đối tượng của FrameworkElement còn thuộc tính Text của nó là một DependencyProperty.Trong một liên kết thì chúng ta có thể xác định các thuộc tính cơ bản sau:  Đối tượng nguồn (Binding Source), đối tượng đích (Binding Target).  Chiều của dữ liệu. Việc này được thực hiện thông qua thuộc tính Binding.Mode.  Đối tượng converter. Đây là đối tượng được sử dụng để thực hiện việc chuyển đổi giá trị của Binding Source sang một giá trị khác được sử dụng cho Binding Target và ngược lại. Một converter phải là một đối tượng của IValueConverter. Chiều của liên kết(Mode): Có ba giá trị mà chúng ta có thể sử dụng cho thuộc tính Mode: 1. OneTime: Binding Target sẽ được cập nhật một lần duy nhất khi liên kết được khởi tạo. 2. OneWay: Binding Target sẽ được cập nhật khi liên kết được khởi tạo và mỗi khi giá trị của Binding Source được thay đổi. 3. TwoWay: Sự thay đổi giá trị của Binding Source sẽ được cập nhật lên Binding Target và theo chiều ngược lại. Để việc cập nhật giá trị được thực hiện một cách tự động thì đối tượng Binding Source phải triển khai interface INotifyPropertyChanged. Interface INotifyPropertyChanged có một event là PropertyChanged, event này sẽ làm nhiệm vụ thông báo cho Binding Target biết để cập nhật mỗi khi có sự thay đổi giá trị ở Binding Source. Ví dụ 1: Binding Elemnt Ví dụ 2: Data Binding VI. MVVM: 1. Cơ bản:

×