Building Universal Windows Apps với C#/XAML, dựa trên một khóa học cùng tên trên MVA, hướng dẫn các bạn xây dựng ứng dụng Universal bằng C# và XAML.

Đối tượng: Lập trình viên Windows Store, Windows Phone.

Các khóa học tham khảo:

Bài 3: Xaml & Controls

Để xây dựng giao diện người dùng (UI) bạn cần phải lựa chọn những control tương ứng và bố trí chúng một cách thích hợp lên từng trang, việc đó thường qua các bước sau:

  • Thêm control vào UI
  • Điều chỉnh property của control đó (như background, foreground, width, height),…
  • Viết các đoạn code xử lý khi người dùng tương tác với control đó

Như ta thấy một thành phần UI trên ứng dụng Windows sẽ có 2 file đi kèm với nhau, 1 file .xaml chứa đoạn code xaml mô tả giao diện và 1 file .cs chứa code C# mô tả xử lý logic của giao diện đó.

  • XAML là gì? Xem tại đây
  • Học C# cơ bản miễn phí tại đây

Để thêm một control ta có một số cách sau

  • Dùng XAML design tool của Visual Studio hoặc như Blend (kéo thả): Xem thêm

  • Thêm các đoạn code XAML vào XAML editor

  • Dùng các đoạn code C# để thêm control khi ứng dụng chạy

* Ví dụ để thêm một TextBox vào Page bạn có thể mở giao diện thiết kế (design) và dùng chuột kéo control TextBox từ cửa sổ ToolBox vào Page. Hoặc có thể nhập đoạn code XAML tương ứng:

[xml] <TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>[/xml]

* Bạn có thể đặt tên cho control để có thể “gọi” nó từ dưới code bằng cách dùng cửa sổ Properties

Hoặc dùng attribute x:Name

[xml]<Button x:Name="Button1" Content="Button"/>
[/xml]

* Tương tự, để điều chỉnh các thuộc tính (property) cho control bằng cửa sổ Properties

Hoặc dùng XAML

Xử lý sự kiện (event)

Mỗi control điều có các sự kiện (event) cho phép nhận các tương tác tương ứng từ người dùng và để thực thi các lệnh tương ứng với một event ta phải viết một phương thức để handle nó, tương tự ta có thể dùng cửa sổ Properties-Tab Events:

Bạn có thể Double Click để tạo nhanh một phương thức, hoặc nhập vào tên phương thức sau đó Double Click

Hoặc dùng Xaml

Chọn <New Event Handler> để tạo nhanh một phương thức, hoặc nhập tên phương thức sau đó nhấn F12

Hoặc dùng code C#

[csharp]Button1.Click += new RoutedEventHandler(Button_Click);[/csharp]


Khi đó trong file .cs của bạn sẽ tự sinh ra đoạn code handler mà bạn có thể viết lệnh để xử lý sự kiện cho control đó:

[csharp]private void Button_Click(object sender, RoutedEventArgs e)
{
Button b = (Button)sender;
b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}[/csharp]

Tham khảo danh sách các control và cách sử dụng

Tại đây