Tạp chí Lập trình – Trong bài viết này, tôi sẽ giới thiệu cho các bạn về Splash Screen và Extended Splash Screen trên một ứng dụng WP8 và cách tạo một splash screen cho ứng dụng của riêng bạn.

1. Định nghĩa

Splash Screen Extended Splash Screen là hình ảnh hiển thị trên màn hình điện thoại của bạn trong thờii gian ứng dụng đang được load. Nói cách khác, đó là “màn hình chờ” của ứng dụng. Đây là hình ảnh minh họa:

h1

Ở ứng dụng WP 7, Splash Screen được tạo sẵn khi bạn tạo một project mới. Nhưng với ứng dụng WP 8, bạn phải tự tạo cả Splash Screen và Extended Splash Screen. Vậy sự khác nhau giữa Splash Screen và Extended Splash Screen là gì. Tôi đưa ra một bảng so sánh nhỏ để các bạn hiểu rõ hơn:

Splash Screen

Extend Splash Screen

– Là hình ảnh dạng .jpg
-Thời gian hiển thị ngắn(khoảng 1′) và không thay đổi được.
– Hiển thị trước Extended Splash Screen.
– Là page XAML mới hoàn toàn.
– Thời gian hiển thị có thể tùy chỉnh bằng code.
– Được điều hướng trở lại Main Page

Splash Screen và Extended Splash Screen được tạo ra nhằm mục đích bổ sung thông tin về ứng dụng của bạn(thông tin về nhà phát triển, phiên bản…). Ngoài ra, đây cũng là cách để gây ấn tượng với người dùng.

2. Cách làm.

Bây giờ, tôi sẽ hướng dẫn các bạn các tạo Splash Screen và Extend Splash Screen cho ứng dụng. Trước tiên, cần tạo mới một project WP trên VS. Lưu ý, khi lựa chọn phiên bản WP cho ứng dụng của mình, bạn phải chọn WP 8.0 thay vì 7.1, mặc dù nếu chọn 7.1 thì ứng dụng của bạn sẽ hoạt động được trên cả hai phiên bản WP 7 và WP 8. Toàn bộ các hướng dẫn phía dưới sẽ chỉ hoạt động trên WP 8.0. Với các phiên bản WP thấp hơn, cách làm là hoàn toàn khác.

Bắt đầu với Splash Screen. Do chỉ là file ảnh đơn thuần nên việc tạo Splash Screen rất đơn giản. Bạn chỉ cần tạo các file ảnh có tên và kích thước như bảng dưới đây rồi add vào project của mình là được.

Độ phân giải màn hình

Kích thước ảnh

Tên ảnh

WVGA

480*800

SplassScreenImage-WVGA.jpg

720p

720*1280

SplassScreenImage-720p.jpg

WXGA

768*1280

SplassScreenImage-WXGA.jpg

Chắc bạn sẽ thắc mắc tại sao cần tạo 3 file ảnh như trên. Đó là bởi vì ứng dụng WP 8 hỗ trợ 3 loại độ phân giải màn hình trên. Khi khởi chạy, ứng dụng sẽ tự động sử dụng file ảnh đúng với độ phân giải màn hình của thiết bị. OK chưa nào.

Với Extended Splash Screen thì phức tạp hơn một chút. Tôi sẽ hướng dẫn cụ thể bằng hình ảnh. Trước tiên, tạo một folder mới trong project của bạn bằng các chuột phải vào Project -> Add -> New Folder và đặt tên folder này là Images.


B2: Bạn tạo một file ảnh .jpg với tên ExtendedSplashScreen.jpg rồi add vào folder Images vừa tạo.

B3: Tạo một page XAML mới trong project với tên ExtendedSplashScreen.xaml. Cách tạo tương tự như tạo 1 folder mới, nhưng bạn chọn New Item sau đó chọn template là Windows Phone Portrait Page.

B4: Tiếp theo, chuyển đến folder Properties trong project, bạn mở file WMAppMainfest.xml. Trong tab ApplicationUI có trường Navigation Page, bạn đổi giá trị của trường này từ MainPage.xaml thành ExtendedSplashScreen.xaml.


B5: Bây giờ, bạn sửa phần code của file ExtendedSplashScreen.xaml theo như hình dưới đây:


B6: Chuyển sang file ExtendedSplashScreen.xaml.cs các bạn code như sau:


Hãy để ý đến dòng using System.Threading.Tasks. Chúng ta chỉ có thể sử dụng namespace này trên WP 8. Đó chính là lý do vì sao bạn bắt buộc phải lựa chọn phiên bản WP 8.0 như đã nó ở trên. Ngoài ra, namespace này cũng chỉ có ở các phiên bản .NET Framework 4.0 trở lên. Hãy lưu ý điều này!!

B7: Bước này là một điều chỉnh nhỏ trước khi hoàn thành. Khi xong 6 bước trên và khởi chạy ứng dụng, bạn thấy mọi thứ đều đã làm việc, đúng không. Nhưng có một điểm chưa tốt. Khi bạn ấn nút Back trên điện thoại, ứng dụng của bạn sẽ chuyển từ Main Page sang Extended Splash Screen, như thế rõ ràng là bất tiện. Muốn chuyển hướng về menu các ứng dụng, hãy thêm đoạn code sau vào file MainPage.xaml.cs

Như vậy là tôi đã hướng dẫn các bạn hoàn thành Splash Screen và Extended Splash Screen cho một ứng dụng WP 8. Hi vọng với bài viết nhỏ này, các bạn sẽ có được những chuẩn bị đơn giản nhất trên con đường “chinh phục” WP8. Cảm ơn và hẹn gặp lại! Chúc thành công!


Đào Văn Đức

    Tham khảo: developer.nokia.com