• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

[C#] Lập trình WP 8.x

Lập trình cho Windows Phone

Điều hành viên: tummosoft

Hình đại diện của người dùng
deptraithongminh
Thành viên tích cực
Thành viên tích cực
Bài viết: 143
Ngày tham gia: T.Ba 02/07/2013 4:58 pm
Đến từ: TPHCM
Has thanked: 17 time
Been thanked: 1 time

[C#] Lập trình WP 8.x

Gửi bàigửi bởi deptraithongminh » T.Sáu 12/09/2014 11:10 pm

Xin chào. Hôm nay mình sẽ bắt đầu loạt bài hướng dẫn lập trình này.

LẬP TRÌNH WP 8.0

BÀI 1: GIỚI THIỆU WINDOWS PHONE 8.0 + YÊU CẦU. VÒNG ĐỜI ỨNG DỤNG
Windows Phone là hệ điều hành của Microsoft dành cho smartphone, mặc dù chúng không tương thích với nhau. Windows Phone không phải là Windows Mobile bản kế tiếp và MS đã xây dựng WP từ con số 0 sau khi khai tử Windows Mobile. Khác với Windows Mobile, Windows Phone tập trung vào sự phát triển của Marketplace - nơi các nhà phát triển có thể cung cấp sản phẩm (miễn phí hoặc có phí) tới người dùng. Windows Phone được bán vào tháng 10 năm 2010 và đầu năm 2011 tại Châu Á.

Phiên bản mới nhất hiện tại là Windows Phone 8.1 (Tên mã Blue) tiếp nối Windows Phone 8 (Apollo), hiện nay đã phát hành cho một số các loại điện thoại (Ở Việt Nam, tất cả các loại điện thoại được bán đều đã có bản cập nhật). Với Windows Phone, Microsoft đã phát triển giao diện người dùng mới mang tên Modern (trước đây tên là Metro) - tích hợp khả năng liên kết với các phần cứng và phần mềm của hãng thứ ba một cách dễ dàng.

Windows Phone 8 là hệ điều hành phiên bản thứ hai của Microsoft dành cho điện thoại, kế tục nền tảng Windows Mobile. Nó cũng sở hữu giao diện Modern UI (trước là Metro) của Windows 8/8.1/RT. Được Microsoft giới thiệu vào ngày 20 tháng 6 năm 2012 nhưng đến ngày 29 tháng 10 năm 2012, Microsoft bắt đầu phát hành phiên bản này. Phiên bản kế tiếp của nó là Windows Phone 8.1 sắp được hoàn thiện và trình làng cho các lập trình viên vào ngày 10 tháng 2 năm 2014

Windows Phone 8 được thay thế từ nhân Windows CE (được sử dụng làm kiến trúc xây dựng Windows Phone 7) sang nhân Windows NT được sử dụng trên Windows 8. Các phiên bản smartphone hiện tại chạy Windows Phone 7 không thể chạy hoặc cập nhật phiên bản mới của Windows Phone 8 và các ứng dụng mới chạy trên Windows Phone 8 không thể chạy trên các thiết bị Windows Phone 7. Các lập trình viên có thể thiết kế ứng dụng cho cả hai hệ điều hành trên.

Hình ảnh

YÊU CẦU:
- Máy phải hỗ trợ ảo hoá (xem trong BIOS) và SLAT, phải đủ mạnh để cài Win 8 Pro 64bit trở lên
- Phải hỗ trợ Hyper-V (cái này bật trong Control Panel -> Program and Features -> Turn Windows featrues gì đó :D )
- Visual Studio (mình khuyên dùng VS2012 ultimate hoặc express for wp, VS2013 update 2 trở lên)
- WP SDK 8.0 (bao gồm cả WP8 Emulator luôn nhé :D )
p.s: VS 2013 khi cài update đã có. VS2013 dùng để lập trình WP có một chút thay đổi. Điều này mình sẽ nói các bạn sau

VÒNG ĐỜI ỨNG DỤNG
Hình ảnh
+start->launched->running: khi ứng dụng chưa mở, bạn mở lên. ứng dụng chạy.
+closed/end: quay về, coi như kết thúc mọi tiến trình
+deactivated: tạm thời không dùng (tức là quay về màn hình bắt đầu bằng cách nhấn nút biểu tượng Windows). gọi là ngủ
+tombstoned: khác với PC, bộ nhớ của điện thoại rất thấp nên không thể cùng một lúc phải xử lí hàng loạt tiến trình. vậy các tiến trình của những ứng dụng đang bị deactived sẽ bị xoá để nhường chỗ cho các tiến trình khác. gọi là bị kill
+activated: sau khi bị kill hoặc ngủ, ứng dụng đc mở lại. nếu bị kill thì sẽ mất hết dữ liệu của phiên làm việc trước, ko thì vẫn còn

xong bài 1. hẹn gặp lại tuần sau
Sửa lần cuối bởi deptraithongminh vào ngày T.Hai 03/11/2014 4:47 pm với 5 lần sửa.



Hình đại diện của người dùng
deptraithongminh
Thành viên tích cực
Thành viên tích cực
Bài viết: 143
Ngày tham gia: T.Ba 02/07/2013 4:58 pm
Đến từ: TPHCM
Has thanked: 17 time
Been thanked: 1 time

Re: [C#] Lập trình WP 8.x

Gửi bàigửi bởi deptraithongminh » T.Bảy 13/09/2014 1:06 pm

BÀI 2: TÌM HIỂU VỀ XAML

1.XAML
- Là một ngôn ngữ đánh dấu. Dùng để nâng cao tuỳ biến các control.
- Đọc là zammel

2.Cú pháp XAML
*** Attribute Syntax: cái này dùng khi định dạng thuộc tính đơn giản, ngắn
<Tên đối tượng Tên thuộc tính="Định dạng"/>
vd:[xml]<Button x:Name="btnHello" Content=" Hello World" Width="500" Height="200"/>[/xml]
Code trên định dạng Button có tên là btnHello, trên button có chữ Hello World, cao 200, dài 500

*** Property Element Syntax: vài thuộc tính không có trong giá trị Property. ta sẽ dùng cái này.
vd:
Hình ảnh

*** Collection Syntax: dùng để lồng nhiều control,thuộc tính vào nhau. dùng nhiều trong các control như các panel í
- trong trường hợp này, các child object như là 1 giá trị được gán cho thuộc tính kiểu collection
vd:
[xml]<StackPanel>
<Button Content="Hello"/>
</StackPanel>[/xml]
lồng button vào trong StackPanel

3.XAML namespace
cũng như trong coding, XAML cũng có thể sử dụng các thư viện của các control. Đó chính là XAML namespace.
*** Cú pháp khai báo:
vd: Để khai báo Windows Phone Toolkit:
[xml]<xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"/>[/xml]
từ vd trên, ta rút ra đuợc cú pháp của việc khai báo XAML namespace:
[xml]<xmlns:[tên gọi của namespace(đặt là gì cũng được)]:[tên thành phần]/>[/xml]

*** Sử dụng các thành phần trong namespace:
vd: Để sử dụng các control trong Windows Phone Toolkit:
[xml] <toolkit:WrapPanel Orientation=”Vertical”/>[/xml]
code trên để sử dụng control WrapPanel.
vậy ta có nhận xét sau
[xml]<[tên gọi của namespace(được đặt ở trên khi khai báo)]:[tên control] [các thuộc tính].../>[/xml]

*** Markup extension
Các giá trị của thuộc tính được đặt trong cặp ngoặc { }. Thường nó được dùng để tham chiếu tới Resource hoặc Binding dữ liệu (ta sử dụng rất nhiều).
Hình ảnh

Việc thiết kế giao diện của WP thật dễ dàng khi chỉ cần kéo từ toolbox ra và đặt vào vị trí bạn muốn. Nhưng với XAML, việc thiết kế càng dễ hơn khi nó cho phép các bạn thiết đặt các thuộc tính nâng cao mà trong Property không thể mà phải thông qua coding. Chúc các bạn thành công
Sửa lần cuối bởi deptraithongminh vào ngày T.Năm 06/11/2014 4:26 pm với 3 lần sửa.

Hình đại diện của người dùng
deptraithongminh
Thành viên tích cực
Thành viên tích cực
Bài viết: 143
Ngày tham gia: T.Ba 02/07/2013 4:58 pm
Đến từ: TPHCM
Has thanked: 17 time
Been thanked: 1 time

Re: [C#] Lập trình WP 8.x

Gửi bàigửi bởi deptraithongminh » T.Hai 06/10/2014 5:22 pm

Bài 3: Layout control trong Windows Phone

Trước khi tiến hành thiết kế giao diện trong Windows Phone thì bạn cần hiểu cách sử Layout Control.

Layout control nó giống như bản vẽ kỹ thuật giúp ta dễ dàng tổ chức sắp xếp các control khác theo ý đồ thiết kế.

Windows phone hỗ trợ một số các Layout control phổ biến như sau:

Grid Layout -Sắp xếp các đối tượng theo dòng và cột
Canvas Layout- Sắp xếp các đối tượng theo tọa độ
Stackpanel Layout- Sắp xếp các đối tượng theo cơ chế stack theo hướng từ trên dưới hoặc từ trái qua (tùy theo orientation)
WrapPanel Layout- Sắp xếp các đối tượng theo dòng, khi nào hết chỗ chứa thì xuống dòng.
Border Layout- Tạo đường viên bao bọc cho các đối tượng.
ScrollView control- tạo Scrollview khi nội dung vượt quá khung chứa.

Mỗi một layout, control có những đặc tính và chức năng khác nhau. Tui sẽ lần lượt trình bày từng loại Layout, control:

1) Grid Layout

Hình ảnh

Grid sắp xếp các thành phần con theo dòng và cột.
Dễ dàng mở rộng nếu cần.
Phải định nghĩa các dòng và cột trước khi dùng.

Bạn có thể tưởng tượng mỗi dòng của Grid layout giống như thẻ <tr> và mỗi cell của nó là thẻ <td> trong HTML.

Ví dụ ta muốn khai báo một Grid có 3 dòng 3 cột với thông số sau:

[xml]<Grid x:Name="LayoutRoot" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150"/>

<ColumnDefinition Width="170"/>

<ColumnDefinition Width="160"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="150"/>

<RowDefinition Height="100"/>

<RowDefinition Height="200"/>

</Grid.RowDefinitions>

</Grid>
[/xml]
- Dòng 1 có độ cao là 150, dòng 2 có độ cao là 100, dòng 3 có độ cao là 200

- Cột 1 có độ rộng là 150, cột 2 có độ rộng là 170 và cột 3 có độ rộng là 160

Để đưa các control vào theo đúng dòng và cột ta làm như sau:

[xml]<Grid x:Name="LayoutRoot" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150"/>

<ColumnDefinition Width="170"/>

<ColumnDefinition Width="160"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="150"/>

<RowDefinition Height="100"/>

<RowDefinition Height="200"/>

</Grid.RowDefinitions>

<Button Content="0,0" Grid.Row="0" Grid.Column="0"/>

<Button Content="0,1" Grid.Row="0" Grid.Column="1"/>

<Button Content="0,2" Grid.Row="0" Grid.Column="2"/>

<Button Content="1,0" Grid.Row="1" Grid.Column="0"/>

<Button Content="1,1" Grid.Row="1" Grid.Column="1"/>

<Button Content="1,2" Grid.Row="1" Grid.Column="2"/>

<Button Content="2,0" Grid.Row="2" Grid.Column="0"/>

<Button Content="2,1" Grid.Row="2" Grid.Column="1"/>

<Button Content="2,2" Grid.Row="2" Grid.Column="2"/>

</Grid>[/xml]

Hình ảnh

Ta thấy XAML ở trên sử dụng Attach Property Syntax để thiết lập giá trị thuộc tính cho các control.

Ví dụ:
[xml]
<Button Content=”2,0″ Grid.Row=”2″ Grid.Column=”0″/>[/xml]

Tức là đưa Button này vào dòng 2 (do Grid.Row=”2″) cột 0 (do Grid.Column=”0″).

Ta xem kết quả:

2) Canvas Layout

-Canvas sắp xếp vị trí các thành phần con dựa trên khoảng cách tuyệt đối từ thành phần đó đến lề trên (Canvas.Top) và trái (Canvas.Left) của canvas.

Chú ý:

- Top càng tăng thì đối tượng càng di chuyển xuống dưới, Top càng giảm thì đối tượng di chuyển lên trên.

- Left càng tăng thì đối tượng di chuyển qua phải, Left càng giảm thì đối tượng di chuyển qua trái.

ví dụ XAML:

[xml]<Canvas>

<Ellipse Name="myEllipse"

Canvas.Left="100"

Canvas.Top="70"

Width="100"

Height="100"

Fill="LawnGreen" />

</Canvas>[/xml]

Kết quả:

Hình ảnh

- Các thành phần con có thể nằm đè lên nhau, Khi đó, sử dụng thuộc tính ZIndex để đặt thứ tự xếp trên dưới cho các thành phần con:

[xml]<Canvas>

<Ellipse Canvas.Left="38" Canvas.Top="81" Canvas.ZIndex="2"

Width="100" Height="100" Fill="Green"/>

<Ellipse Canvas.Left="84" Canvas.Top="48"

Width="100" Height="100" Canvas.ZIndex="1" Fill="Yellow"/>

<Ellipse Canvas.Left="24" Canvas.Top="10"

Width="100" Height="100" Fill="Red" />

</Canvas>[/xml]

Kết quả:
Hình ảnh

Ta có thể di chuyển các đối tượng trên Canvas bằng coding behind như sau:

Tui đưa ra 1 ví dụ là cho phép 1 hình tròn di chuyển bất kỳ vị trí Top, Left trên màn hình.

bạn tạo 1 Project đặt tên MovingBall.

Bạn tạo MainPage.xaml như sau:

[xml]<phone:PhoneApplicationPage
x:Class="MovingBall.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">
<Canvas HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="480">
<Ellipse x:Name="myBall" Height="100" Canvas.Left="153" Stroke="Black" Canvas.Top="10" Width="100">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.75">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Green" Offset="1"/>
</RadialGradientBrush>

</Ellipse.Fill>
</Ellipse>
<Button x:Name="btnMove" Content="Move Ball" Canvas.Left="135" Canvas.Top="280"/>
</Canvas>

</phone:PhoneApplicationPage>[/xml]

Giao diện tạm thời như sau:
Hình ảnh

Yêu cầu:

- Bấm vào nút “Move Ball”: Nút này sẽ ẩn đi (tên là btnMove) và Ball (tên là myBall)sẽ di chuyển lung tung trên màn hình theo hướng từ trên xuống và xàng qua xàng lại từ trái qua phải,

- Khi nào Ball chạm đáy màn hình thì Button Move Ball hiển thị trở lại và Ball về vị trí cũ.

Ta tiến hành coding MainPage.xaml.cs như sau:

[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 MovingBall.Resources;
//thư viện để sử dụng DispatcherTimer
using System.Windows.Threading;

namespace MovingBall
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();

// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
//khai báo đối tượng DispatcherTimer để kích hoạt hẹn giờ
DispatcherTimer timer = new DispatcherTimer();

private void btnMove_Click(object sender, RoutedEventArgs e)
{
//cứ 100 mili giây thì thực hiện 1 lần
timer.Interval = new TimeSpan(0, 0, 0, 0, 100);
timer.Tick += timer_Tick;
timer.Start();
btnMove.Visibility = Visibility.Collapsed;
}
Random rd = new Random();
int top = 0, left = 0;
void timer_Tick(object sender, EventArgs e)
{

top+=rd.Next(0,20);
left = rd.Next(0, 400);
doMoveBall();
if(top>=600)
{
top = 0;
left = 0;
doMoveBall();
timer.Stop();
btnMove.Visibility = Visibility.Visible;
}
}
public void doMoveBall()
{
//Thiết lập qua trái -phải
Canvas.SetLeft(myBall, left);
//thiết lập từ trên xuống
Canvas.SetTop(myBall, top);
}

}
}
[/csharp]

3)Stackpanel Layout-

