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 và 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:
[code language=”xml”]
<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>
[/code]
– 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ả:
Đặc biệt ta cũng có thể kế thừa Style theo cách sau:
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:
[code language=”xml”]
<DataTemplate x:Key="ListBoxTemplate">
<StackPanel>
<TextBlock Text="Name"/>
<TextBlock Text="{Binding Path=Name}"/>
<TextBlock Text="Surname"/>
<TextBlock Text="{Binding Path=Surname}"/>
</StackPanel>
</DataTemplate>
[/code]
– Thuộc tính x:Key dùng để định danh cho DataTemplate.
Ta cũng có thể khai báo dạng ControlTemplate:
Hoặc tách rời controltemplate ra:
Bâ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ẻ:
[code language=”xml”]
<phone:PhoneApplicationPage.Resources>
<!– Định nghĩa các Resource tại đây –>
</phone:PhoneApplicationPage.Resources>
[/code]
– Đặ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ẻ:
[code language=”xml”]
<Application.Resources>
<!– Định nghĩa các Resource tại đây –>
</Application.Resources>
[/code]
– Đặ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ẻ:
[code language=”xml”]
<?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>
[/code]
- Để sử dụng, ta add vào Application Resource hoặc Page Resource như sau:
[code language=”xml”]
<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
[/code]
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:
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:
[code language=”xml”]
<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>
[/code]
– Bước 3– Đưa vào Application Resource trong App.xaml.
Mở App.xaml:
[code language=”xml”]
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyResource.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:LocalizedStrings
xmlns:local="clr-namespace:LearnResource"
x:Key="LocalizedStrings"/>
</ResourceDictionary>
</Application.Resources>
[/code]
– Bước 4– sử dụng Application Resource trong 1 trang XAML nào đó, ví dụ (MainPage.xaml):
[code language=”xml”]
<Button Background="{StaticResource ResourceKey=drthanhbrush}"
Content="drthanh"/>
[/code]
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.
