Các điều khiển trong Xamarin.Forms

Giới thiệu

Các điều khiển (controls) trong Xamarin.Forms thường được gọi bằng một tên khác phổ biến hơn là các views. Các điều khiển là các đối tượng trong giao diện người dùng (UI) như labels, buttons, entries, v.v. và chúng phải được tổ chức trong các layout (xem lại bài Layouts trong Xamarin.Forms). Các điều khiển còn được gọi là các witgets trong Android, views trong iOS, và controls trong Windows. Trong bài này chúng ta sẽ gọi là các điều khiển hay các controls.

Các điều khiển cơ bản

Chúng ta sẽ tìm hiểu các điều khiển trong Xamarin.Forms thông qua một ứng dụng tên là ControlsApp. Giao diện của ứng dụng trong như sau:

Như chúng ta đã thấy từ giao diện trên, điều khiển đầu tiên là Image được dùng để hiển thị hình ảnh từ Internet hay các tài nguyên cục bộ. Trong ứng dụng ControlsApp, tôi đã dùng điều khiển Image để hiển thị một hình ảnh tên ngocminhtran.jpg kích cỡ 150X150 từ ổ đĩa cứng máy tính cá nhân và Image được tổ chức trong StackLayout như đoạn mã XAML sau:


<StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Center">

<Image Source="ngocminhtran.jpg"/>

</StackLayout>

Thuộc tính Source chứa đường dẫn đến vị trí của hình ảnh cần hiển thị. Ở đây chúng ta cần thêm ảnh ngocminhtran.jpg đến thư mục drawable trong thư mục Resources của dự án Android như sau:

Và cũng không quên điều chỉnh giá trị thuộc tính Build Action của ảnh đến AndroidResource:

Chúng ta có thể hiển thị hình ảnh từ các nguồn khác trong Image. Xem chi tiết điều khiển Image tại Microsoft docs.

Các điều khiển tiếp theo có thể được thể hiện như hình sau:

Các điều khiển Label dùng để hiển thị các nội dung văn bản và chỉ đọc, dùng chủ yếu cho việc mô tả các điều khiển khác:

Các Entry dùng để nhập dữ liệu từ người sử dụng:

Điều khiển DatePicker dùng để lấy thời gian (ngày, tháng, năm, giờ, phút, giây) hiện tại hay tùy ý. Khi chọn DatePicker, một giao diện như sau sẽ xuất hiện:

Điều khiển Switch cho phép lựa chọn các trạng thái nhị phân như true/false, on/off, enabled/disabled:

Hay

Điều khiển Slider cho phép chọn một giá trị bất kỳ từ a đến b, với a là giá trị của thuộc tính Minimum – là giá trị nhỏ nhất, b là giá trị của thuộc tính Maximum – là giá trị lớn nhất:

Trong ứng dụng ControlsApp, chúng ta có thể kéo thanh Slider để chọn giá trị và giá trị tương ứng sẽ hiện ở Label Age. Để kết buộc giá trị dữ liệu giữa hai điều khiển Slider và Label, chúng ta dùng Binding Source như sẽ thấy trong phần định nghĩa mã XAML cho Slider và Label Age.

Cuối cùng là hai điều khiển Button được dùng để thực hiện một chức năng nào đó khi nhấn chuột:

Trong tập tin XAML, chúng ta sẽ khai báo các điều khiển này trong các layout như sau:


<Grid>

<!-- five rows -->

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<!-- two columns -->

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<!-- Grid.Row="0" and Grid.Column="0" can be omitted -->

<Label Grid.Column="0" Grid.Row="0" Text="Name: " Margin="5"/>

<Label Grid.Column="0" Grid.Row="1" Text="Email: " Margin="5"/>

<Label Grid.Column="0" Grid.Row="2" Text="Birthday: " Margin="5"/>

<Label Grid.Column="0" Grid.Row="3" Text="Male? " Margin="5"/>

<Label Grid.Column="0" Grid.Row="4" Text="{Binding Source={x:Reference age},Path=Value, StringFormat='Age: {0:F1}'}" Margin="5" />

<Entry Grid.Column="1" Grid.Row="0" x:Name="name" Placeholder="Enter your name..."/>