Sắp xếp các đối tượng theo cơ chế stack theo hướng từ trên dưới hoặc từ trái qua (tùy theo orientation)

[xml]<StackPanel x:Name="LayoutRoot" >

<Ellipse Width="100" Height="100" Fill="Green"/>

<Ellipse Width="100" Height="100" Fill="Yellow"/>

<Ellipse Width="100" Height="100" Fill="Red" />

</StackPanel>[/xml]

Ta xem kết quả:
Hình ảnh

Mặc định nó sẽ xếp theo chiều dọc từ trên xuống dưới, Ta dùng thuộc tính Orientation để sắp theo chiều ngang:
p/s: nếu chỉnh chiều ngang thì stack nó sẽ tự canh control giữa stack (nếu width ko bằng width của stack)

[xml]<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
<Ellipse Width="100" Height="100" Fill="Green"/>
<Ellipse Width="100" Height="100" Fill="Yellow"/>
<Ellipse Width="100" Height="100" Fill="Red"/>
</StackPanel>[/xml]

Ta xem kết quả:
Hình ảnh

Ta cũng có thể thay đổi vị trí thứ tự xuất của các control nằm bên trong Stackpanel bằng cách thay đổi FlowDirection=”RightToLeft” hoặc FlowDirection=”LeftToRight”.

