HTIT: Tạo Snapped, Filled,... với Blank Page trong Windows 8

Đối với việc xây dựng một ứng dụng Window Store App. Xây dựng UI thân thiện đối với người dụng, tận dụng những tính năng của windows 8 là một lợi thế. Trong bài viết sẽ hướng dẫn lập trình viên thiết kế Snapped, Filled và các trạng thái khác đối với một trang Blank.

Trước tiên chúng ta khởi tạo Blank Project. kết quả như hình bên dưới.

Bản thân windows 8 đã cung cấp sẵn đối với các trang dạng Plit, Grid, Basic, vì thế để được hổ trợ ở loại blank ta thêm vào thư mục Common 2 file LayoutAwardPage.cs và SuspensionManager.cs (có thể tìm thấy trong bất kì project Plit và Grid).

Tiếp theo, ta mở 2 file trên và tùy chỉnh namespace phù hợp với project của bạn, trong ví dụ này project có namespace gốc là App1. Ta thay đổi namespace của 2 file như sau:

namespace App1.Common

Bước tiếp theo. Để kích hoạt các trạng thái cho trang bất kì (trong ví dụ này là mainpage) ta mở Mainpage.cs thay đổi như sau:

public sealed partial class MainPage : LayoutAwarePage

Tiếp tục mở file MainPage.xaml sửa lại như sau:

<common:LayoutAwarePage
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common="using:App1.Common"
    mc:Ignorable="d">
<!--Thêm namespace common trỏ đến App1.Common page được tạo kế thừa từ App1.Common.LayoutAwarePage-->
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
    <!--Thay đổi kế thúc trang-->
</common:LayoutAwarePage>

Như vậy ta đã cơ bản tạo được một blank page sẵn sàng các trạng thái.
Tiếp theo ta sẽ tạo bộ VisualStateGroup mang tên ApplicationViewStates Trong ví dụ này, các state sẽ được tạo bằng Blend.
Trước tiên, ta mở page cần chỉnh với Blend

Vào State Tab ta khởi tạo một group gồm các state như hình trên.
Để tiến hành thay đổi trạng thái app, ta chọn state và ấn nút record (nút mày đỏ bên màn hình design)
Ngoài ra, Blend còn hỗ trợ hiển thị app theo trạng thái, ta vào tab device để quá trình thiết kế trực quan hơn.