Bài 6: Xây dựng giao diện với XAML trong Windows Phone (phần 3)


Phần này Tui sẽ nói về Cách sử dụng Resource và Style.

Trong quá trình xây dựng ứng dụng, chắc chắn ta sẽ không tránh khỏi yêu cầu làm thế nào để ứng dụng của ta mang một style thống nhất, ví dụ những màu chữ, kiểu chữ, font chữ trên các trang phải đồng nhất với nhau. Ngoài ra, ta còn phải làm việc với một số control đòi hỏi phải định dạng trước mẫu dữ liệu mà control đó sẽ hiển thị, ví dụ như ListBox hay LongListSelector. Và ta cũng cần tách biệt giữa code định dạng các control và code khai báo các control để tài nguyên được trong sáng và dễ chỉnh sửa hơn, có thể tái sử dụng được nhiều lần. Để giải quyết các vấn đề trên, ta cần sử dụng các style và resource được cung cấp trong Windows Phone.

Resource sẽ được chia thành 2 nhóm chính đó là Style DataTemplate.

Ta sử dụng Style để định dạng, trang trí cho các control, còn DataTemplate dùng để định nghĩa mẫu dữ liệu cho các list control (Listbox, LonglistSelector)

Style: Để định nghĩa một style, ta khai báo cú pháp XAML như sau:

<Grid.Resources >
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Height"   Value="100" />
<Setter Property="Width"   Value="200"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background" Value="BlueViolet"/>
</Style>
 </Grid.Resources>

– Thuộc tính x:Key dùng để định danh cho style

– Thuộc tính TargetType dùng để loại control sẽ được áp dụng

Lưu ý: nếu thuộc tính x:Key không được khai báo thì tất cả các control cùng loại với TargetType sẽ được áp dụng style.

Một thẻ <Setter/> sẽ khai báo cho một thuộc tính của control

– Để áp dụng 1 style cho 1 control ta khai báo thuộc tính Style của control đó như sau:

Style=”{StaticResource <tên của style>} ”

Tức là ta có thể sử dụng như sau:

<Button Style=”{StaticResource  ResourceKey=buttonStyle}”  Content= “drthanh”/>

Kết quả:

wp6_27Đặc biệt ta cũng có thể kế thừa Style theo cách sau:

wp6_28

DataTemplate: để định dạng DataTemplate, ta cũng định dạng giống như khi định dạng ItemTemplate cho các control.

VD: Định nghĩa một DataTemplate:


<DataTemplate x:Key="ListBoxTemplate">

<StackPanel>

<TextBlock Text="Name"/>

<TextBlock Text="{Binding Path=Name}"/>

<TextBlock Text="Surname"/>

<TextBlock Text="{Binding Path=Surname}"/>

</StackPanel>

</DataTemplate>

– Thuộc tính x:Key dùng để định danh cho DataTemplate.

Ta cũng có thể khai báo dạng ControlTemplate:

wp6_29Hoặc tách rời controltemplate ra:

wp6_30Bây giờ Tui sẽ nói về các vị trí đặt Resource:

Có 3 vị trí:

– Đặt ở Page Resource

  • Được khai trong một trang XAML và chỉ được sử dụng trong trang đó.
  • Được định nghĩa trong cặp thẻ:

<phone:PhoneApplicationPage.Resources>

<!-- Định nghĩa các Resource tại đây -->

</phone:PhoneApplicationPage.Resources>

– Đặt ở Application Resource

  • Được khai trong một trang App.xaml và toàn bộ các trang trong ứng dụng đều có thể sử dụng
  • Được định nghĩa trong cặp thẻ:

<Application.Resources>

<!-- Định nghĩa các Resource tại đây -->

</Application.Resources>

– Đặt trong Dictionary Resource

  • Được khai báo trong một file xml riêng lẻ
  • Tên file phải được kết thúc bằng “.xaml
  • Các Resource được định nghĩa trong cặp thẻ:

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!--Định nghĩa các Resource tại đây -->

</ResourceDictionary>

  • Để sử dụng, ta add vào Application Resource hoặc Page Resource như sau:

<Application.Resources>

<ResourceDictionary>

<local:LocalizedStrings xmlns:local="clr-namespace:Demo_Brush_Resource" x:Key="LocalizedStrings"/>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="Assets/Resources/Style.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources

Chi tiết cho việc tạo Dictionary Resource:

Bước 1: Tạo một Project tên LearnResource

– Bước 2: Thêm 1 Dictionary Resource

Bấm chuột phải vào Project chọn Add/New Item:

wp6_31

Chú ý mặc định là xml bạn tự gõ thành .xaml

Sau đó tiến hành viết nội dung cho MyResource.xaml như hình dưới đây:

wp6_32


<ResourceDictionary     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<LinearGradientBrush x:Key="drthanhbrush">

<GradientStop Color="AliceBlue" Offset="0" />

<GradientStop Color="Blue" Offset=".7" />

</LinearGradientBrush>

</ResourceDictionary>

– Bước 3– Đưa vào Application Resource trong App.xaml.

 Mở App.xaml:


<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="MyResource.xaml"/>

</ResourceDictionary.MergedDictionaries>

<local:LocalizedStrings

xmlns:local="clr-namespace:LearnResource"

x:Key="LocalizedStrings"/>

</ResourceDictionary>

</Application.Resources>

– Bước 4sử dụng Application Resource trong 1 trang XAML nào đó, ví dụ (MainPage.xaml):


<Button Background="{StaticResource ResourceKey=drthanhbrush}"

Content="drthanh"/>

Trong Dictionary resource Tui có để key là drthanhbrush, thì ở chỗ sử dụng sẽ dùng key này.

Như vậy bạn đã biết cách tạo Dictionary Resource và cách sử dụng nó.

Bạn chú ý tag:

<ResourceDictionary.MergedDictionaries>

Là nơi cho phép chúng ta sử dụng nhiều file Dictionary Resource, ví dụ tập các style dành cho Textblock lưu 1 dictionary riêng, tập các style danh cho Button lưu 1 dictionary riêng…. cuối cùng ta gom chung lại sử dụng trong ứng dụng.

Khi sử dụng Dictionary thì ta nên đưa vào Application Resource để mọi nơi trong ứng dụng đều có thể truy suất.

Chúc các bạn thành công.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s