Mặc định nó là FlowDirection=”LeftToRight”, nếu như ta đổi thành FlowDirection=”RightToLeft” thì hình trên thay đổi như sau:
Hình ảnh

Ta xem xaml:

[xml]<StackPanel x:Name="LayoutRoot"
Orientation="Horizontal"
FlowDirection="RightToLeft">
<Ellipse Width="100" Height="100" Fill="Green"/>
<Ellipse Width="100" Height="100" Fill="Yellow"/>
<Ellipse Width="100" Height="100" Fill="Red"/>
</StackPanel>[/xml]

4) WrapPanel Layout- Sắp xếp các đối tượng theo dòng, khi nào hết chỗ chứa thì xuống dòng.

- Để sử dụng được WrapPanel ta cần tải thư viện Windows Phone Toolkit về sau đó cấu hình namespace để sử dụng (cách khai báo namespace đã hướng dẫn ở các bài trước.

- Ta làm theo các bước sau:

Bước 1:

Bấm chuột phải vào Reference/ chọn Manage NuGet Packages…:
Hình ảnh

Bước 2:

Màn hình Manage NuGet Packages hiển thị ra như bên dưới đây, bạn chọn từng bước theo số thứ tự mà Tui đánh dấu:
Hình ảnh

số 1: Bạn click chọn Online trước

số 2: Bạn nhận từ khóa toolkit

Số 3: Bạn chọn gói Windows Phone Toolkit rồi bấm nút Install.

Sau khi bấn Install, hệ thống sẽ tiến hành tải và cài đặt… bạn cần chờ trong giây lát….:

Sau khi cài hoàn tất thì Windows Phone Toolkit sẽ được đánh dấu Tick tức là bạn bắt đầu sử dụng được
Tới bước trên là đã thành công, bạn bấm nút Close để trở về Project của mình, bạn thấy Project sẽ có một số thay đổi như sau:
Hình ảnh

(Bạn chỉ cần tải 1 lần mà thôi, các Project khác nếu như có sử dụng thư viện này thì bạn chỉ cần tham chiếu tới dll của nó là ok – Tui sẽ nói cách tham chiếu ở các bài tiếp sau này nếu các bạn chưa biết).

Bước 3:- Khai báo Namespace để sử dụng Windows Phone Toolkit.

trong phone:PhoneApplicationPage bạn khai báo sử dụng namespace như sau:

[xml]xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"[/xml]

Hình trên Tui chụp là cách sử dụng WrapPanel, bạn chỉ cần lấy prefix là toolkit (đặt tên gì là do bạn tuy nhiên cần mang tính gợi nhớ).

Để truy suất tới tất cả các thành phần thuộc Windows Phone Toolkit thì bạn chỉ cần viết

[xml]toolkit : [tên thành phần][/xml]

Windows phone toolkit cung cấp hàng loạt các control hữu ích sau (ta sẽ sử dụng rất nhiều trong các bài tập kế tiếp).

AutoCompleteBox
ContextMenu
CustomMessageBox
DateTimeConverters
DateTimePickers
Effects – SlideInEffect, TiltEffect and TurnstileFeatherEffect
ExpanderView
HubTile



ListPicker
LongListMultiSelector
Map extensions
PhoneTextBox
RatingControl
ToggleSwitch
TransferControl
Navigation transitions
WrapPanel

- Trước tiên ta sử dụng WrapPanel để layout các control:

Mặc định WrapPanel sắp xếp control theo hướng nằm ngang từ trái qua (Orientation=”Horizontal“) – tức là nếu như không thiết lập Orientation thì nó tự động là Horizontal, khi nào hết chỗ chứa thì nó tự động xuống dòng (ở đây tui thiết lập Orientation luôn):

[xml]<toolkit:WrapPanel Orientation="Horizontal">
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
<Ellipse Width="100" Height="100" Fill="Yellow"></Ellipse>
</toolkit:WrapPanel>[/xml]


Nếu bạn thay bằng Orientation=”Vertical” thì các control sẽ được sắp từ trên xuống, khi nào hết cột thì chuyển qua cột mới:

[xml]<toolkit:WrapPanel Orientation=”Vertical”>[/xml]
Hình ảnh

Và bạn cũng có thể thiết lập: FlowDirection=”RightToLeft” hay FlowDirection=”LeftToRight” để xem hướng xuất hiện, ví dụ bây giờ tui thiết lập FlowDirection=”RightToLeft” cho Wrapanel thì kết quả như sau:
Hình ảnh

[xml]<toolkit:WrapPanel Orientation=”Vertical” FlowDirection=”RightToLeft”>[/xml]

5) Border Layout- Tạo đường viên bao bọc cho các đối tượng.

