XAML là gì?

Trong bài trước chúng ta đã biết, Xamarin.Forms là một thư viện cho phép các nhà phát triển có thể tạo ra các giao diện người dùng (User Interface) có thể được chia sẻ một cách dễ dàng giữa các hệ điều hành (cross-platform) như Android, iOS, Windows Phone. Chúng ta cũng đã cài đặt Visual Studio 2017 và máy ảo Genymotion dùng cho việc kiểm tra ứng dụng trên nền tảng Android. Trong bài này chúng ta sẽ tìm hiểu cách thiết kế giao diện Xamarin.Forms bằng cách dùng XAML.

XAML viết tắt của eXtensible Application Markup Language được giới thiệu đầu tiên trong ứng dụng WPF (Windows Presentation Foundation). XAML là ngôn ngữ đánh dấu, thừa kế từ ngôn ngữ XML và có một số tiện ích cơ bản sau:

  • Với XAML, các trang, bố cục, các điều khiển được thể hiện một cách cấu trúc với các phần tử XML và các thuộc tính tương ứng.
  • Tách bạch giữa việc thiết kế giao diện và lập trình. Điều này cho phép các nhà thiết kế và các nhà lập trình có thể tập trung vào “chuyên môn” của mình mà không cần can thiệp lẫn nhau.

Thiết kế giao diện với XAML

Như trong ứng dụng HelloWorld chúng ta đã tạo trong bài trước, có 3 tập tin quan trọng chúng ta cần tập trung là App.xaml – dùng để cấu hình ứng dụng, MainPage.xaml – dùng để thiết kế giao diện người dùng, và MainActivity.cs – dùng cho nhà lập trình C#. Để hiểu hơn về cách tạo một giao diện bằng XAML và cách tương tác với các điều khiển trên giao diện thông qua các sự kiện, trong bài này chúng ta sẽ tạo một ứng dụng khác, FirstUIXAML, theo các bước như tạo ứng dụng HelloWorld. Cùng nhìn lại nội dung tập tin XAML quan trọng nhất, MainPage.xaml:


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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

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

xmlns:local="clr-namespace:FirstUIXAML"

x:Class="FirstUIXAML.MainPage">



<Label Text="Welcome to Xamarin.Forms!"

VerticalOptions="Center"

HorizontalOptions="Center" />



</ContentPage>

Tập tin này chứa một trang hay một khung nhìn tùy chọn. Trang được xác định bằng phần tử gốc ContentPage và các thuộc tính của phần tử này gồm xmlns – trỏ đến một namespace XML, xmlns:x – trỏ đến một lược đồ XML, và xmlns:local – trỏ đến assembly của ứng dụng. Phần tử ContentPage chứa phần tử con Label tham chiếu đến lớp Label C# và các thuộc tính của lớp này được gán đến các thuộc tính XML như Text, VerticalOptions, hay HorizontalOptions. Bây giờ, chúng ta sẽ thay đổi nội dung của thuộc tính Text của phần tử Label và thêm một phần tử con khác, Button, vào phần tử ContentPage:


<ContentPage ...">



<Label Text="Welcome to First XAML application!"

VerticalOptions="Center"

HorizontalOptions="Center" />

<Button x:Name="btn" Text="Click to run!"

Margin="0,10,0,0"/>



</ContentPage>

Thực thi ứng dụng và kết quả sẽ trông như sau:

Chúng ta vẫn chưa thấy các điều khiển như Label hay Button bởi vì các điều khiển này chưa được đặt trong một layout nào. Thêm một layout, StackLayout, chứa hai phần tử Label và Button như sau:


<StackLayout Orientation="Vertical" Padding="10">

<Label Text="Welcome to First XAML application!"

VerticalOptions="Center"

HorizontalOptions="Center" />

<Button x:Name="btn" Text="Click to run!"

Margin="0,10,0,0" BackgroundColor="Red"/>

</StackLayout>

Các layout sẽ được tìm hiểu chi tiết trong các bài kế tiếp. Thực thi lại ứng dụng và kết quả lúc này:

Lúc này, nếu chúng ta nhấp chuột vào nút CLICK TO RUN thì vẫn chưa có gì xảy ra. Chúng ta cần một ít mã C# cho việc này.

Xử lý sự kiện

Label và Button là các điều khiển trong giao diện và để tương tác với các điều khiển trên giao diện chúng ta cần xử lý các sự kiện với mã C#. Ví dụ, chúng ta muốn một hành động gì đó xảy ra, như hiển thị một thông điệp, khi nhấn người dùng nhấn chuột trái vào button CLICK TO RUN, chúng ta cần xử lý sự kiện Click của Button theo các bước sau:

– Thêm thuộc tính Clicked đến Button trong tập tin MainPage.xaml và lưu ý rằng một thực đơn sẽ hiện ra yêu cầu chúng ta chọn phương thức thực thi khi sự kiện Click xảy ra:

Nhấp đôi chuột vào <New Event Handler>, một tên phương thức mặc định sẽ xuất hiện:

Xem và viết mã C# cho phương thức này chúng ta có thể vào tập tin MainPage.xaml.cs:

Hay bôi đen tên phương thức và nhấp chuột phải chọn Go to Definition:

Phương thức btn_Clicked trông như sau:


private void btn_Clicked(object sender, EventArgs e)

{



}

Thêm dòng lệnh vào phương thức:


private void btn_Clicked(object sender, EventArgs e)

{

DisplayAlert("Hello", "I am Ngoc Minh", "Cancel");

}

Kết quả khi nhấn nút:

Lời kết

Trong bài viết này chúng ta đã tìm hiểu cách thức tạo một giao diện Xamarin.Forms đơn giản dùng XAML và cũng đã tìm hiểu cách xử lý sự kiện của các điều khiển khi người dùng tương tác chúng. Trong các bài tiếp theo chúng ta sẽ tìm hiểu nhiều hơn về layout và các vấn đề khác trong Xamarin.Forms.