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

Từ bài 1 ->bài 5 các bạn đã biết được cách thức tạo 1 Project Windows phone, cách sử dụng Emulator, đăng ký lập trình với thiết bị thật cũng như hiểu được vòng đời của một ứng dụng Windows phone như thế nào.

Từ Bài 6 trở đi Tui sẽ hướng dẫn các bạn cách thức lập trình với Windows Phone 8.1 Silverlight, Tui sẽ cố gắng tách từng phần nhỏ theo thứ tự từ dễ lên khó để giúp các bạn dễ nắm bắt cũng như có thể tự xâu chuỗi lại thành một hệ thống để có thể tiến hành viết được trọn vẹn một ứng dụng thực tế nào đó.

Trên internet có rất nhiều website hướng dẫn lập trình về Windows Phone 8.1 Silverlight các bạn có thể tham khảo, tuy nhiên Tui sẽ hướng dẫn theo cách của Tui các bạn có thể chấp nhận hoặc không chấp nhận, nhưng dù sao các bạn cũng phải hiểu được căn cơ của Windows Phone 8.1 thì mới bắt tay lập trình tốt được, không quan trọng là đọc trang nào.

Phần Xây dựng giao diện với XAML trong Windows Phone tui sẽ trình bày thành 4 bài độc lập như sau:

Phần 1) Cách thức làm việc với XAML

Phần 2) Cách sử dụng Brush

Phần 3) Cách sử dụng Resource và Style

Các bạn cần hiểu XAML trong Windows Phone vì khi bắt đầu new 1 project Helloworld là bạn để nhìn thấy ngay cấu trúc XAML của Windows Phone rồi. Nếu bạn đã có kiến thức về XML thì XAML cũng có vẻ tương tự nhưng võ công cao hơn 1 bậc.

Windows Phone sử dụng XAML làm đặc thù cho phần thiết kế giao diện, bạn có thể sử dụng trực tiếp Visual Studio hoặc công cụ Microsoft Expression Blend để thiết kế (thường trong quá trình cài đặt Visual Studio nó đã đính kèm công cụ này rồi).

Bây giờ ta bắt đầu tìm hiểu XAML với phần đầu tiên:

Phần 1) Cách thức làm việc với XAML

XAML là gì?

–XAML (Extensible Application Markup Language) – phát âm zammel.

XAML là một ngôn ngữ đánh dấu khai báo tương tự như XML, nó được sử dụng để tạo giao diện tương tác với người dùng. Mỗi một phần tử trong XAML (tag element) đại diện cho một đối tượng (Object). XAML giúp ta trực quan hóa giao diện cũng như có khả năng lưu trữ hiển thị Data Source cũng như Custom Object. Bạn có thể để ý là mỗi một Project bạn tạo ra đều có một file MainPage.xaml đó chính là màn hình khởi động mặc định khi chạy ứng dụng cho phép người sử dụng tương tác.

Microsoft đã tách thành 2 phần riêng biệt: Phần xaml để thiết kế phần xaml.cs để lập trình (có thể gọi là logic runtime) giúp ta nâng cao khả năng tùy biến các control. Bạn có thể tưởng tượng rằng XAML thực chất là một định dạng XML mà thôi (Có phần mở rộng là .xaml).

Ví dụ về trang MainPage.xaml:

[code language=”xml”]

<phone:PhoneApplicationPage

x:Class="LearnXAML.MainPage"

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

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

…

</phone:PhoneApplicationPage>

[/code]

XAML Namespace?

Thường mỗi trang XAML có khai báo các namespace với một prefix ngắn gọn mang tính gợi nhớ để giúp Ta dễ dàng lập trình cũng như truy suất các thông tin trong namespace.

Theo Tui thì có 2 lý do chính để chúng ta tạo namespace và đặt prefix name cho Namespace:

– Do tên Namespace quá dài và phức tạp.

– Do có nhiều lớp trùng tên nên cần đưa vào các Namespace khác nhau.

Việc sử dụng prefix (có thể hiệu đại khái là tên gì đó ngắn gọn đại diện cho Namespace) sẽ giúp chúng ta lập trình nhanh chóng.

Nếu quan sát kỹ ngay trang MainPage.xaml là bạn có thể phát hiện ra cách khai báo sử dụng namespace, prefix:

Ta có cú pháp như sau:

xmlns là từ khóa (tức là phải viết y xì vậy đó)

clr-namespace là từ khóa (tức là phải viết y xì vậy đó)

local là prefix (tức là tên ta muốn đặt đại diện cho CLR Namespace Name), thường thì ta nên đặt mang tính gợi nhớ.

Bạn phải nhớ công thức này để qua các bài tập tiếp theo Tui sẽ sử dụng lại (cụ thể trong việc sử dụng thư viện Windows Phone Toolkit)

Sau đây Tui sẽ làm một ví dụ về cách tạo 2 lớp MyButton (tức là cùng tên) nhưng nằm ở 2 namespace khác nhau, sau đó Tui sẽ minh họa cách sử dụng 2 MyButton này với công thức ở trên.

Lớp MyButton thứ nhất (mặc định có nền đỏ) tui cho nó nằm trong namespace tên tranduythanh.com, Lớp MyButton thứ nhì (mặc định có màu Xanh) tui cho nó nằm trong namespace caphe.net.

Tức là 2 MyButton này tui sẽ kế thừa từ Button của Microsoft và hiệu chỉnh lại theo thông số mà tui mô tả ở trên.

Bạn new một Project tên LearnNamespace:

Bạn thấy ở trên Tui tô xanh file MyButton.cs (File này sẽ chứa 2 class MyButton nằm ở 2 Namespace khác nhau), bạn tạo file này như sau:

– Bấm chuột phải vào Project/ Chọn Add/ Class…:

Màn hình Add New Item hiển thị ra như bên dưới, bạn chọn Class ở mục số 1, rồi đặt tên cho tập tin là MyButton ở mục số 2, sau đó bấm nút Add để tạo file này.

Sau khi tạo xong bạn Double click vào MyButton.cs để tiến hành coding như sau:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

//thêm thư viện này để kế thừa Button
using System.Windows.Controls;
//Thêm thư viện này để sử dụng SolidColorBrush
using System.Windows.Media;

namespace tranduythanh.com
{
public class MyButton:Button
{
public MyButton()
{
SolidColorBrush brush = new SolidColorBrush(Colors.Red);
this.Width = 400;
this.Height = 200;
this.Background = brush;
}
}
}
namespace caphe.net
{
public class MyButton:Button
{
public MyButton()
{
SolidColorBrush brush = new SolidColorBrush(Colors.Blue);
this.Width = 300;
this.Height = 100;
this.Background = brush;
}
}
}

[/code]

Bạn thấy đấy ở trên có 2 MyButton trùng tên nhưng nằm ở 2 namespace khác nhau.

Để sử dụng 2 lớp MyButton này ta tiến hành biên dịch Project–> 2 MyButton này sẽ tự động được đưa vào thanh Toolbox và bạn chỉ việc dùng chuột túm kéo thả nó vào giao diện Windows Phone là OKê.

Bây giờ bạn kéo thả MyButton (tranduythanh.com) và MyButton (caphe.net) vào giao diện Windows Phone (giống như là kéo 1 control bất kỳ), ta xem kết quả:

Bạn quan sát hình trên:

– Mục số 1 là nơi mà 2 MyButton được Khai sinh ra trên cõi đời này sau khi bạn Build project.

– Mục số 2 là nơi mà bạn kéo thả 2 MyButton này vào (quan sát thấy màu và kích thước mặc định được tạo trong Constructor)

– Mục số 3: Là cách khai báo sử dụng Namespace được hệ thống tự động tạo ra (trong trường hợp này nó sẽ tự động lấy cái thành phần cuối cùng đằng sau dấu chấm “.” làm prefix, ví dụ: tranduythanh.com thì lấy com, caphe.net thì lấy net. Dĩ nhiên không phải trường hợp nào nó cũng tự động tạo ra cho ta như thế này mà có những trường hợp ta phải tự gõ theo công thức (đề cập ở phần trên).

– Mục số 4 là nơi mà XAML coding của MyButton được phát sinh tùy thuộc vào cách bạn thay đổi kích thước cũng như vị trí của nó, bạn để ý có prefix là com và net đằng trước mỗi element MyButton –> truy suất đúng đối tượng nằm trong namespace nào. (Bạn có thể đặt tên prefix khác ).

Các cú pháp XAML Attribute?

Bạn biết rằng XAML tương tự như XML nên cách khai báo đối tượng cũng giống như vậy:

<[Tên thành phần] [Tên thuộc tính]=[giá trị] ></ [Tên thành phần]>

Hoặc

<[Tên thành phần] [Tên thuộc tính]=[giá trị] />

Ví Dụ:

<TextBlock Text=”page name” FontSize =”15″ />

XAML có một số cú pháp được sử dụng để khai báo cho các thuộc tính như sau (Bạn cần biết các thuật ngữ kỹ thuật của nó để dễ đọc tài liệu tiếng anh):

– Object element syntax

– Attribute syntax

– Property Element Syntax

– Attached Property Syntax

– Markup Extensions

Việc nắm rõ từng loại cú pháp giúp ta dễ dàng thiết kế cũng như lập trình. Tui sẽ trình bày và cho ví dụ sơ qua về 5 loại cú pháp thường sử dụng ở trên:

– Object element syntax:

Cú pháp này thường được viết như sau:

<Button> Click Me </Button>

– Attribute syntax:

Bạn xem đấy chỗ nào Attribute là Attribute….. thường ghi các giá trị RẤT ĐƠN GIẢN được gán cho mỗi thuộc tính (Attribute) thì ta sẽ sử dụng Attribute syntax. Tuy nhiên có những trường hợp giá trị của một thuộc tính nào đó lại vô cùng phức tạp phải kết hợp nhiều thông số thì Attribute syntax không còn áp dụng được nữa, mà nó phải sử dụng Property Element Syntax.

– Property Element Syntax:

Khi giá trị phức tạp ta phải sử dụng cú pháp này. Tuy nhiên Tui sẽ đưa ra 2 ví dụ đơn giản và phức tạp để các bạn dễ hình dung:

Hay phức tạp phối hợp nhiều màu:

Như vậy Ta có thể sử dụng Property Element Syntax cho cả trường hợp đơn giản và phức tạp, tuy nhiên với những trường hợp đơn giản thì không cần thiết vì nó tốn thời gian.

– Attached Property Syntax:

Một số thuộc tính ở element cha được đính kèm vào element con (hoặc ở đâu đó cũng được), ta thường thấy nhất là trong Grid Layout.

– Markup Extensions:

– Các giá trị của thuộc tính được đặt trong cặp ngoặc { }. Thường nó được dùng để tham chiếu tới Resource hoặc Binding dữ liệu (ta sử dụng rất nhiều).

Như vậy Tui đã trình bay xong Phần 1, qua bài 7 Tui sẽ trình bày về Phần 2) Cách sử dụng Brush. Các bạn nên đọc kỹ và thực hành lại các ví dụ mẫu ở trên để dễ dàng hiểu tiếp các phần còn lại.