- Border không phải là một layout controls thật sự.

- Dùng để tạo khung cho các thành phần

- Thường được dùng làm khung cho Grid và StackPanel, WrapPanel, Canvas…. tùy…

Ví dụ ta xem hình Border layout dưới đây:
Hình ảnh

Tui có đoạn mã khuyết XAML dưới đây, bạn thử sửa lại cho hoàn thiện rồi tiến hành chạy (sửa mấy chỗ Tui để dấu chấm hỏi ???):

[xml]<Border BorderThickness="8,4,2,1" CornerRadius="50" >

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="???" Offset="0"/>

<GradientStop Color="???" Offset="1"/>

</LinearGradientBrush>

</Border.BorderBrush>

<Grid x:Name="ContentPanel">
</Grid>

</Border>[/xml]
Hình ảnh

Bạn cần biết một vài thông số thường dùng của Border:

BorderThickness=”8,4,2,1″ –> Độ dày của đường viền (left=8, top=4, right=2, bottom=1)

BorderBrush –> màu của đường viền

CornerRadius –> Bo góc đường viền.

6) ScrollView control- tạo Scrollview khi nội dung vượt quá khung chứa)
Hình ảnh

[xml]<ScrollViewer Height="550">

<TextBlock>

[noi dung dai]

</TextBlock>