<Entry Grid.Column="1" Grid.Row="1" x:Name="email" Placeholder="Enter your email..."/>

<DatePicker Grid.Column="1" Grid.Row="2" x:Name="birthday" MinimumDate="01/01/1980" MaximumDate="12/31/2018"/>

<Switch x:Name="sex" IsToggled="True"  Grid.Column="1" Grid.Row="3" HorizontalOptions="Start"/>

<Slider x:Name="age" Maximum="100" Minimum="0" Value="50" Grid.Column="1" Grid.Row="4"/>

</Grid>

<Grid>

<!-- one row -->

<Grid.RowDefinitions>

<RowDefinition />

</Grid.RowDefinitions>

<!-- four columns -->

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<!-- Grid.Row="0" and Grid.Column="0" can be omitted -->

<Button x:Name="btnSubmit"  Grid.Column="1" Grid.Row="0" Text="Submit" Margin="5" Clicked="btnSubmit_Clicked"/>

<Button x:Name="btnCancel"  Grid.Column="2" Grid.Row="0" Text="Cancel" Margin="5" Clicked="btnCancel_Clicked"/>

</Grid>

Mỗi điều khiển chứa nhiều thuộc tính, một số thuộc tính cơ bản có thể được mô tả như sau:

Controls	Properties
Label	Text: chứa chuỗi văn bản sẽ hiển thị
Entry	x:Name: được dùng để xác định điều khiển khi lập trình C# Placeholder: hiển thị một dòng văn bản mặc định cho đến khi người dùng nhập dữ liệu
DatePicker	x:Name: được dùng để xác định điều khiển khi lập trình C# MinimumDate: mốc thời gian nhỏ nhất MaximumDate: mốc thời gian lớn nhất
Switch	x:Name: được dùng để xác định điều khiển khi lập trình C# IsToggled: trạng thái của điều khiển
Slider	x:Name: được dùng để xác định điều khiển khi lập trình C# Maximum: giá trị lớn nhất Minimum: giá trị nhỏ nhất Value: giá trị hiện tại

Tương tác với các điều khiển bằng mã C#

Các điều khiển có thể được tìm thấy bằng mã C# thông qua phương thức FindByName() và giá trị của thuộc tính x:Name của điều khiển tương ứng. Cụ thể, chúng ta muốn xác định điều khiển Entry có x:Name là name và x:Name là email như sau:


var name = this.FindByName<Entry>("name");

var email = this.FindByName<Entry>("email");

Các đối số của phương thức FindByName, name và email, là các giá trị của thuộc tính x:Name của các Entry. Chúng ta có thể lấy giá trị do người dùng nhập vào các Entry này như sau:


string message = "I am " + name.Text

+ "\nMy Email is " + email.Text;

Một cách tương tự với các điều khiển khác:

Slider:


var age = this.FindByName<Slider>("age");

string message = "My age is " + age.Value.ToString();

Switch:


var sex = this.FindByName<Switch>("sex");

string mySex = "";

if (sex.IsToggled)

mySex = "Male";

else

mySex = "Female";

string message = "My sex is " + mySex;

DatePicker:


var birthday = this.FindByName<DatePicker>("birthday");

string message = "My birthday is " + birthday.Date.ToShortDateString();

Trong ứng dụng ControlsApp, chúng ta có thể nhập một số thông tin như sau:

Khi nhấn nút SUBMIT, kết quả:

Mã nguồn đầy đủ cho các tập tin XAML và C# của ứng dụng ControlsApp có thể xem tại đây.

Lời cuối

Trong bài viết này tôi đã giới thiệu một số điều khiển cơ bản cùng với cách thể hiện chúng trong XAML và mã C#, tuy nhiên, mỗi điều khiển còn có nhiều thuộc tính và các sự kiện vẫn chưa đề cập trong bài viết này. Ngoài ra, Xamarin.Forms còn cung cấp nhiều điều khiển thú vị khác như WebView, ListView, SearchBar, v.v. Để biết mọi chi tiết về các điều khiển trong Xamarin.Forms chúng ta có thể tham khảo Microsoft docs.

Trần Ngọc Minh Notes

Stay hungry, stay foolish!