Xin chào các bạn, trong bài hôm nay mình sẽ tiếp tục với với phần 2 của loạt bài tìm hiểu các Control cơ bản trong Windows Phone. Trong bài trước ta đã làm quen với các loại Layout Controls đó là Gird Layout, Stack Panel và Canvas. Trong Windows Phone, ngoài những Layout Controls còn có các loại Controls khác: Text Controls, Selection Controls, Button Controls và Image Controls.

1. Text Controls

• TextBlock

Nếu bạn nào đã từng lập trình trên Windows Form thì sẽ biết đến Label, trên Windows Phone nó được gọi là TextBlock. Label hay TextBlock là những Controls hiện thị chuỗi chỉ cho phép đọc (Read Only) không cho phép chỉnh sửa. Tuy nhiên TextBlock trên Windows Phone nó cao thủ hơn, có những thuộc tính mà Label không có. Để sử dụng TextBlock bạn khai báo như sau (Code XAML):

<TextBlock Text=”Lee xin chào các bạn”/>   (Các bạn dùng thuộc tính Text để set chuỗi muốn hiển thị)

Tiếp theo mình muốn giới thiệu đến các bạn một thành phần khá hay của TextBlock đó là <Run/>. Trong trường hợp các bạn muốn hiển thị một đoạn Text nhưng đoạn Text đó nhiều định dạng khác nhau, bạn không muốn khai báo dài dòng mất thời gian (khi báo nhiều TextBlock khác nhau), <Run/> trong TextBlock sẽ giúp bạn làm điều đó. Đoạn Code sau sẽ demo nhé:

<TextBlock Margin=”10,66,34,486″ TextWrapping=”Wrap”>
<Run FontSize=”40″ FontFamily=”Time New Roman”>
3 hệ điều hành mobile phổ biến:
</Run>
<LineBreak/>
<Run FontSize=”30″ FontFamily=”Courier New” Foreground=”Red”>
– Android
</Run>
<LineBreak/>
<Run FontSize=”30″ FontFamily=”Verdana” Foreground=”Blue”>
– iOS
</Run>
<LineBreak/>
<Run FontSize=”30″ FontFamily=”Arial” Foreground=”Yellow”>
– Windows Phone
</Run>
</TextBlock>

Ta nhận được kết quả sau:

Mình đã cố tình làm màu mè để cố gắn giới thiệu với các bạn các thuộc tính trong TextBlock. Giải thích một số thuộc tính:

– Margin: canh chỉ vị trí của Control này với Control khác (các Controls khác cũng có thuộc tính này) .

– TextWrapping: thuộc tính này có 2 giá trị là Wrap (tự động xuống dòng khi chiều rộng Control hết chỗ chứa – > co giãn đẹp hơn) và NoWrap (ngược lại nó sẽ hiển thị trên một dòng khi chuỗi quá dài nó sẽ bị mất phần phía sau không hiển thị).

– FontFamily: set Font chữ cho chuỗi.

– FontSize: set kích thước cho chuỗi.

– Foreground: set màu cho chuỗi.

Trên đây chỉ là một số thuộc tính hay dùng, các bạn có thể tìm hiểu thêm nhé.

• TextBox

Control thứ 2 của Text Controls là TextBox, dùng để hiển thị và nhận dữ liệu input từ người dùng. Để sử dụng các bạn tiến hành khai báo như sau:

<TextBox Height=”72″ Text=”TextBox”/>

Ở Control này mình không nói rõ nữa vì các thuộc tính nó cũng tương tự nhau, mình chỉ giới thiệu cho các bạn một thuộc tính quan trọng của Control này nó focus đến người dùng. Đó là thuộc tính InputScope, nó đơn giản chỉ là hiện thị đúng loại bàn phím với nhu cầu nhập liệu giúp người dùng thao tác nhanh và dễ dàng hơn, ngoài ra còn giúp lập trình viên kiểm soát một số lỗi đơn giản. Mình sẽ lấy ví dụ đơn giản như sau: TextBox đang yêu cầu nhập số điện thoại, ta chọn InputScope là number (chỉ hiện số), nếu ta show ra bàn phím có chứa cả kí tự nữa thì ta sẽ phải có thêm dòng lệnh kiểm tra dữ liệu, còn nếu chỉ show ra bàn phím số ta chỉ cần lấy lấy dữ liệu không cần phải kiểm tra nữa vì đã đảm bảo tính chính xác của dữ liệu.

Các loại InputScope phổ biến:

– InputScope = “Url”

– InputScope = “Number”

– InputScope = “Text”

• PasswordBox

Một Control tiếp theo của Text Controls đó là PasswordBox, nó cũng giống như TextBox nhưng các kí tự khi người dùng nhập vào sẽ bị dấu đi. Bạn khai báo như bình thường, để get hoặc set kí tự cho PasswordBox bạn dùng thuộc tính Password:

<PasswordBox Height=”72″ Password=”123″ Width=”310″/>

2. Selection controls

• CheckBox

CheckBox là Control dùng để thể hiện sự lựa chọn mang 2 giá trị true hoặc false.

Ex:

<CheckBox Height=”72″ IsChecked=”true”

Content=”Do you like WP ?”/>

• RadioButton

RadioButton là Control dùng để chọn một trong nhiều lựa chọn thuộc cùng nhóm với nhau. Để sử dụng các bạn khai báo như sau:

Ex:

<RadioButton Name=”radioButton1″ Content=”Nam” GroupName=”GioiTinh”/> <RadioButton Name=”radioButton2″ Content=”Nữ” GroupName=”GioiTinh”/>

• Slider

Slider là Control cho phép thay đổi giá trị trong một khoảng nào đó.

Ex:

<Slider Name=”slider1″ VerticalAlignment=”Top” Width=”450″/>

3. Button control

Button là Control rất hay được sử dụng, hầu như ứng dụng nào cũng có cả, nó dùng để tương tác với người dùng làm một công việc nào đó.

Ex:

<Button Content=”Button” Height=”72″ HorizontalAlignment=”Left”

Name=”button1″ VerticalAlignment=”Top” Width=”160″ />

4. Image control

Control này đơn giản là để hiển thị một bức ảnh lên giao diện.

<Image Source=”logoWindowsPhone.jpg” Width=”200″

Stretch=”Fill” Height=”200″ />

Mình vừa giới thiệu với các bạn các Control cơ bản còn lại trong Windows Phone, mình chỉ giới thiệu những cái chính thôi, còn các thuộc tính còn lại các bạn tự nghiên cứu trong quá trình lập trình nhé. Về cách thiết lập sự kiện cho các Control mình sẽ nói ở các bài sau. Trong bài tiếp theo chúng ta sẽ tiếp tục với các Control nâng cao trong Windows Phone. Chào các bạn !