</ScrollViewer>[/xml]

Nếu muốn Scroll theo coding thì:

Dùng 2 phương thức ScrollToVerticalOffset() và ScrollToHorizontalOffset() để scrollviewer có thể scroll từng đoạn:

[csharp]private void btnScrollTop_Click(object sender, RoutedEventArgs e)

{

if (myscrollview.ScrollableHeight + myscrollview.VerticalOffset < myscrollview.ExtentHeight)

myscrollview.ScrollToVerticalOffset (5 + myscrollview.VerticalOffset);

}

private void btnScrollBottom_Click(object sender, RoutedEventArgs e)

{

if (myscrollview.VerticalOffset >=0)

myscrollview.ScrollToVerticalOffset (myscrollview.VerticalOffset-5);

}[/csharp]

Với myscrollview là tên của ScrollView
Như vậy Tui đã trình bày sơ sơ qua về một số Layout control rất cần thiết cho quá trình thiết kế giao diện, các bạn cần nghiên cứu nó kỹ, bài tập sau Tui sẽ trình bày về các control cơ bản như: Textbox, Textbloc, Button ….

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

Hình đại diện của người dùng
deptraithongminh
Thành viên tích cực
Thành viên tích cực
Bài viết: 143
Ngày tham gia: T.Ba 02/07/2013 4:58 pm
Đến từ: TPHCM
Has thanked: 17 time
Been thanked: 1 time

