1.Làm việc với XAML
XAML (Extended Application Markup Language) là một ngôn ngữ ựánh dấu khai báo sử dụng ựể tạo giao diện người dùng. File XAML là file mô tả cấu trúc của giao diện và những quan hệ giữa các phần tử với các nguồn dữ liệu, các phương thức nếu có của các phần tử.
Mỗi phần tử XAML ựại diện cho một ựối tượng cụ thể. Phần tử XAML là ựiển hình trực quan nhưng cũng có thể ựại diện cho các nguồn dữ liệu hoặc ựối tượng tùy chỉnh.
Có thể xác ựịnh XAML trực tiếp trong trình soạn thảo XAML hoặc sử dụng màn hình designer. Mặc dù các nhà thiết kế Visual Studio ựã cố gắng cải thiện liên tục, nhưng vẫn có một số nhiệm vụ chỉ có thể ựược thực hiện trực tiếp trong XAML. Bạn sẽ trở nên quen thuộc với cả hai phương pháp tiếp cận( C# và xaml) và sử dụng con ựường thuận tiện nhất cho từng tình huống.
điểm khởi ựầu ựiển hình là MainPage.xamlfile , trong ựó ựịnh nghĩa giao diện người dùng ban ựầu, tức là trang ựầu tiên. Phần tử gốc là PhoneApplication - Page. Thuộc tắnh X: Class chỉ tên của lớp cơ bản của PhoneApplicationPage ựược ựịnh nghĩa trong code-behind ( Vắ dụ -1).Cấu trúc cơ sở Page XAML là :
Nguyễn Văn Thạnh-AnLang-Huế | 31
2.Namespace - không gian tên
Bên trong khai báo lớp bạn sẽ thấy một loạt các không gian tên XML bắt
ựầu bằng xmlns ( viết tắt của xml namespace) theo sau là một dấu hai chấm, sau
ựó là tên của namespace , một dấu bằng và ựường dẫn ựến assembly mà không
gian tên ựại diện. Vắ dụ:
xmlns: phone = "clr-namespace: Microsoft.Phone.Controls; assembly = Microsoft.Phone"
Ở ựây, không gian XML tên phone ựại diện cho không gian tên Microsoft.Phone.Controls trong Microsoft.Phone. Với không gian tên khai báo, bạn có thể sử dụng bất kỳ ựối tượng nào của không gian tên ựó trong XAML. Vắ dụ,bạn có thể sử dụng ựiều khiển WebBrowser từ không gian tên phone bằng cách tạo ra thẻ :
<phone:WebBrowser />
Bạn cũng có thể nhận thấy rằng có một không gian tên XML trong Vắ dụ-1 không có tên. đây là không gian tên XML mặc ựịnh và áp dụng cho tất cả các phần tử không chỉ rõ một không gian tên XML. Vắ dụ, phần tử Grid là ở trong không gian tên mặc ựịnh này và ựược khai báo như sau:
<Grid x:Name="LayoutRoot" Background="Transparent">...
Không gian tên thường ựược tạo ra tự ựộng khi ựiều khiển ựược kéo từ hộp công cụ ựến designer. Nếu bạn muốn tham khảo một assembly không có sẵn từ hộp công cụ thì sao? để khai báo một xmlns mới, gõ không gian tên XML mới, ta thêm một tên duy nhất và gõ dấu bằng. IntelliSense sẽ thả xuống một danh sách các assembly tham chiếu trong dự án cho bạn lựa chọn. Hình 3-1 cho thấy một không gian tên XML tên là Ộmy Ợ và danh sách các assembly từ IntelliSense.
Nguyễn Văn Thạnh-AnLang-Huế | 32
(hình 3-1) Nếu bạn ựã tạo một lớp public MyClass trong code behind và thêm một không gian tên XML, thì sau ựó bạn có thể sử dụng không gian tên XML này trong các ựánh dấu (từ ựây về sau tôi dùng từ markup ựể chỉ ựoạn code có dùng thẻ ựánh dấu Ờ tag Ờ trong xaml) của xaml (xem hình 3-2). Khi gõ dấu hai chấm, IntelliSense sẽ hiển thị một danh sách các ựối tượng có thể ựược sử dụng, ở ựây là myClass.
các lớp ựược tham chiếu phải là kiểu có giá trị trong markup. MyClass thừa kế từ FrameworkElement, một kiểu có thể ựược sử dụng trong bố trắ XAML
3.Cú pháp XAML
để hiểu cú pháp XAML, tốt nhất bắt ựầu từ ựơn giản và từ cách xây dựng. Ở ựây ta chưa nói về các phần tử ựiều khiển ựược hổ trợ bởi XAML, tuy nhiên ta tạm thời chấp nhận là các phần tử trong phần này là có sẵn trong hộp công cụ .Bạn có thể chép các ựoạn code của các vắ dụ vào XAML và quan sát cách chúng hoạt ựộng trong designer
Nguyễn Văn Thạnh-AnLang-Huế | 33
Bạn có thể khai báo thể hiện của một lớp trong XAML bằng cách sử dụng dấu bắt ựầu < tên loại phần tử > và kết thúc phần tử (</tên loại phần tử >) hoặc sử dụng cú pháp "tự ựóng " <tên loại phần tử/> như trong Vắ dụ-2:
Vắ dụ 2: Cách khai báo thể hiện của lớp <!Ởdùng dấu bắt ựầu và kết thúc...-->
<Button></Button> <!Ởdấu tự ựóng-->
<Button />
Lưu ý : Bạn hãy thoải mái với cả hai: design view và Xaml views. XAML là ựại diện ựầy ựủ nhất của thiết kế trang, trong khi design view thường (nhưng không luôn luôn) nhanh hơn và dễ dàng sử dụng hơn vì nó trực quan và không phải gõ code.
Thuộc tắnh ựối tượng ựược xác ựịnh thông qua các thuộc tắnh XAML. đoạn mã dưới ựây ựịnh nghĩa một nút với thuộc tắnh Background là "Red".
<button Background="Red" />
Nếu thuộc tắnh là phức tạp hơn thì xử lý thì thế nào ? Cú pháp " thuộc tắnh phần tử" cho phép mỗi thuộc tắnh ựược thể hiện như là cách thể hiện một phần tử riêng biệt. vắ dụ về thuộc tắnh Background là tầm thường nhưng lại cho thấy cơ sở của cú pháp thuộc tắnh phần tử .
Vắ dụ 3:
<button Content="Update">
<Button.Background> Red </ Button.Background> // xử lý như khai
báo phần tử. </ Button>
Cú pháp thuộc tắnh Phần tử có thể xử lý ựối tượng lồng nhau như SolidColorBrush ựược lồng trong background của button :.
Vắ dụ 4:
Nguyễn Văn Thạnh-AnLang-Huế | 34
<Button.Background>
<SolidColorBrush Color="Red" />
</Button.Background> </Button>
Vài vắ dụ cuối cùng thẩm ựịnh với kết quả tương tự, tạo một nút với một nền màu ựỏ. Cú pháp phần tử thuộc tắnh trở nên thực sự hữu ắch khi thuộc tắnh không thể ựược thể hiện trong một chuỗi giá trị ựơn giản. Vắ dụ trong Vắ dụ 4 ta ựịnh nghĩa một background có màu dạng LinearGradientBrush và màu nhạt dần từ màu ựen sang màu ựỏ. <Button> <Button.Background> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color="Black" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Button.Background> </Button>
Nguyễn Văn Thạnh-AnLang-Huế | 35
May mắn thay, phân tắch cú pháp (parser) là khá tốt ở chổ nó có thể tối ưu hóa, do ựó, markup có thể ựược rút ngắn thành markup như trong Vắ dụ 5.
GradientStop là nội dung mặc ựịnh cho các phần tử, do ựó, các thẻ có thể ựược bỏ qua. Tương tự như vậy, các phân tắch cú pháp hiểu rằng Phần tử GradientStop hình thành từ một collection, vì vậy phần tử GradientStopCollection là không cần thiết cho việc markup
Vắ dụ3-5 <Button> <Button.Background> <LinearGradientBrush> <GradientStop Color="Black" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </LinearGradientBrush> </Button.Background> </Button>. 4.Thuộc tắnh kèm theo
Thuộc tắnh kèm theo là các ựặc tắnh có thể ựược sử dụng bởi các lớp khác.
Cú pháp cơ bản là: (ựối tượng sở hữu ) .property. Trong vắ dụ 6, StackPanel và "ContentPanel" Grid sử dụng thuộc tắnh kèm theo là Grid.Row xác ựịnh nơi sẽ hiển thị trong Grid.
Nguyễn Văn Thạnh-AnLang-Huế | 36 <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <StackPanel x:Name="TitlePanel" Grid.Row="0"> </StackPanel> <Grid x:Name="ContentPanel" Grid.Row="1"> </Grid> </Grid>
Từ designer , bạn có thể truy cập thuộc tắnh ựi kèm thông qua cửa sổ Properties. Hình 3-3 cho thấy thuộc tắnh Row của Phần tử "TitlePanel". Chú ý tooltip cho Row sử dụng ký hiệu dấu chấm ựể chỉ ra rằng ựây là một thuộc tắnh ựi kèm của lớp public Grid
Lưu ý : Vào Properties của các phần tử trong xaml ( hay design view ) bằng cách chỉ vào phần tử, kắch phải chuột và chọn Properties. Hoặc dùng tab properties
Nguyễn Văn Thạnh-AnLang-Huế | 37
trong solution explorer. Cứ mỗi tùy chọn trong properties sẽ tương ứng với code trong xaml, hãy chọn thử vài thuộc tắnh ựi kèm và quan sát code tương ứng.
5.Phần mở rộng markup
Phần mở rộng markup là biểu thức bao quanh bởi dấu ngoặc nhọn ựể biểu thị cú pháp hoàn toàn khác với XAML tiêu chuẩn.
Thông thường, phần mở rộng markup dùng ựể tham chiếu ựến các tài nguyên hoặc là các biểu thức ràng buộc. Vắ dụ 7 cho thấy một mẫu liên kết thuộc tắnh Text của TextBlock với dữ liệu có tên là "MyTitle" và cũng liên kết style với style ựược xây dựng sẵn trong tài nguyên PhoneTextNormalStyle .
Vắ dụ 7:
<TextBlock x:Name="ApplicationTitle" Text="{Binding MyTitle}"
Style="{StaticResource PhoneTextNormalStyle}" />
6.Tài nguyên và Styles
Tài nguyên là một container ựược ựặt tên của các ựối tượng cho phép bạn markup xác ựịnh ở một vị trắ riêng biệt . Bạn có thể ựịnh nghĩa các lớp , style , thuộc tắnh , và v.vẦ trong một tài nguyên và tái sử dụng tài nguyên này tại nhiều ựịa ựiểm. điều này cung cấp một cơ hội tuyệt vời ựể tái cấu trúc bằng cách di chuyển các khối markup thường dùng vào tài nguyên.
Lưu ý: có một loại tập tin tài nguyên thứ hai với phần mở rộng "resx" chứa chuỗi nội bộ. Các tập tin tài nguyênchúng ta ựang làm việc với ở ựây có phần mở rộng là "XAML" .
Nguyễn Văn Thạnh-AnLang-Huế | 38
Styles là tập hợp các thuộc tắnh thường dùng ựược lưu trữ trong từ ựiển tài nguyên. để xem cách làm việc của chúng , ta hãy bắt ựầu với một nút bấm có một tập hợp các thuộc tắnh hình thức bên ngoài .
Vắ dụ 8:
<Button Content="Update" Background="Red" BorderBrush="Maroon" BorderThickness="5" />
Bạn có thể di chuyển tập hợp các ựặc tắnh này thành một style bằng cách sử dụng cú pháp thuộc tắnh phần tử .
Markup trong Vắ dụ 9 sẽ di chuyển Background BorderBrush, và các thuộc tắnh bên trong BorderThickness thành style
<Button Content="Update"> <Button.Style> <Style TargetType="Button"> <Setter Property="Background" Value="Red" /> <Setter Property="BorderBrush" Value="Maroon" /> <Setter Property="BorderThickness" Value="5" /> </Style> </Button.Style> </ButtoN>
Nguyễn Văn Thạnh-AnLang-Huế | 39
Code này dài, bao gồm một thuộc tắnh của Style mới ựược gọi là TargetType. Lợi thế trở thành tâm ựiểm khi bạn di chuyển style này thành một tài nguyên. Bất kỳ yếu tố nào trong layout XAML ựều có một tập hợp các tài nguyên (resources collection) Trong Vắ dụ 10, Style chứa trong resources collection của Grid.
Vắ dụ 10. Style ựược ựịnh nghĩa thành tài nguyên
<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ó ba thay ựổi quan trọng so với vắ dụ 9 :
Ớ đặt tên cho Style theo cách : x: Key = và gán một tên duy nhất. Trong vắ
dụ này, style ựược ựặt tên là "MyButtonStyle".
Ớ Style phải có thuộc tắnh TargetType ựược gán cho một loại phần tử . Trong
vắ dụ này, Style ựược áp dụng cho phần tử Button.
Ớ Thuộc tắnh Style của các nút ựược chỉ ựịnh bằng cách dùng cú pháp mở
rộng ựánh dấu (tức là , dùng dấu ngoặc móc nhọn "{}"), có chỉ ra StaticResource và tên của resource ( key) là MyButtonStyle .
MyButtonStyle trong markup sẽ chỉ vị trắ Style có cùng tên trong tài nguyên của Grid. Hình 3 4 chỉ ra mối quan hệ này :
Nguyễn Văn Thạnh-AnLang-Huế | 40
Khi Style chuyển vào tài nguyên, chúng ta có thể sử dụng Style cho các nút khác. Thêm vào ựó, cú pháp cho sẽ nút ựược gọn gàng .
Vắ dụ 11 ựịnh nghĩa ba nút với nội dung khác nhau, nhưng tất cả ựều có cùng một Style. Mỗi nút hiển thị với nền màu ựỏ và biên giới màu hạt dẻ kắch thước 5 pixel
Vắ dụ 11.
<Button Content="Update" Style="{StaticResource MyButtonStyle}" Grid.Row="0" />
<Button Content="Refresh" Style="{StaticResource MyButtonStyle}" Grid.Row="1"/>
<Button Content="Delete" Style="{StaticResource MyButtonStyle}" Grid.Row="2"/>
Nguyễn Văn Thạnh-AnLang-Huế | 41
Một khi Style ựã ựược ựưa vào tài nguyên thì có thể dùng nó trong cả xaml và cả Visual Studio . Trong property của button, kắch vào nút bên phải của mục Style và chọn Style từ Local Resource :
Nguyễn Văn Thạnh-AnLang-Huế | 42
7. Phạm vi của tài nguyên
Nơi một nguồn tài nguyên ựược ựặt, xác ựịnh phạm vi của tài nguyên. Tất cả các ựối tượng FrameworkElement (tức là, tất cả các ựối tượng có thể ựược bố trắ trong một XAML), có một tập các tài nguyên . Ngoài ra, mỗi ựối tượng chắnh nó có tập các tài nguyên riêng của mình. Nếu bạn mở App.xaml, bạn sẽ tìm thấy một Application. Resourceselement nơi bạn có thể thêm các tài nguyên, cũng giống như chúng tôi ựã làm cho Grid (xem Vắ dụ 12). Các tài nguyên có sẵn trong suốt toàn bộ phạm vi ứng dụng. Vắ dụ 12. Cấp ựộ tài nguyên <Application x:Class="WorkingWithXAML.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>
Bạn có thể có tài nguyên trong PhoneApplicationPage dành cho các ựối tượng trên trang (nhưng không phải các trang khác), trong một Grid, một Button, và v.v.... Vắ dụ 13 cho thấy các yếu tố Resource ựược xác ựịnh ở mức ựộ khác nhau trong trang.
Listing 3-13. Resources ở các mức khác nhau <phone:PhoneApplicationPage >
Nguyễn Văn Thạnh-AnLang-Huế | 43
<!--Resources cho trang bắt ựầu từ ựây --> </phone:PhoneApplicationPage.Resources>
<Grid>
<Grid.Resources>
<!--Resources cho grid bắt ựầu từ ựây
</Grid.Resources> <StackPanel>
<StackPanel.Resources>
<!--Resources cho StackPanel bắt ựầu từ ựây --> </StackPanel.Resources>
<Button>
<Button.Resources>
<!--Resources cho button bắt ựầu từ ựây --> </Button.Resources>
</Button> </StackPanel> </Grid>
</phone:PhoneApplicationPage>
để minh họa vấn ựề xác ựịnh phạm vi tài nguyên bạn có thể chạy thử ựoạn xaml sau , có gì sai với XAML trong hình ? Style của Button ựược gạch chân và ựó là lỗi desigin - time : "Resource MyButtonStyle Ộkhông thể giải quyết. "
Nguyễn Văn Thạnh-AnLang-Huế | 44
Câu trả lời: "MyButtonStyle" ựược ựịnh nghĩa trong phạm vi của một Grid mà Button lại nằm bên ngoài grid ựó, tức là ngoài phạm vi của tài nguyên. Bằng cách di chuyển button vào trong Grid, bây giờ thuộc phạm vi ứng dụng của tài nguyên nên các lỗi ựã ựược giải quyết (xem hình 3-8).
Nguyễn Văn Thạnh-AnLang-Huế | 45
8.Thừa kế Style
Bạn muốn tinh chỉnh một style ựặc biệt nhưng không muốn thiết kế lại style ựó từ ựầu khi ựó hãy dùng thuộc tắnh Basedon ựể tham khảo một style khác. Hình dưới ựây cho thấy một style mới tên là "MyBigBorderStyle" ựã sử dụng thuộc tắnh Basedon ựể tham khảo "MyButtonStyle". Sau ựó nút Delete sử dụng style MyBigBorderStyle. Ta bảo MyBigBorderStyle ựã thừa kế style MyButtonStyle.
9-Styles ngầm ựịnh
Sử dụng x: Key property ựể ựặt tên cho Style và sau ựó sử dụng cú pháp {StaticResource KeyName} ựể sử dụng style là một vắ dụ rõ ràng về style . Bằng cách bỏ x: Key, Style sẽ áp dụng ngầm cho tất cả các instance của TargetType. Trong vắ dụ -14, style áp dụng cho tất cả các loại nút một cách tự ựộng. Sử dụng kỹ thuật này ựể thiết lập style global mà không cần phải xác ựịnh một cách rõ ràng tên style cho mỗi phần tử.
Nguyễn Văn Thạnh-AnLang-Huế | 46
<StackPanel>
<StackPanel.Resources>
<Style TargetType="Button"> // không ựặt tên
<Setter Property="Background" Value="Red" /> <Setter Property="BorderBrush" Value="Maroon" /> <Setter Property="BorderThickness" Value="5" /> </Style> </StackPanel.Resources> <Button Content="Update" /> <Button Content="Refresh" /> <Button Content="Delete" /> </StackPanel> 10-Sáp nhập Resources
Resource có thể ựược lưu trữ trong nhiều tập tin Resource Dictionary ựể tổ chức tốt hơn và sau ựó sáp nhập. Bạn có thể tạo nhiều file resource bạn muốn ựể tổ chức ứng dụng của bạn. Hiện nay, môi trường Visual Studio không có một phần tử dự án "Resource Dictionary " nào cả , nhưng bạn có thể tạo ra cho riêng bạn bằng cách làm như sau:
1. Trong solution Explorer, bấm chuột phải vào dự án và chọn Add New Item ➤ ... từ menu ngữ cảnh.
2. Trong mục hộp thoại Add New , chọn XML Filetemplate và ựặt tên là "MyResources.xaml". Nhấp vào nút Add ựể ựóng hộp thoại ựể tạo ra tập tin. Lưu ý ■ Nhớ sử dụng mở rộng "XAML." cho tập tin, ngay cả khi bạn ựang bắt ựầu tạo file với một template XML.
Nguyễn Văn Thạnh-AnLang-Huế | 47
3. Sửa MyResources.xaml và thay thế XML bằng markup trong vắ dụ 15. Không gian tên XML là rất quan trọng. Nếu không có không gian tên mặc ựịnh, thì ngay cả những phần tử Resource Dictionary cũng sẽ không ựược công nhận. Bạn cũng cần x: namespace , do ựó bạn có thể chọn tên cho tài nguyên bằng cách sử dụng x: Key = Vắ dụ 15. ResourceDictionary <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> </ResourceDictionary>