Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Sau bài viết về Thiết Lập Môi Trường Và Cài Đặt Công Cụ Cho Windows Phone 8.1, bài viết này tôi sẽ hướng dẫn các bạn tạo một project, tìm hiểu cấu trúc của một ứng dụng Windows Phone 8.1 và bắt đầu với một chương trình đầu tiên: “Hello World”.

Giới thiệu

Sau bài viết về Thiết Lập Môi Trường Và Cài Đặt Công Cụ Cho Windows Phone 8.1 :: www.stdio.vn/articles/read/206-lap-trinh-windows-phone-81-phan-1-thiet-lap-moi-truong-va-cai-dat-cong-cu, bài viết này tôi sẽ hướng dẫn các bạn tạo một project, tìm hiểu cấu trúc của một ứng dụng Windows Phone 8.1 và bắt đầu với một chương trình đầu tiên: “Hello World”.

Tiền đề bài viết

Bài viết nằm trong loạt bài viết về hướng dẫn lập trình ứng dụng với Windows Phone 8.1.

Đối tượng hướng đến

Bài viết hướng đến những độc giả bắt đầu học lập trình Windows Phone 8.1, đã có kiến cơ bản về ngôn ngữ lập trình C# và phương pháp lập trình hướng đối tượng.

Tạo project Windows Phone 8.1

Sau khi cài đặt đầy đủ các công cụ ở bài viết trước thì tôi bắt đầu tạo một project như sau:

Bước 1: Khởi động Visual Studio, vào File > New > Project  hoặc có thể nhấn tổ hợp phím Ctrl + Shift + N như hình dưới đây.

1

Bước 2: Trong hộp thoại New Project, ở bên trái chọn Templates(1) > Visual C# (2) > Store Apps(3) > Windows Phone Apps(4), ở vùng trung tâm chọn Blank App (Windows Phone) (6) và thay đổi tên của project sau đó nhấn OK.

2

Sau khi hoàn thành những bước trên, trong cửa sổ Solution Explorer bạn nhấn đúp (double - click) vào file MainPage.xaml bạn sẽ thấy giao diện làm việc như sau:

3

  • Vùng 1: Toolbox là nơi chứa tất cả các control, có thể dùng chuột để kéo control từ Toolbox sang vùng số 2 hoặc vùng số 3. Nếu như bạn không nhìn thấy cửa sổ Toolbox này thì bạn vào View > Toolbox hoặc nhấn tổ hợp phím Ctrl + Alt + X.
  • Vùng 2: Designer là nơi hiển thị giao diện trực quan của ứng dụng khi thiết kế bằng mã nguồn XAML hay kéo control từ Toolbox.
  • Vùng 3: Nơi dùng mã nguồn XAML (Extensible Application Markup Language) để thiết kế giao diện. Khi ta kéo control từ Toolbox thì Visual Studio tự phát sinh mã nguồn XAML. Như vậy, chúng ta có thể thiết kế giao diện bằng hai cách đó là kéo thả hoặc gõ mã nguồn XAML.
  • Vùng 4: Solution Explorer là nơi chứa cấu trúc thư mục của ứng dụng, chúng ta sẽ nghiên cứu về nó kĩ càng hơn ở phần sau.
  • Vùng 5: Properties là nơi chứa các Property, Event… của đối tượng trong ứng dụng như Button, TextBox, ListView…, các bạn có thể dễ dàng set giá trị properties của đối tượng trong cửa sổ này thay vì phải gõ mã nguồn XAML hay mã nguồn C#.

Cấu trúc của một ứng dụng Windows Phone 8.1

Như phần trước tôi có đề cập tới cấu trúc thư mục trong cửa sổ Solution Explorer, phần này chúng ta sẽ nghiên cứu kĩ càng về nó. Đầu tiên chúng ta hãy show tất cả những file có trong Solution Explorer.

4

Dễ thấy rằng với mỗi file xaml đều có một file xaml.cs đi cùng, trong đó file .xaml chứa mã nguồn phần giao diện và file xaml.cs chứa mã nguồn logic của chương trình.

Ngoài ra:

  • References: Là thư mục chứa các thư viện sử dụng trong project, có thể thêm thư viện bằng cách thêm trực tiếp file .dll vào project hoặc cài đặt qua Nuget. Để cài đặt thư viện thông qua Nuget bạn có thể tìm hiểu ở đây: https://msdn.microsoft.com/en-us/magazine/hh547106.aspx
  • Assets: Là thư mục chứa hình ảnh, âm thanh, video dùng cho ứng dụng. Chúng ta có thể thêm vào bất cứ thư mục nào trong project. Tuy nhiên, nên thêm vào thư mục Assets để dễ quản lý.
  • App.xaml và App.xaml.cs: Định nghĩa việc khởi tạo ứng dụng; có thể khai báo biến ở đây để dùng cho các trang trong ứng dụng.
  • MainPage.xaml: Thông thường, đây là file sẽ được chạy đầu tiên khi ứng dụng chạy, tuy nhiên chúng ta có thể thay thế bằng các trang khác.
  • MainPage.xaml.cs: Định nghĩa cách thức hoạt động cho trang MainPage.xaml.
  • Package.appxmanifest: File cấu hình của ứng dụng như icon, name, version của ứng dụng; định nghĩa những tài nguyên mà ứng dụng của bạn cần như: Network, NFC, Bluetooth, Camera...

Chương trình đầu tiên: Hello World

Đầu tiên chúng ta kéo một Button và một TextBlock từ cửa sổ Toolbox sang cửa sổ Designer, Visual Studio đồng thời sẽ tự phát sinh mã XAML.

5

Tiếp theo, đặt giá trị cho thuộc tính Content và Name của Button trong cửa sổ Properties. Dễ thấy, XAML được phát sinh theo.

6

Tương tự, chúng ta trỏ chuột vào TextBlock trong XAML và đặt giá trị cho thuộc tính Name của TextBlock để có thể gọi nó bên trong mã nguồn C#, bạn cũng có thể đặt giá trị cho FontSize, Foreground, Text, TextWrap… cho TextBlock.

7

Tiếp theo, double – click vào Button trong cửa sổ Designer để phát sinh sự kiện Click cho Button, file MainPage.xaml.cs được mở ra.

8

Thêm mã nguồn vào hàm xử lý sự kiện mới phát sinh

private void btnClickMe_Click(object sender, RoutedEventArgs e)
{
	tblResult.Text = "Welcome to STDIO";
}

Nhấn F5 để chạy ứng dụng và click vào Button để thấy kết quả như sau:

9

Mặc định, ứng dụng sẽ chạy trên Emulator, tuy nhiên chúng ta có thể build ứng dụng trên Device cũng như chọn các loại Emulator khác nhau bằng các chọn theo như hình dưới đây:

10

THẢO LUẬN