Re: [C#] Lập trình WP 8.x

Gửi bàigửi bởi deptraithongminh » T.Hai 13/10/2014 5:42 pm

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:
[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>[/xml]

Kết quả:
Hình ảnh

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:

Hình ảnh

[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);

}[/csharp]



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

Hình ảnh

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

Hình ảnh

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”
[xml]
<TextBox AcceptsReturn="True" TextWrapping="Wrap" Height="150" Text="This is text that will appear on several lines. This will also handle carriage returns." />[/xml]

Hình ảnh

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
Hình ảnh

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):

Hình ảnh

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…

Hình ảnh

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

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

Ở 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:
Hình ảnh

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:
Hình ảnh

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

[xml]xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”[/xml]

Rồi sử dụng PhoneText control như sau:
[xml] <toolkit:PhoneTextBox Hint="nhập hint ở đây"
InputScope="Number">

</toolkit:PhoneTextBox>[/xml]
Hình ảnh

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.
[xml]<Button
x:Name="btnClickMe"
Content="Click tui đi"
Width="300"
Height="100"
FontFamily="cambria"
FontSize="35"
Foreground="Yellow">

</Button>[/xml]

Kết quả:
Hình ảnh

Để 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”:
[csharp]
private void btnClickMe_Click(object sender, RoutedEventArgs e)
{

}[/csharp]

