Chươngii

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:


http://en.wikipedia.org/wiki/Extensible_Application_Markup_Language







http://en.wikipedia.org/wiki/XML




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">  <Grid x:Name="LayoutRoot" Background="Transparent">  </Grid>



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.Maps" 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;


http://schemas.microsoft.com/winfx/2006/xaml/presentation




http://schemas.microsoft.com/winfx/2006/xaml



http://schemas.microsoft.com/expression/blend/2008




http://schemas.openxmlformats.org/markup-compatibility/2006













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); }



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 :



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



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 >



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



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>


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"


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"/>



</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>


Trang 12

Ví dụ: - Resources at Various Levels:

<phone:PhoneApplicationPage.Resources>  </phone:PhoneApplicationPage.Resources> |-------------------------#-----------------------| <Grid> <Grid.Resources>  </Grid.Resources> <StackPanel> <StackPanel.Resources>  </StackPanel.Resources> <Button> <Button.Resources>  </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" />


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 :


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:


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


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 SDKs\Windows Phone\v8.0\Design

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

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx


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}"/>


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.


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:

http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.frameworkelement(v=vs.105).aspx

http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.dependencyproperty(v=vs.105).aspx

http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.data.binding.mode%28v=vs.105%29.aspx

http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.data.ivalueconverter%28v=vs.105%29.aspx

http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.data.bindingmode%28v=vs.105%29.aspx

Education

Chươngii