This document summarizes some unique features of Windows 8 Store apps, including UI conventions like app bars and snapped view, semantic zooming, contracts for search and sharing, and live tiles. It also discusses language choices for developing apps, asynchronous programming, and new features in Windows 8.1 like the start menu and device APIs.
6. Windows 8
• Still runs anything that ran on Windows 7
• 7.41% desktop market share
(http://www.netmarketshare.com/operating-system-market-share.aspx)
• New App Store Model
7. Windows Store Apps
• Formerly known as Metro-Style Apps
• Distributed through a store
• Sandboxed
• Run on Windows 8 and Windows RT
8. Windows RT
• Windows designed to run on ARM chips
• Microsoft developed desktop apps
• Word
• Excel
• Notepad
• Third party desktop apps cannot be installed
• Focused on Windows Store Apps
12. UI Conventions Topics
• Overall look and feel
• App bars
• Snapped view
• Semantic zoom
• Share and Search Contracts
• Live Tiles
13. Look and Feel
• Content over chrome
• Fast and fluid
• Authentically digital
14.
15.
16.
17.
18.
19.
20. App bars
• Available when the user needs chrome
• Top and bottom of page
• Top App Bar is meant for navigation
• Bottom App Bar left used as context menu
• Bottom right frequent settings access
25. Snapped View
• Keep two windows open at once
• 320px side window
• 1366 x 768 minimum resolution for snapped
view
26.
27.
28. Snapped View Media Query
@media screen and (-ms-view-state: snapped) {
.fragment header[role=banner] {
-ms-grid-columns: auto 1fr;
margin-left: 15px;
margin-right: 15px;
}
}
@media screen and (-ms-view-state: fullscreen-portrait) {
.fragment header[role=banner] {
-ms-grid-columns: 29px 71px 1fr;
}
}
29. Semantic Zoom
• View content with logical grouping
• Control over the two levels of zoom
30.
31.
32. Semantic Zoom XAML
<SemanticZoom>
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView>
</SemanticZoom>
33. Semantic Zoom HTML
<div data-win-control="WinJS.UI.SemanticZoom">
<!-- The control that provides the zoomed-in view goes here. -->
<!-- The control that provides the zoomed-out view goes here. -->
</div>
34. Search and Share Contracts
• Define ‘contracts’ with the OS
• Only communication between apps
• Common functionality
• Custom search results
35.
36.
37. Registering for Share Events
function registerForShare() {
var dataTransferManager =
Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareTextHandler);
}
function shareTextHandler(e) {
var request = e.request;
request.data.properties.title = "Share Text Example";
request.data.properties.description = "Demonstrates how to share text.";
request.data.setText("Hello World!");
}
38.
39.
40. Live Tiles
• Ability to dynamically add text or images to
your app tile
• Only available to Windows 8 store apps
• Available for large and small tiles
• No way to determine which content the user
clicked on
41.
42.
43. Live Tile JavaScript
var notifications = Windows.UI.Notifications;
var template = notifications.TileTemplateType.tileWide310x150ImageAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);
var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("Hello World! My very own tile notification"));
var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "ms-appx:///images/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");
var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
squareTileTextAttributes[0].appendChild(
squareTileXml.createTextNode("Hello World! My very own tile notification"));
var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);
var tileNotification = new notifications.TileNotification(tileXml);
var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
44. The Live Tile Update Problem
var notifications = Windows.UI.Notifications;
// …
//Build update XML
// …
var tileNotification = new notifications.TileNotification(tileXml);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
50. C# Async Await
async Task MyMethodAsync()
{
// Do asynchronous work.
await Task.Delay(1000);
// Run when task is done
}
51. Windows 8.1
• Start Menu
• Flexible split screen
• Host of other UI controls
• Device APIs
• New Store
• Release Oct 18
• Visual Studio 2013 Release Nov 13
52.
53.
54.
55.
56. Other Control Changes
• Date and time picker (XAML)
• WebView (HTML)
• Command Bar (XAML)
• Render to BitMap (XAML)
• Hub (XAML and HTML)