Xamarin: Tạo dự án, XAML và thử Hello World

Xamarin: Tạo dự án và thử Hello World

Hello các bạn,

Như ở bài trước là các bạn đã cài đặt được Xamarin, và mình dùng luôn bản Visual Studio 2017 để hướng dẫn luôn nhé.

Ở Xamarin, chúng ta có thể tạo các project cho:

• Android
• iOS
• Winphone
• Cross-platform

Và chúng ta sẽ dùng luôn project Cross-platform nhé (viết 1 sử dụng toàn bộ mobile như Android/iOS/Winphone).

Xamarin: Tạo dự án Cross-Platform

Các bạn cứ tạo như hình là sẽ tạo được project cross-platform đầu tiên của bạn.

Cấu trúc của project Xamarin

Đây là cấu trúc mặc định sau khi tạo xong project:

Ở project đầu tiên “LearnXamarin” sẽ là project chung để ta dựng layout, chức năng,…

Còn ở 2 project riêng của Android,iOS sẽ là nơi ta đặt những files như hình ảnh, âm thanh,… dành riêng cho từng dự án cũng như một số thứ khác.

Vậy nên trong quá trình làm, ta chỉ cần làm 1 và test trên cả 2 platforms nhé :D.

Giới thiệu về Xaml:

Trong project chính, ta sẽ thấy 1 file MainPage.xaml. Đây chính là file để chúng ta thiết kế giao diện cũng như là set data,…

Xaml là 1 dạng file XML và được thiết kế dưới dạng riêng dành cho Xamarin.

File MainPage khi tạo ra sẽ như vầy:

<?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:LearnXamarin"
             x:Class="LearnXamarin.MainPage">
</ContentPage>

Như ta thấy, ở ContentPage có các link của Xamarin và Microsoft, đây là các link định nghĩa riêng dành cho xaml và Xamarin.

Ở trong file xaml, bạn có thể nhấn Ctrl+Space bar để xem danh sách các component, rất là nhiều từ layouts cho tới controls,… 😀

So sánh giữa Xaml và Code-behind:

Ví dụ đơn giản, để tạo 1 label, ta cần nhiêu đây từ xaml:

<Label Text="Hello World" VerticalOptions="Center" HorizontalOptions="Center" />

Còn ở bên code (Mainpage.xaml.cs), ta sẽ có nhiêu đây:

public MainPage()
{
	InitializeComponent();

        Content = new Label()
            {
                Text = "Hello World",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
}

Là ta sẽ tốn tận 4 dòng, riêng với Horizontal & Vertical sẽ phải gọi từ 1 cái enumerable LayoutOptions, trong khi trong Xaml, ta chỉ cần dùng string và xong.

Tuy nhiên, nếu ta cần tạo dữ liệu động, ta vẫn phải viết thông qua Code-behind bình thường nhé.

Cho nên cứ theo cách sử dụng mà ta tiến tới sử dụng thôi.

Hello World và chạy

Với Label ở trên đã tạo, ta sẽ được hoàn chỉnh ContentPage như sau:

<?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:LearnXamarin"
             x:Class="LearnXamarin.MainPage">

	<Label Text="Hello World" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />

</ContentPage>

Ta có:

• Text: chữ hiển thị ra.
• VerticalOptions: Vị trí hiển thị theo chiều dọc.
• HorizontalOptions: Vị trí hiển thị theo chiều ngang.

Khi chạy dự án lên lần đầu, ta sẽ được:

Vậy đó là ta đã test vào tạo 1 control cơ bản(Label).

Lưu ý: có thể các bạn sẽ thử add thêm nhiều  controls vào để thử(có thể), nhưng lưu ý rằng: Content Page chỉ có thể chứa 1 control duy nhất, vậy nên nếu các bạn có tạo thêm để xem, thì thử dùng StackLayout nhé.

Vd:

<StackLayout>
    <Label Text="xxxx" />
    <Label Text="yyyy" />
</StackLayout>

Còn StackLayout nó ra sao thì mình sẽ giải thích ở phần Layouts nhé 😀

Hẹn các bạn bài sau nhé, ta sẽ tìm hiểu: Binding data và sự khác nhau giữa các OS.

Cám ơn các bạn đã quan tâm theo dõi!