-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:
Hình ảnh

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:
[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>[/xml]

Trong Code Behind:
[csharp]private void btnClickMe_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{

}[/csharp]

-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:
Hình ảnh

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:
Hình ảnh

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

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

}[/xml]

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:

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

</Grid>[/xml]

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:

[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);
}
}
}[/csharp]

Kết quả:

Hình ảnh

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:
[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>[/xml]

Coding Behind:
[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;
}
}
}[/csharp]

Kết quả:
Hình ảnh

Bạn có thể bấm vào đây để tải source mẫu
http://www.mediafire.com/download/r1nz3703fhkf08d/LearnChuyenNamDuongLichThanhAmLich.rar

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.

Hình đại diện của người dùng
deptraithongminh
Thành viên tích cực
Thành viên tích cực
Bài viết: 143
Ngày tham gia: T.Ba 02/07/2013 4:58 pm
Đến từ: TPHCM
Has thanked: 17 time
Been thanked: 1 time

Re: [C#] Lập trình WP 8.x - Cách tạo 1 project WP8.x

Gửi bàigửi bởi deptraithongminh » T.Hai 03/11/2014 4:51 pm

Xin lỗi đã quên. Mấy tuần trước nói nhiều quá quên hướng dẫn các bạn cách tạo 1 project WP8.x.
Giờ mình sẽ hướng dẫn.

Chú ý trước khi tạo:
- Nếu bạn dùng VS2012 cần phải có Windows Phone SDK 8.0. link down: http://www.microsoft.com/en-us/download/details.aspx?id=35471
- Nếu bạn dùng VS2013 cần phải có Windows Phone SDK 8.1, cái này có trong bản Update của VS2013, update mấy cũng có (bản này cài khá lâu nên mình sẽ hướng dẫn các bạn tải về máy để có gì cài lại offline luôn! áp dụng cho cả bản update của VS2012)
+ link down: http://www.microsoft.com/en-us/download/details.aspx?id=43721
(một số bạn có thể cài thêm 8.0 luôn cho sang! nhưng có thể VS2013 không nhận được, như máy mình là nhận được)

1.Mở VS lên (đương nhiên)
2.Vào New Project, chọn mục Windows Phone (cho VS2012 và 2013 ko cài Update) và mục Store Apps -> Windows Phone Apps (cho VS2013)
3.Chọn 1 kiểu project bạn cần (WP8) và lưu ý cho WP8.1 là nhớ chọn kiểu project có ghi chữ "(Windows Phone Silverlight)"
4.Đặt tên project, chọn chỗ lưu bạn muốn,... Xong, bấm OK.
5.Các bạn có thể gặp 1 hộp thoại với tiêu đề "New Phone Apps Using Silverlight". Chọn Windows Phone 8.0 (nếu là VS2012) còn VS2013 là gì cũng được > Bấm OK (Bước này có thể VS2013 không có)
6.Ngồi đợi VS tạo project... -> XONG! Vậy là project đã tạo rồi đó!

Ko biết cách chèn ảnh trong máy tính lên vbclub nên bài không có hình. các bạn thông cảm.
Các bạn luyện thử bài tập tạo project Hello World của HaiVB6 nhé: http://caulacbovb.com/forum/viewtopic.php?f=16&t=29586

**Hướng dẫn down update về offline:
1.Mở folder bạn đặt bản update đã down.
2.Típ: Shift+chuột phải vào nền -> chọn Open command window here
Hình ảnh
3.Trong cửa sổ command line, gõ vào theo cú pháp: "[Tên file bản update].exe/Layout". vd: "VS2013.3/Layout"
Hình ảnh
4.Xong nó sẽ hỏi bạn bạn muốn lưu bản tải về ở đâu, bạn chọn đường dẫn, sau đó làm theo hướng dẫn của nó.
Hình ảnh


Quay về “Windows Phone”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách