Giới thiệu về các loại Tile trong Windows Phone 8

Khi sử dụng máy tính hoặc các loại điện thoại đời mới, thông thường ta thấy mỗi ứng dụng sẽ có một icon đại diện, icon này giúp nhận biết được ứng dụng. Kể từ Windows Phone 7 Microsoft đã giới thiệu một thành phần mới của ứng dụng đó là Tile.

Bạn có thể đưa các Tile ra màn hình chính của điện thoại, tùy chỉnh theo sở thích của mình, sắp xếp hợp lý để mang lại sự tiện dụng nhất khi sử dụng thiết bị. Song song với đó, Tile cũng cung cấp cho ta nhiều tiện ích khác, Tile có thể chứa một đoạn thông tin ngắn, điều này ta không thể làm được với kiểu icon cũ, và tuyệt vời hơn nữa là các Tile có thể được cập nhật để hiển thị những thông tin mới nhất mà ứng dụng của bạn muốn đưa đến người dùng.

Sử dụng Tile, bạn có thể cho người dùng thấy được ngay tiêu đề của một bài viết mới, hoặc một email vừa mới nhận, thông tin thời tiết cập nhật… Trong Windows Phone 8 thì Tile đã được cập nhật thêm một vài tính năng mới, giúp cho nó đẹp hơn, tiện ích hơn. Bài viết này sẽ giới thiệu với các bạn cách để tạo các Tile cũng như là quản lý nó.

Các loại Tile

Các Tile trong Windows Phone 8 có thể có 3 kích thước khác nhau: nhỏ (small), trung bình (medium) và lớn (large). Cùng với đó thì ta cũng có 3 kiểu Tile khác nhau để lựa chọn: Lật (Flip), Biểu tượng (Iconic) và Xoay vòng (Cycle).

Với Tile nhỏ thì ta có thể hiển thị một ảnh nền (Background Image) và một con số (Count). Số này có thể được dùng để thông báo với người dùng số lượng các hạng mục mà người dùng có thể quan tâm, ví dụ như là số email chưa đọc, hoặc số bài viết mới của một tờ báo, số công việc phải làm trong ngày… Đối với Tile trung bình thì ta ngoài ảnh nền và số ra thì ta còn có thể thêm vào đó một tiêu đề (Title) nữa, còn đối với Tile lớn thì lại có thêm một đoạn nội dung với độ dài tối đa được hạn chế.

Iconic Tile

Iconic Tile là loại Tile đơn giản nhất, nó được thiết kế theo các nguyên tắc thiết kế hiện đại của Windows Phone. Iconic Tile chỉ bao gồm một màu nền (không có ảnh nền) và một icon đơn giản, icon này có màu trắng và nền trong suốt. Hình sau mô tả một Iconic Tile với 3 kích thước khác nhau lần lượt là: nhỏ, trung bình và lớn:

Để tạo một Iconic Tile, bạn cần chuẩn bị 2 ảnh:

SmallIconImage: Ảnh này sẽ được sử dụng khi Tile có kích thước nhỏ, hoặc là khi Tile có kích thước lớn nhưng có thêm một đoạn nội dung đi kèm. Kích thước lớn nhất có thể sử dụng là 110×110 pixel, nhưng tốt nhất nên sử dụng một ảnh có kích thước là 70×110 pixel.

IconImage: Ảnh này sẽ được dùng khi Tile có kích thước trung bình, hoặc khi tile có kích thước lớn và không kèm theo đoạn nội dung. Kích thước lớn nhất có thể sử dụng là 202×202 pixel, nhưng kích thước tốt nhất nên sử dụng là 130×202 pixel.

Số lượng các ký tự trong phần tiêu đề và cả trong đoạn nội dung đi kèm đều được giới hạn để nó có thể hiển thị tốt bên trong Tile.

Tạo Iconic Tile

Để tạo một Iconic Tile thì trước tiên ta hãy khởi tạo dữ liệu cho nó. Trong ví dụ này chúng ta lấy một dữ liệu mẫu được định trước.

[code lang=”csharp”]
IconicTileData iconicTileData = new IconicTileData
{
Title = "Việt Nam",
Count = DateTime.Now.Second,
BackgroundColor = Color.FromArgb(255, 195, 61, 39),
IconImage = new Uri("Assets/Tiles/IconicTileMediumLarge.png", UriKind.Relative),
SmallIconImage = new Uri("Assets/Tiles/IconicTileSmall.png", UriKind.Relative),
WideContent1 = "Việt Nam thống nhất",
WideContent2 = "Sát nhập 2 tỉnh Quảng Bình và Hà Tĩnh",
WideContent3 = "Tên gọi của tỉnh mới là Bình Tĩnh"
};
ShellTile.Create(new Uri("/Mainpage.xaml?iconicTile", UriKind.Relative), iconicTileData, true);

[/code]

Phương thức Create() của lớp ShellTile được sử dụng để tạo Tile mới.

ShellTile.Create(new
Uri(“/Mainpage.xaml?iconicTile”, UriKind.Relative), iconicTileData, true);

Chúng ta sẽ được chuyển đến màn hình Start và sẽ thấy ngay Tile mới mà chúng ta vừa tạo ra.

Cập nhật Iconic Tile

Để cập nhật Iconic Tile, việc đầu tiên chúng ta cần làm đó là tìm ra Iconic Tile mà chúng ta đã tạo. Trong trường hợp này chúng ta sẽ dựa vào Navigation Uri của ShellTile để xác định được Tile mà chúng ta muốn cập nhật, việc này sẽ được thực hiện bởi phương thức FindTile() của chúng ta.

[code lang=”csharp”]
private ShellTile FindTile(String uriArg)
{
//Lấy về Iconic Tile đã tạo trước đó với Uri kết thúc bằng "iconicTile"
try
{
ShellTile tileId = ShellTile.ActiveTiles.Single(t =>
{
if (t.NavigationUri.ToString().EndsWith(uriArg))
{
return true;
}
return false;
});
return tileId;
}catch{
return null;
}
}

[/code]

Chúng ta sẽ tiến hành tạo dữ liệu mới cho Tile và cập nhật dữ liệu này bằng việc sử dụng phương thức Update() của lớp ShellTile.

[code lang=”csharp”]
ShellTile tileId = FindTile("iconicTile");
if (tileId != null)//Chỉ cập nhật nếu Iconic Tile đã được tạo trước đó
{
IconicTileData iconicTileData = new IconicTileData
{
//Giá trị mới của Count, Có thể cập nhật các dữ liệu
//khác của Tile như Title, WideContent1, WideContent2… nếu muốn.
Count = DateTime.Now.Second
};
tileId.Update(iconicTileData);
MessageBox.Show("Iconic Tile đã được cập nhật");
} else {
MessageBox.Show("Hãy tạo Tile trước");
}

[/code]

Flip tile

Flip tile có 2 lớp: lớp trước (front) và lớp sau (back). Với kích thước nhỏ thì tile chỉ hiển thị ảnh background mà thôi, còn với kích thước trung bình và lớn thì 2 lớp front và back sẽ thay đổi nhau hiển thị, việc hoán đổi này thường xảy ra trong vòng khoảng 6 giây hoặc lâu hơn, thời gian này được sinh ra ngẫu nhiên để đảm bảo rằng tất cả các tile trên màn hình không đồng loạt thay đổi cùng môt lúc.

Các thuộc tính của một Flip Tile được mô tả trong hình sau:

Như vậy, để tạo được một Flip Tile thì chúng ta phải chuẩn bị 5 ảnh để hiển thị trong từng trường hợp:

• SmallBackgroundImage: Ảnh nền trong trường hợp kích thước nhỏ.
• BackgroundImage và BackBackgroundImage: Ảnh nền lớp trước và sau trong trường hợp kích thước trung bình.
• WideBackgroundImage và WideBackBackgroundImage: Ảnh nền lớp trước và sau trong trường hợp kích thước lớn.

Tạo Flip Tile

Cũng giống như trường hợp tạo Iconic Tile, trước tiên chúng ta cần tạo dữ liệu cho Flip Tile:

[code lang=”csharp”]
FlipTileData flipTileData = new FlipTileData
{
Title = "San lấp Vịnh Hạ Long",
BackTitle = "San lấp Vịnh Hạ Long",
BackContent = "Sẽ được tiến hành từ ngày 30/2/2014",
WideBackContent = "Việc san lấp Vịnh Hạ Long sẽ giúp cho việc đi lại của du khách dễ dàng hơn",
Count = DateTime.Now.Second,
SmallBackgroundImage = new Uri("Assets/Tiles/FlipSmall.png", UriKind.Relative),
BackgroundImage = new Uri("Assets/Tiles/Flip1.jpg", UriKind.Relative),
BackBackgroundImage = new Uri("Assets/Tiles/FlipBack.png", UriKind.Relative),
WideBackgroundImage = new Uri("Assets/Tiles/Flip2.jpg", UriKind.Relative),
WideBackBackgroundImage = new Uri("Assets/Tiles/FlipWideBack.png", UriKind.Relative)
};
ShellTile.Create(new Uri("/MainPage.xaml?flipTile", UriKind.Relative), flipTileData, true);

[/code]

Sau khi đã tạo xong Tile thì bạn hãy đi đến màn hình Start để xem qua nhé, nhớ là phải thay đổi kích thước của Tile để thấy được sự khác nhau trong từng trường hợp.

Để cập nhật một Flip Tile thì chúng ta cũng sẽ làm tương tự như đối với Iconic Tile, tức là trước tiên chúng ta phải kiểm tra xem Flip Tile đó đã được tạo hay chưa, nếu đã có rồi thì chúng ta chỉ việc tạo dữ liệu mới cho Flip Tile rồi cập nhật nó. Tôi nhường phần việc này cho các bạn nhé.

Cycle Tile

Cycle Tile là loại tile có hiệu ứng khá đẹp, nó sẽ dùng từ 1 đến 9 ảnh để hiển thị xoay vòng. Loại Tile sẽ rất là phù hợp cho những ứng dụng có sử dụng nhiều ảnh, ví dụ như là bộ sưu tập, ứng dụng quản lý ảnh, chia sẻ ảnh, xem ảnh từ các nguồn khác nhau…

Các thuộc tính của một Cycle Tile được mô tả trong hình sau:

Tạo Cycle Tile

Để tạo được một Cycle Tile thì bạn hãy chuẩn bị một ảnh nền nhỏ để hiển thị trong trường hợp Tile có kích thước nhỏ. Còn trong trường hợp Tile có kích thước trung bình hoặc lớn thì Tile sẽ sử dụng từ 1 đến 9 ảnh để hiển thị thay thế nhau (số lượng ảnh có thể ít hơn 9), bạn hãy lựa chọn các ảnh có độ phân giải cao một chút, như vậy thì sẽ nhìn đẹp hơn.

[code lang=”csharp”]
CycleTileData cycleTileData = new CycleTileData {
Count = DateTime.Now.Second,
Title = "Phong cảnh Việt Nam",
SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative),
CycleImages = new Uri[]{
new Uri("/Assets/Tiles/Cycle/1.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/2.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/3.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/4.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/5.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/6.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/7.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/8.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/Cycle/9.jpg", UriKind.Relative)
}
};

ShellTile.Create(new Uri("/MainPage.xaml?cycleTile", UriKind.Relative), cycleTileData, true);

[/code]

Cũng giống như ở 2 trường hợp trên, chúng ta hoàn toàn có thể cập nhật dữ liệu cho một Cycle Tile. Có một lưu ý ở đây là Cycle không cho phép sử dụng các ảnh từ xa, do đó, nếu bạn muốn hiển thị các ảnh từ xa thì trước tiên phải tải về ảnh trên thiết bị của bạn rồi mới tiến hành cập nhật đường dẫn đến các ảnh cho Cycle Tile. Một lần nữa tôi lại nhường công việc yêu thích này để các bạn tự khám phá nhé.

Chúng ta đã tìm hiểu sơ qua về ba loại Tile có trong Windows Phone 8, kết thúc bài hướng dẫn này, các bạn đã hoàn toàn có thể tự tạo và cập nhật dữ liệu cho các Tile của ứng dụng. Một điều đáng lưu ý ở đây  là bạn nên cân nhắc lựa chọn loại Tile phù hợp với ứng dụng của bạn, phù hợp với chức năng mà bạn muốn đưa tới người dùng. Các bạn có thể tham khảo thêm một số gợi ý ở đây để có được sự lựa chọn tốt nhất.

Mã nguồn bản demo: Download.

(Nhấn Ctr + S để tải cả file .rar)

Nguyễn Khắc Nhật