การพัฒนา Windows 10 - Live Tiles
ในบทนี้เราจะพูดถึงการโต้ตอบกับผู้ใช้ผ่านกระเบื้อง เป็นส่วนที่เป็นสัญลักษณ์ของ Windows 10 Tiles จะแสดงบนไฟล์Start Screen เช่นเดียวกับบน Start Menu. กล่าวอีกนัยหนึ่งก็คือเนื้อหาไอคอนแอปพลิเคชันซึ่งปรากฏในหลากหลายรูปแบบทั่วทั้งระบบปฏิบัติการ Windows 10 เป็นบัตรโทรศัพท์สำหรับแอป Universal Windows Platform (UWP) ของคุณ
กายวิภาคของกระเบื้อง
กระเบื้องมีสามสถานะ
Basic State - ส่วนประกอบพื้นฐานของไทล์เริ่มประกอบด้วยแผ่นหลังไอคอนและชื่อแอป
Semi-Live state - เหมือนกับกระเบื้องพื้นฐานที่มีข้อแตกต่างเพียงอย่างเดียวที่ตราซึ่งเป็นตัวเลขสามารถแสดงตัวเลขได้ตั้งแต่ 0-99
Live State - ไทล์นี้มีองค์ประกอบทั้งหมดของไทล์สถานะกึ่งสดและยังแสดงแผ่นเนื้อหาเพิ่มเติมที่คุณสามารถใส่อะไรก็ได้ที่คุณต้องการเช่นภาพถ่ายข้อความเป็นต้น
กำลังอัปเดตไทล์
มีสี่วิธีในการอัปเดตไทล์
Scheduled - คุณสามารถตั้งค่าเทมเพลตและเวลาด้วย ScheduledTileNotification.
Periodic- เมื่อดึงข้อมูลจาก URI และคุณสามารถระบุเวลาในการดึงข้อมูลหลังจากช่วงเวลาดังกล่าวเช่น 30 นาที, 1 ชม., 6 ชม. เป็นต้น
Local- สามารถอัปเดตท้องถิ่นได้จากแอปพลิเคชันของคุณ ทั้งจากพื้นหน้าหรือแอปพื้นหลัง
Push - อัปเดตจากเซิร์ฟเวอร์โดยการส่งข้อมูลจากเซิร์ฟเวอร์
ในการสร้างไทล์ให้ทำตามรหัสที่กำหนด
var tileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Text01);
var tileAttributes = tileXml.GetElementsByTagName("text");
tileAttributes[0].AppendChild(tileXml.CreateTextNode("Hello"));
var tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
Update badge ค่อนข้างง่ายเพราะเป็นเพียงตัวเลขและคุณสามารถกำหนดค่าของตราได้ดังที่แสดงด้านล่าง
var type = BadgeTemplateType.BadgeNumber;
var xml = BadgeUpdateManager.GetTemplateContent(type);
var elements = xml.GetElementsByTagName("badge");
var element = elements[0] as Windows.Data.Xml.Dom.XmlElement;
element.SetAttribute("value", "7");
var updator = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
var notification = new BadgeNotification(xml);
updator.Update(notification);
ให้เราสร้างโครงการ UWP ใหม่ใน Visual Studio
คุณจะเห็นไฟล์ png ต่างๆในไฟล์ Assets โฟลเดอร์ใน Solution Explorer.
ให้เรากำหนดไทล์เริ่มต้นและรูปภาพในรายการแพ็กเกจ
ดับเบิลคลิกที่ไฟล์ package.appxmanifest. ซึ่งจะเปิดหน้าต่างตัวแก้ไขรายการ
เลือก Visual Assets แท็บ
คุณสามารถเลือกรูปภาพและไอคอนสำหรับไทล์แอปพลิเคชันของคุณด้วยขนาดใดก็ได้ที่ระบุ ภายใต้Tile Images and Logosภาพเริ่มต้นมีไว้สำหรับโลโก้ทั้งหมดเช่น
- โลโก้สี่เหลี่ยม 71x71
- โลโก้สี่เหลี่ยม 150x150
- โลโก้สี่เหลี่ยม 310x310
- โลโก้ร้านค้า
เมื่อคุณรันแอปพลิเคชันแล้วไปที่หน้าจอเริ่มต้นคุณจะเห็นไทล์สำหรับแอปพลิเคชันของคุณ