ườ
Tr
ọ ự ng ĐH Khoa H c T Nhiên TP.HCM
TRUNG TÂM TIN H CỌ
ậ
L p trình Windows Phone Bài 9: Page Transition Animation
ầ
ạ
GV Biên so n: Tr n Duy Thanh
2014
Nội dung
• Giới thiệu hiệu ứng chuyển trang
• Cách sử dụng Windows Phone Toolkit
• Các loại Page transition animation
• Hiệu ứng cho các UIElement
2
Bài 9 – Page Transition Animation
1. Giới thiệu hiệu ứng chuyển trang Microsoft đã hỗ trợ hiệu ứng chuyển trang bắt mắt trong gói Microsoft Windows Phone Toolkit, một số hiệu ứng có thể kể đến là:
ü Turnstile transition
ü Swivel transition
ü Slide transition
ü Roll transition
ü Rotate transition
3
Bài 9 – Page Transition Animation
1. Giới thiệu hiệu ứng chuyển trang
4
Bài 9 – Page Transition Animation
2. Cách sử dụng Windows Phone Toolkit Để sử dụng được Page transition animation, ta phải dùng thư viện:
Microsoft.Phone.Controls.Toolkit.dll
Có 2 cách để tải thư viện này về:
ü Tải từ codeplex: http://
ü Tải từ NuGet Packages
5
Bài 9 – Page Transition Animation
silverlight.codeplex.com/releases/view/55034
2. Cách sử dụng Windows Phone Toolkit Ta cần tạo namespace để sử dụng bộ toolkit này:
Với toolkit là một prefix, ta có thể đặt bất kỳ tên gì, tuy nhiên nên đặt tên mang tính gợi nhớ.
Thông qua toolkit ta có thể truy suất tới các lớp thư viện nằm bên trong.
6
Bài 9 – Page Transition Animation
2. Cách sử dụng Windows Phone Toolkit Ví dụ để tạo hiệu ứng chuyển trang trong XAML:
7
Bài 9 – Page Transition Animation
2. Cách sử dụng Windows Phone Toolkit Sau cùng để có thể kích hoạt được hiệu ứng chuyển trang ta thay đổi instance RootFrame như sau:
ủ
ớ
Trong hàm InitializePhoneApplication() c a l p App (App.xaml.cs):
Code cũ: RootFrame = new PhoneApplicationFrame();
ổ ạ
i thành:
Đ i l RootFrame = new TransitionFrame();
8
Bài 9 – Page Transition Animation
3. Các loại Page transition animation Gói Windows Phone Toolkit hỗ trợ các hiệu ứng:
a. Turnstile transition
b.Swivel transition
c. Slide transition
d.Roll transition
e. Rotate transition
9
Bài 9 – Page Transition Animation
a. Turnstile transition
Hiệu ứng này cho phép quay trang giống như quay cửa sổ từ một góc, đây là một trong những hiệu ứng phổ biến và sử dụng đơn giản nhất. Hiệu ứng này có 4 kiểu:
ü TurnstileTransitionMode.ForwardIn
ü TurnstileTransitionMode.ForwardOut
ü TurnstileTransitionMode.BackwardIn
ü TurnstileTransitionMode.BackwardOut
10
Bài 9 – Page Transition Animation
a. Turnstile transition
ForwardIn ForwardOut
11
Bài 9 – Page Transition Animation
BackwardIn – BackwardOut
a. Turnstile transition
12
Bài 9 – Page Transition Animation
XAML code example
a. Turnstile transition
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); TurnstileTransition turnstileTransition =
new TurnstileTransition();
turnstileTransition.Mode =
TurnstileTransitionMode.ForwardIn;
ITransition transition =
turnstileTransition.GetTransition(this);
transition.Begin(); transition.Completed += delegate
{ transition.Stop(); };
}
13
Bài 9 – Page Transition Animation
Coding behind example
b. Swivel transition
Hiệu ứng xoay (Swivel) tương tự như hiệu ứng quay cửa sổ (Turnstile), trong trường hợp này nó sẽ lấy trục quay là nằm ngang giữa trang (Height/2). Hiệu ứng này có các kiểu sau:
ü SwivelTransitionMode.BackwardIn
ü SwivelTransitionMode.BackwardOut
ü SwivelTransitionMode.ForwardIn
ü SwivelTransitionMode.ForwardOut
ü SwivelTransitionMode.FullScreenIn
ü SwivelTransitionMode.FullScreenOut
14
Bài 9 – Page Transition Animation
b. Swivel transition
ForwardIn ForwardOut
BackwardIn BackwardOut
FullScreenIn
15
Bài 9 – Page Transition Animation
FullScreenOut
b. Swivel transition
16
Bài 9 – Page Transition Animation
XAML code example
b. Swivel transition
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); SwivelTransition swivelTransition =
new SwivelTransition();
swivelTransition.Mode =
SwivelTransitionMode.FullScreenIn;
ITransition transition =
swivelTransition.GetTransition(this);
transition.Begin(); transition.Completed += delegate
}
{ transition.Stop(); };
17
Bài 9 – Page Transition Animation
Coding behind example
c. Slide transition
Hiệu ứng trượt trang cho phép trang di chuyển theo một số hướng nào đó: Từ dưới lên, từ trái qua, từ phải qua…Cụ thể ta có các kiểu hiểu ứng sau:
ü SlideTransitionMode.SlideUpFadeIn
ü SlideTransitionMode.SlideUpFadeOut
ü SlideTransitionMode.SlideDownFadeIn
ü SlideTransitionMode.SlideDownFadeOut
ü SlideTransitionMode.SlideLeftFadeIn
ü SlideTransitionMode.SlideLeftFadeOut
18
ü SlideTransitionMode.SlideRightFadeIn
Bài 9 – Page Transition Animation
ü SlideTransitionMode.SlideRightFadeOut
c. Slide transition
SlideUpFadeIn – SlideUpFadeOut
SlideDownFadeIn SlideDownFadeOut
SlideLeftFadeIn SlideLeftFadeOut
SlideRightFadeIn – SlideRightFadeOut
19
Bài 9 – Page Transition Animation
c. Slide transition
20
Bài 9 – Page Transition Animation
XAML code example
c. Slide transition
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); SlideTransition slideTransition =
new SlideTransition();
slideTransition.Mode =
SlideTransitionMode.SlideRightFadeIn;
ITransition transition =
slideTransition.GetTransition(this);
transition.Begin(); transition.Completed += delegate
{ transition.Stop(); };
Coding behind example
21
Bài 9 – Page Transition Animation
}
d. Roll transition
Hiệu ứng này dùng để quay tròn trang, đây là hiệu ứng không có kiểu Mode nên cách sử dụng cũng khá đơn giản.
22
Bài 9 – Page Transition Animation
d. Roll transition
23
Bài 9 – Page Transition Animation
XAML code example
d. Roll transition
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); RollTransition rollTransition =
new RollTransition();
ITransition transition =
rollTransition.GetTransition(this);
transition.Begin(); transition.Completed += delegate { transition.Stop(); };
}
24
Bài 9 – Page Transition Animation
Coding behind example
e. Rotate transition
thể nói nó
tương
Rotate chuyển trang quay theo một số góc độ cố định (có tự như Slide Transition):
ü RotateTransitionMode.In90Clockwise
ü RotateTransitionMode.In90Counterclockwis
e
ü RotateTransitionMode.In180Clockwise
ü RotateTransitionMode.In180Counterclockwise
ü RotateTransitionMode.Out90Clockwise
ü RotateTransitionMode.Out90Counterclockwise
ü RotateTransitionMode.Out180Clockwise
25
Bài 9 – Page Transition Animation ü RotateTransitionMode.Out180Counterclockwise
e. Rotate transition
In180Clockwise In180Counterclockwise
In90Clockwise In90Counterclockwise
Out180Clockwise Out180Counterclockwise
Out90Clockwise Out90Counterclockwise
26
Bài 9 – Page Transition Animation
e. Rotate transition
27
Bài 9 – Page Transition Animation
XAML code example
e. Rotate transition
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); RotateTransition rotateTransition =
new RotateTransition();
rotateTransition.Mode =
RotateTransitionMode.In180Clockwise;
ITransition transition =
rotateTransition.GetTransition(this);
transition.Begin(); transition.Completed += delegate
{ transition.Stop(); };
Coding behind example
28
Bài 9 – Page Transition Animation
}
4. Hiệu ứng cho các UIElement
29
Bài 9 – Page Transition Animation
4. Hiệu ứng cho các UIElement Theo như kiến trúc ở trên thì về cơ bản các Control (Button, Label, TextBox, TextBlock, (Canvas, StackPanel, Listbox…) các Panel Grid…) đều được dẫn xuất từ UIElement, do đó có thể nói rằng các đối tượng này là UIElement.
private void btnRotation_Click(object sender, RoutedEventArgs e) { RotateTransition rotate = new RotateTransition(); rotate.Mode = RotateTransitionMode.In90Clockwise; ITransition transition =
rotate.GetTransition(btnRotation);
transition.Begin(); transition.Completed += delegate
30
Bài 9 – Page Transition Animation
{ transition.Stop(); };
}
Thảo luận
31
Bài 9 – Page Transition Animation
