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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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: