Bài 8: Sử dụng Textblock, Textbox và Button trong Windows phone

Trong bài tập này Tui sẽ trình bày về 3 control cơ bản nhất mà một ứng dụng Windows phone thường sử dụng, đó là:

Textblock – Hiển thị dữ liệu không cho chỉnh sửa (giống như Label nhưng mà nó cao thủ hơn 1 tí)

Textbox – Hiển thị và cho phép hiệu chỉnh dữ liệu

Button – Control cho phép người sử dụng tương tác ra lệnh cho ứng dụng.

---

Textblock có các thuộc tính thường sử dụng như: font chữ (FontFamily), cỡ chữ (FontSize), màu chữ (Foreground), kiểu chữ (FontStyle), in đậm in nghiêng (FontWeight)…

Textblock có thể giúp ta định dạng riêng cho từng vùng dữ liệu thông qua đối tượng Run, hay định dạng xuống dòng thông qua đối tượng LineBreak.

ví dụ ta khai báo XAML như sau:

[code language=”xml”]

<TextBlock FontFamily="Arial" FontWeight="Bold">
<Run FontFamily="Courier New">
drthanh là ai?
</Run>
<LineBreak/>
<Run FontFamily="Time New Roman" Foreground="Yellow">
chắc là ông Doctor
</Run>
<LineBreak/>
<Run FontFamily="Verdana" FontSize="40">
với ông Thanh
</Run>
</TextBlock>

[/code]

Kết quả:

Hoặc ta cũng có thể viết coding behind thông qua Inlines của Textblock:

Ví dụ Tui có dùng Textblock để hiện thị màu ngẫu nhiên cho từng từ dưới đây:

[code language=”csharp”]

string str="… Anh em không hòa, bạn bè vô ích";

string []arr= str.Split(new char[]{‘ ‘},  StringSplitOptions.RemoveEmptyEntries);

txtThu.Text = "";//là Textblock trên giao diện bạn đặt tên

Random rd = new Random();

foreach (string s in arr)

{

int red = rd.Next(0, 255);

int green = rd.Next(0, 255);

int blue = rd.Next(0, 255);

Color mau = new Color();

mau.R = (byte)red;

mau.G = (byte)green;

mau.B = (byte)blue;

mau.A = 255;

SolidColorBrush br = new SolidColorBrush(mau);

Run r = new Run();

r.Text = s + " ";

r.Foreground = br;

txtThu.Inlines.Add(r);

}

[/code]

---

 

Textbox – Hiển thị và cho phép hiệu chỉnh dữ liệu:

Textbox cung cấp hàng loạt các properties như sau:

• Name – tên của textbox dùng cho việc tương tác trong coding
• Text – dùng để hiển thị dữ liệu
• SelectedText – dữ liệu được chọn trong textbox
• IsReadOnly – kiểm tra xem textbox chỉ cho đọc hay không
• MaxLength – chiều dài tối đa
• TextAlignment: Center|Left| Right| Justify  – các căn lề : Giữa, trái , phải, đều 2 bên.
• InputScope : Hiển thị loại Keyboard thích hợp cho từng loại, ví dụ như Number, số điện thoại

Một số Keyboard phổ biến:

• AcceptsReturn , TextWrapping – cho phép hiển thị dữ liệu nhiều dòng giống như TextArea. Ta cần thiết lập AcceptsReturn=”True” và TextWrapping=”Wrap” 

[code language=”xml”]

<TextBox AcceptsReturn="True" TextWrapping="Wrap" Height="150" Text="This is text that will appear on several lines. This will also handle carriage returns." />

[/code]

 

Cùng các phương thức:

• Select(start, length): chọn các ký tự từ vị trí start với số lượng ký tự chọn là length
• SelectAll() : Chọn tất cả chuỗi

Ngoài ra trong bộ Windows phone toolkit có hỗ trợ PhoneText control có thuộc tính Hint giúp gợi ý chức năng sử dụng rất hữu ích. Ở bài 7 Tui có nói phần sử sụng WrapPanel  thuộc Windows phone toolkit là bạn đã tải nó về, bạn có thể vào xem thư mục chứa nó (khi bạn tả về tự nó phát sinh theo version mới nhất):

Trong thư mục WP8 bạn sẽ tìm thấy thư viện Microsoft.Phone.Controls.Toolkit.dll (Ta sao chép thư viện này tới 1 nơi nào đó để cất giữ cho các lần sử dụng khác, không quan tâm tới các thành phần còn lại). Như trước Tui đã nói chỉ cần tải 1 lần duy nhất, các lần sau chỉ cần tham chiếu tới dll này mà thôi, ví dụ:

– Bấm chuột phải vào References/ chọn Add Reference…

Màn hình Reference Manager hiển thị ra như dưới đây, ta chọn mục Browser/ Browser…:

Sau khi bạn bấm vào nút Browse… sẽ hiển thị màn hình Select the files to Reference….:

Ở màn hình trên bạn tìm tới nơi cất giữ thư viện toolkit, bấm chọn nó rồi bấm nút Add/ nó quay về màn hình Reference Manager:

Ta tick chọn thư viện như hình rồi bấm nút OK. Kết quả sẽ thấy được trong Reference của Project như sau:

Sau đó ta cũng khai báo sử dụng namespace như trước:

  xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”

Rồi sử dụng PhoneText control như sau:

[code language=”xml”]

        <toolkit:PhoneTextBox Hint="nhập hint ở đây"
                              InputScope="Number">
            
        </toolkit:PhoneTextBox>

[/code]

 

Bạn có thể sử dụng control này thay thế cho Textbox.

---

Button – Control cho phép người sử dụng tương tác ra lệnh cho ứng dụng, đây là một control thường xuyên xuất hiện trong ứng dụng.

[code language=”xml”]

<Button
x:Name="btnClickMe"
Content="Click tui đi"
Width="300"
Height="100"
FontFamily="cambria"
FontSize="35"
Foreground="Yellow">

</Button>

[/code]

Kết quả:

Để gán sự kiện cho Button ta có một số cách sau:

– Gán lúc Designer time (lúc trong quá trình thiết kế giao diện).

– Gán lúc Runtime (lúc đang chạy ứng dụng).

Nếu gán lúc Designer time thì có 3 cách tạo sự kiện cơ bản sau:

– 1 là bạn double click vào Button để phát sinh sự kiện trong xaml.cs:

Sự kiện click sẽ tự động được gán cho Button btnClickMe ở trên, thường thao thác này hơi rắc rối do đôi khi bạn double click nó không “ăn”:

[code language=”csharp”]

private void btnClickMe_Click(object sender, RoutedEventArgs e)
{

}

[/code]

-2 là bạn viết sự kiện bằng cách gõ trong tag xml của Button, ví dụ Tab, click….:

Ví dụ Tui bổ sung sự kiện Tab cho Button btnClickMe trong xaml bằng cách gõ bằng tay như sau:

Khi bạn gõ Tap= thì lập tức “<New Event Handler>” hiển thị ra bạn bấm chọn nó thì sự kiện Tap sẽ tự động được phát sinh (tương tự cho các sự kiện khác mà bạn có thể làm theo cách này):

Trong XAML:

[code language=”xml”]

<Button
x:Name="btnClickMe"
Content="Click tui đi"
Width="300"
Height="100"
FontFamily="cambria"
FontSize="35"
Foreground="Yellow"
Click="btnClickMe_Click"
Tap="btnClickMe_Tap"
>

</Button>

[/code]

Trong Code Behind:

[code language=”csharp”]

private void btnClickMe_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{

}

[/code]

-3 là bạn sử dụng công cụ Propeties, trong công cụ này có biểu tượng tia chớp để gán sự kiện cho control.

Ví dụ Tui bổ sung sự kiện Double Tap cho Button btnClickMe bằng cách chọn trong Properties toolbox như sau:

Chọn Button (hoặc control bất kỳ), mở Properties/ chọn biểu tượng Tia chớp (mục số 1)/ rồi bạn Double click vào mục số 2 tương ứng với sự kiện bạn nhìn thấy và mong muốn sử dụng ở mục số 1 là tự động nó phát sinh sự kiện:

Giờ Tui double click vào mục số 2 tương ứng với sự kiện DoubleTap thì ta có kết quả sau:

Tự nó phát sinh ra trong XAML (hình trên) và Coding behind như sau:

[code language=”csharp”]

private void btnClickMe_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
{

}

[/code]

Như vậy cho dù làm cách nào đi nữa thì sự kiện phải xuất hiện 2 nơi: Đó là nằm trong XAML và nằm trong Coding behind.

– Nếu Gán sự kiện lúc Runtime (lúc đang chạy ứng dụng) :

Tui sẽ làm một ví dụ tạo Button và gán sự kiện trong lúc Runtime để demo cho trường hợp này như sau( trường hợp này cũng thường xuyên được sử dụng trong project):

Bạn new 1 project tên là “LearnAddButtonAtRuntime“:

Khi tạo mới project này thì mặc định MainPage.xaml được tạo ra và bạn tìm tới XAML giống thế này trong trang:

[code language=”xml”]

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

</Grid>

[/code]

Bạn để ý tên “ContentPanel“, bây giờ Tui sẽ coding để thực hiện thêm một số Button có Content ngẫu nhiên vào phần này sau đó gán sự kiện Rumtime cho nó, bây giờ bạn vào MainPage.xaml.cs tạo 1 hàm tạo Button ngâu nhiên như sau:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using LearnAddButtonAtRuntime.Resources;

namespace LearnAddButtonAtRuntime
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
//gọi hàm tạo button lúc Runtime
TaoButtonRuntime();
}
public void TaoButtonRuntime()
{
//xóa hết control cũ nằm bên trong ContentPanel
ContentPanel.Children.Clear();
Random rd = new Random();
//Tạo StackPanel
StackPanel pn = new StackPanel();
for(int i=0;i<10;i++)
{
Button btn = new Button();
btn.Content = rd.Next(0, 100);
btn.Width = btn.Height = 100;
//gán sự kiện động cho Button btn:
//bạn chỉ cần gõ tên control.sự kiện rồi gõ dấu += sau đó gõ 2 phím tab liên tục–> tự tạo ra sự kiện
btn.Tap += btn_Tap;
//Đưa control vào StackPanel
pn.Children.Add(btn);
}
//Tạo ScrollViewer
ScrollViewer scv = new ScrollViewer();
scv.Height = 500;
//Đưa stack vào ScrollViewer
scv.Content = pn;
//đưa ScrollViewer vào ContentPanel
ContentPanel.Children.Add(scv);
}

void btn_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//sender chắc chắn là Button nên ta ép kiểu về Button để xử lý
Button btn = sender as Button;
MessageBox.Show("Bạn chọn button có giá trị ="+btn.Content);
}
}
}
[/code]

Kết quả:

Bây giờ Tui sẽ làm một bài ví dụ nho nhỏ để sử dụng tổng thể Textblock, Textbox và Button như sau:

Tạo một Project đặt tên “LearnChuyenNamDuongLichThanhAmLich“.

 XAML code:

[code language=”xml”]

<phone:PhoneApplicationPage
x:Class="LearnChuyenNamDuongLichThanhAmLich.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Border  BorderThickness="5" Margin="0,0,0,481">
<Border.BorderBrush>
<LinearGradientBrush>
<GradientStop Color="Red" Offset="0.0"></GradientStop>
<GradientStop Color="Yellow" Offset="0.5"></GradientStop>
<GradientStop Color="Blue" Offset="1.0"></GradientStop>
</LinearGradientBrush>
</Border.BorderBrush>
<Canvas HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="480">

<TextBlock Canvas.Left="51" TextWrapping="Wrap" Text="Năm Dương:" Canvas.Top="78"/>
<TextBox x:Name="txtNamDuong" Height="72" Canvas.Left="179" TextWrapping="Wrap" Text="1978" Canvas.Top="57" Width="237" InputScope="Number"/>
<Button x:Name="btnChuyenDoi" Content="Chuyển đổi" Canvas.Left="179" Canvas.Top="134" Click="btnChuyenDoi_Click"/>
<TextBlock Canvas.Left="51" TextWrapping="Wrap" Text="Năm âm:" Canvas.Top="220"/>
<TextBlock x:Name="txtNamAm" Canvas.Left="192" TextWrapping="Wrap" Canvas.Top="220" Width="212" Height="42"/>
<TextBlock Canvas.Left="10" TextWrapping="Wrap" Text="Chuyển đổi năm dương lịch" Canvas.Top="10" Width="460" Height="45" TextAlignment="Center" FontSize="30"/>
</Canvas>
</Border>

</phone:PhoneApplicationPage>

[/code]

Coding Behind:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using LearnChuyenNamDuongLichThanhAmLich.Resources;

namespace LearnChuyenNamDuongLichThanhAmLich
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
string[] cans = {"Canh","Tân","Nhâm","Quý","Giáp","Ất","Bính","Đinh","Mậu","Kỷ" };
string[] chis = {"Thân","Dậu","Tuất","Hợi", "Tý","Sửu","Dần","Mẹo","Thìn","Tỵ","Ngọ","Mùi"};
private void btnChuyenDoi_Click(object sender, RoutedEventArgs e)
{
int nam = int.Parse(txtNamDuong.Text);
string can = cans[nam % 10];
string chi = chis[nam % 12];
txtNamAm.Text = can + " " + chi;
}
}
}

[/code]

Kết quả:

Bạn có thể bấm vào đây để tải source mẫu

Như vậy các bạn đã nắm rõ được các control Textblock, Textbox, Button, cách tham chiếu sử dụng Windows Phone toolkit có sẵn…

Trong bài kế tiếp Tui sẽ trình bày về RadioButton, CheckBox … các bạn chú ý theo dõi.

Chúc các bạn thành công.