2-762.pptx

Tiles, Notifications and Action Center in Windows 10

1.0x

2-762.pptx

Created 2 years ago

Duration 0:00:15
lesson view count 1535
Tiles, Notifications and Action Center in Windows 10
Select the file type you wish to download
Slide Content
  1. Thomas Fennel

    Slide 1 - Thomas Fennel

    • Principal Program Manager Lead
    • Application Model
    • Tiles, Notifications, and Action Center
    • 2-762
    • //build/ content is being presented by Microsoft Office Mix The video for this session will be available shortly
  2. Slide 2

    • Tony
    • 684
    • User Data
    • Title: User Data: Working with Contacts, Appointments, Text Messages and more on Windows 10
    • Code: 684
    • Speaker: Tony Pendolino
    • Room: TBD
    • Date: 4/30
    • Time: 2.00
    • App Services
    • Arun
    • 765
    • Title: App-to-App Communication: Building a Web of Apps
    • Code: 765
    • Speaker: Arunjeet Sing
    • Room: TBD
    • Date: 5/1
    • Time: 2.00
    • Thomas
    • 762
    • Shell
    • Title: Tiles, Notifications and Action Center
    • Code: 762
    • Speaker: Thomas Fennel
    • Room: 2005
    • Date: 5/1
    • Time: 12.30
    • Kernel
    • Shawn
    • 626
    • Title: Windows 10 App Lifecycle: From Activation & Suspension to Background Execution and Multitasking
    • Code: 626
    • Speaker: Shawn Henry
    • Room: TBD
    • Date: 4/29
    • Time: 2.00
    • App
    • Title: Navigation and Windowing in Windows 10 Apps
    • Code: 779
    • Speaker: Roberth Karman
    • Room: TBD
    • Date: 5/1
    • Time: 10.30
    • Enterprise
    • Title: Enterprise App Packaging and Deployment for Windows 10 Devices
    • Code: TBD
    • Speaker: John Vintzel
    • Room: TBD
    • Date: TBD
    • Time: TBD
    • John
    • Ignite
    • Store
    • Title: Universal App Packaging and Deployment for Windows 10 Devices
    • Code: 695
    • Speaker: Barclay Hill
    • Room: TBD
    • Date: 4/30
    • Time: 3.30
    • Barclay
    • 695
    • Title: Introducing the Windows App Model
    • Code: 617
    • Speaker: Andrew Clinick
    • Room: TBD
    • Date: 4/29
    • Time: 11.30
    • Andrew
    • 617
    • App Model
    • Application Model Map
    • Roberth
    • 779
  3. What’s different about this year?

    Slide 3 - What’s different about this year?

  4. What we heard:

    Slide 4 - What we heard:

    • Windows Apps
    • UI Updates
    • Notification Center (again)
    • Please…don’t say more templates
    • More Powerful Notifications
    • Session Objectives And Takeaways
  5. Universal Windows Apps

    Slide 5 - Universal Windows Apps

  6. Started last year with binary convergence

    Slide 6 - Started last year with binary convergence

    • Universal Windows Apps are fully API converged for Tiles, Notifications and Action Center
    • APIs will work on current and upcoming Windows products like PCs, Mobile, XBOX, IoT, and HoloLens – everywhere the Universal Windows Platform runs
    • Universal Windows Apps and UWP
  7. UI Updates: Start and Tile Principles

    Slide 7 - UI Updates: Start and Tile Principles

  8. Start is efficient

    Slide 8 - Start is efficient

    • Start is beautiful and iconic
    • Start is personal
    • Start adapts and optimizes
    • Start is a doorway to my world
    • Start
  9. Glance (consume)Quickly review new information and engage with apps before launching them.

    Slide 9 - Glance (consume)Quickly review new information and engage with apps before launching them.

    • Go (launch)Start by it's very nature is where you go to begin a task. At it's most basic, the tile is the doorway into the app by launching it.
    • Tiles
  10. UI Updates: Tiles Basics

    Slide 10 - UI Updates: Tiles Basics

  11. Custom 4 effective pixel gridUsing the omni, 4px grid as our foundation, we updated the Start grid across our device ecosystem. We made tiles responsive and minimized the gutter and margins which allows for more tile area on a given screen.The units in the grid are based off of the smallest tile size. Each larger tile size is sum of the smaller units and gutters between them.

    Slide 11 - Custom 4 effective pixel gridUsing the omni, 4px grid as our foundation, we updated the Start grid across our device ecosystem. We made tiles responsive and minimized the gutter and margins which allows for more tile area on a given screen.The units in the grid are based off of the smallest tile size. Each larger tile size is sum of the smaller units and gutters between them.

    • Start Grid
  12. Tiles are not always the same size…

    Slide 12 - Tiles are not always the same size…

    • Note: This use to be exclusive to mobile, but now includes desktop as well.
    • High density example
    • Responsive Tile Sizes
    • …they adapt to the screen they’re onSince the Start grid has different densities and adapts to the screen size of your device, so do our tiles and the content within them.
    • Low density example
  13. Adaptive Tile Templates (Windows App)The adaptive tile template is our most flexible tile we’ve ever had. This template allows you to put the content you want on the tiles, how you want it, and have it work across all of Windows phone, tablet, and PC devices.

    Slide 13 - Adaptive Tile Templates (Windows App)The adaptive tile template is our most flexible tile we’ve ever had. This template allows you to put the content you want on the tiles, how you want it, and have it work across all of Windows phone, tablet, and PC devices.

    • Legacy TemplatesIf there is a template that already meets your needs perfectly, feel free to use the legacy template catalog. There are over 80 different templates available for use.
    • Custom Templates There is one unique template that we designed for first-party apps that will also be opened up for public use in July.
    • Tile Templates
  14. UI Updates:Introducing Adaptive Tile Templates

    Slide 14 - UI Updates:Introducing Adaptive Tile Templates

  15. Content adapts with the tileThe new adaptive tile template works similarly to universal app patterns by allowing your content to adapt depending on the devices screen density. As you design your tiles it is important to keep in mind how you want your content to adapt to the tiles size on screens of different densities.

    Slide 15 - Content adapts with the tileThe new adaptive tile template works similarly to universal app patterns by allowing your content to adapt depending on the devices screen density. As you design your tiles it is important to keep in mind how you want your content to adapt to the tiles size on screens of different densities.

    • <tile>
    • <visual>
    • <binding template="TileMedium">
    • <group>
    • <subgroup>
    • <text hint-style="subtitle">John Doe</text>
    • <text hint-style="subtle">Photos from our trip</text>
    • <text hint-style="subtle">Thought you might like to see all of</text>
    • </subgroup>
    • </group>
    • <group>
    • <subgroup>
    • <text hint-style="subtitle">Jane Doe</text>
    • <text hint-style="subtle">Questions about your blog</text>
    • <text hint-style="subtle">Have you ever considered writing a</text>
    • </subgroup>
    • </group>
    • </binding>
    • </visual>
    • </tile>
    • Min. Med Size
    • Max Med. Size
    • Show more content?
    • XML SAMPLE 1
    • Adaptive Tile Template
  16. XML SAMPLE 2

    Slide 16 - XML SAMPLE 2

    • Min. Med Size
    • Max Med. Size
    • Wrap/reflow text?
    • <tile>
    • <visual>
    • <binding template="TileMedium">
    • <text hint-wrap=“true">Microsoft HoloLens: A Sensational Vision of the PC’s Future
    • </text>
    • </binding>
    • </visual>
    • </tile>
    • Content adapts with the tileThe new adaptive tile template works similarly to universal app patterns by allowing your content to adapt depending on the devices screen density. As you design your tiles it is important to keep in mind how you want your content to adapt to the tiles size on screens of different densities.
    • Adaptive Tile Template
  17. Basic StateThe default, simplest state of your tile. This state highlights the app’s branding elements to make it clear what the app is.

    Slide 17 - Basic StateThe default, simplest state of your tile. This state highlights the app’s branding elements to make it clear what the app is.

    • Live StateThis state allows you to provide timely, relevant content through a notification so the user can make a more informed decision about launching your app.
    • Semi-Live StateThis state allows you to display a badge notification on your tile to indicate a change in your app (e.g. new, status, etc.).
    • Adaptive Tile States
    • TileSmall
    • TileMedium
    • TileWide
    • TileLarge
  18. Basic State

    Slide 18 - Basic State

    • Semi-Live State
    • Live State
    • Plate
    • App Logo (Square150x150Logo)
    • Short Name
    • Plate
    • App Logo (Square150x150Logo)
    • Short Name
    • Badge
    • Plate
    • App Icon (Square44x44Logo)
    • Short Name
    • Badge
    • Content
    • Plate
    • App Logo (Square150x150Logo)
    • Short Name
    • Plate
    • App Logo (Square150x150Logo)
    • Short Name
    • Badge
    • Plate
    • Short Name
    • Badge
    • App Icon (Square44x44Logo)
    • Content
    • Adaptive Tile Elements and Composition
  19. Content notifications can display image, text, or some combination of both. This is where you can customize your tile and get the most out of your live tile.Because these assets scale, baking text into the image asset isn’t ideal.

    Slide 19 - Content notifications can display image, text, or some combination of both. This is where you can customize your tile and get the most out of your live tile.Because these assets scale, baking text into the image asset isn’t ideal.

    • Text
    • Text Columns
    • Background Image
    • Background Image and Text
    • Inline Image and Text
    • Columns
    • Inline Image and Text Groups
    • Adaptive Tile Elements: Content
  20. Adaptive Tiles Demo

    Slide 20 - Adaptive Tiles Demo

  21. Windows.UI.Notifications.BadgeUpdateManager/BadgeUpdaterScheduledTileNotificationTileUpdateManager/TileUpdaterWindows.UI.StartScreenSecondaryTile

    Slide 21 - Windows.UI.Notifications.BadgeUpdateManager/BadgeUpdaterScheduledTileNotificationTileUpdateManager/TileUpdaterWindows.UI.StartScreenSecondaryTile

  22. Mechanism

    Slide 22 - Mechanism

    • Scenario
    • Expires
    • WinRT API
    • Local
    • Update a tile immediately, while the app is running or from a background task
    • Never
    • TileUpdateManager
    • tileUpdater.Update()
    • Scheduled
    • Update a tile once, at a specific date and time. E.g., tomorrow at 4pm
    • 3 days
    • TileUpdateManager
    • tileUpdater.AddToSchedule()
    • Periodic
    • Update a tile by polling a remote URI on an interval. E.g., every 30 minutes
    • 3 days
    • TileUpdateManager
    • tileUpdater.StartPeriodicUpdate()
    • Push
    • Update a tile immediately, by sending a push notification from your server
    • -or-
    • Send a Raw notification to wake a background task that triggers a tile update
    • 3 days
    • PushNotificationChannelManager
    • How can I send tile updates?
  23. Slide 23

    • XamlRenderingBackgroundTask is in Windows Apps
    • XAML Tiles on Start are being worked on
    • Interactive Tiles on Start are being worked on
    • Beyond Adaptive Tiles
  24. UI Updates: Toast and Action Center Principles

    Slide 24 - UI Updates: Toast and Action Center Principles

  25. Action Center is efficient

    Slide 25 - Action Center is efficient

    • Action Center is beautiful and iconic
    • Action Center adapts and optimizes
    • Action Center is how I get things done
    • Action Center
  26. Glance (consume)See new information from your apps.

    Slide 26 - Glance (consume)See new information from your apps.

    • Act (chase, or take actions)Toasts by nature invite you to begin or even complete a task.
    • The toast is the doorway into the app by chasing (clicking) it. Additional custom actions enable users to perform simple tasks without context switching.
    • Toasts
  27. The same look and feel for the Windows family

    Slide 27 - The same look and feel for the Windows family

    • Behaviors inherited from Windows Phone Toast and Action Center… and more
    • Toasts automatically go into Action Center
    • Toasts can be expanded to view the full content
    • Chase individual notifications
    • Clear all
    • Remove per app group
    • Remove individual notifications
    • Alarms and reminders can now be viewed inside Action Center
    • Action Center in Windows 10
  28. UI Updates: Toast Basics

    Slide 28 - UI Updates: Toast Basics

  29. Adaptive and Interactive Toast Template (Windows App)The adaptive toast template is our most flexible toast we’ve ever had. This template allows you to put the content you want on the toast, how you want it, and have it work across all of Windows phone, tablet, and PC devices.  It allows you to add interactivity to quickly reply to a message, accept an invite, like something on a social network, or snooze an alarm.

    Slide 29 - Adaptive and Interactive Toast Template (Windows App)The adaptive toast template is our most flexible toast we’ve ever had. This template allows you to put the content you want on the toast, how you want it, and have it work across all of Windows phone, tablet, and PC devices. It allows you to add interactivity to quickly reply to a message, accept an invite, like something on a social network, or snooze an alarm.

    • Legacy TemplatesIf there is a template that already meets your needs perfectly, feel free to use the legacy template catalog. There are 8 different templates available for use and previously Windows only template features, like inline images, are now fully working on Windows Phone.
    • Toast Templates
    • Desktop
    • Mobile
  30. UI Updates:Introducing Adaptive and Interactive Toast Templates

    Slide 30 - UI Updates:Introducing Adaptive and Interactive Toast Templates

  31. Show more content?

    Slide 31 - Show more content?

    • XML SAMPLE 1
    • <toast>
    • <visual>
    • <binding template=“ToastGeneric”>
    • <image placement=“appLogoOverride” src=“Torrance Shum.png” />
    • <text>Torrance Shum</text>
    • <text>Media content attached.</text>
    • <image placement=“inline” src=“attachment.png” />
    • <text>Hey check out this photo. Isn’t it awesome?</text>
    • </binding>
    • </visual>
    • </toast>
    • Content adapts with the toastThe new adaptive toast template works similarly to universal app patterns by allowing your content to adapt depending on the toast’s size and state. As you design your toasts it is important to keep in mind how you want your content to adapt to the toasts size.
    • Adaptive Toast Template
  32. XML SAMPLE 2

    Slide 32 - XML SAMPLE 2

    • Want actions?
    • <toast>
    • <visual>
    • <binding template=“ToastGeneric”>
    • <text>Time to leave</text>
    • <text>With traffic…</text>
    • <image placement=“inline” src=“map.png” />
    • </binding>
    • </visual>
    • <actions>
    • <input title=“Snooze for” id="snoozeTime" type="selections" defaultSelection=“5">
    • <selection id="5" content="5 minutes" />
    • <selection id="10" content="10 minutes" />
    • <selection id="20" content="20 minutes" />
    • </input>
    • <action activationType="system" arguments="snooze" hint-inputId="snoozeTime" content=""/>
    • <action activationType="system" arguments="dismiss" content=""/>
    • </actions>
    • </toast>
    • Content adapts with the toastThe new adaptive toast template works similarly to universal app patterns by allowing your content to adapt depending on the toast’s size and state. As you design your toasts it is important to keep in mind how you want your content to adapt to the toasts size.
    • Adaptive Toast Template
  33. More interactivity!

    Slide 33 - More interactivity!

    • XML SAMPLE 3
    • <toast>
    • <visual>
    • <binding template=“ToastGeneric”>
    • <text>Torrance Shum</text>
    • <text>This is…</text>
    • <image placement=“appLogoOverride” src=“Torrance.png” />
    • </binding>
    • </visual>
    • <actions>
    • <input id=“1" type=“text“ />
    • <action activationType=“background" arguments=“quickReply" hint-inputId=“1" content="" imageUri=“send.png” />
    • </actions>
    • </toast>
    • Content adapts with the toastThe new adaptive toast template works similarly to universal app patterns by allowing your content to adapt depending on the toast’s size and state. As you design your toasts it is important to keep in mind how you want your content to adapt to the toasts size.
    • Adaptive Toast Template
  34. Collapsed StateWhen the system has limited visual affordance to display the full notification, the notifications are displayed in “Collapsed State”

    Slide 34 - Collapsed StateWhen the system has limited visual affordance to display the full notification, the notifications are displayed in “Collapsed State”

    • Notifications inside action centers on Mobile and Desktop are always in collapsed state by default for users to easily triage through them.
    • On Windows Mobile, a toast always shows up collapsed when it pops up, so it doesn’t affect user’s current task in an intrusive way. The exceptions are made for special scenarios like alarm, reminder, and incoming call.
    • Expanded StateA collapsed notification can always be expanded by the user to unveil more contents and available actions and interactivities, no matter it is a toast notification banner, or an entry inside action center.
    • On Windows Desktop, a toast is always pre-expanded when it pops up, since there is enough screen real estate to show the full toast.
    • Adaptive Toast States
  35. Alarm

    Slide 35 - Alarm

    • <toast scenario=“alarm”...>
    • Reminder
    • <toast scenario=“reminder”...>
    • Incoming Call
    • <toast scenario=“incomingCall”...>
    • Adaptive Toast Scenarios
  36. Foreground activation

    Slide 36 - Foreground activation

    • Background activation
    • Adaptive Toast Activation and Launch Types
    • Tap button
    • Task launches
    • Retrieve
    • Args
    • Take actions
    • Tap button
    • App launches
    • Retrieve
    • Args
    • Take actions
  37. Adaptive Toast Activation and Launch Types

    Slide 37 - Adaptive Toast Activation and Launch Types

    • Protocol
    • System
    • Tap button
    • System handles action
    • Tap button
    • Protocol activates
    • Web/App
  38. When does this trigger fire?

    Slide 38 - When does this trigger fire?

    • This trigger fires when any notification previously sent by your app has a state change
    • Dismissed by user, expired by the OS, etc.
    • What should I use it for?
    • Keep tile, badge, and action center in sync;
    • Talk back to your server to handle stale notifications on other clients;
    • More;
    • How do I do it?
    • Toast Notification History Changed Trigger
  39. Adaptive and Interactive Toasts Demo

    Slide 39 - Adaptive and Interactive Toasts Demo

  40. Windows.UI.Notifications.ToastNotificationHistoryToastNotificationManagerToastNotifier

    Slide 40 - Windows.UI.Notifications.ToastNotificationHistoryToastNotificationManagerToastNotifier

  41. Win32: Adaptive and Interactive Toasts!

    Slide 41 - Win32: Adaptive and Interactive Toasts!

  42. What we delivered:

    Slide 42 - What we delivered:

    • Windows Apps and OneCore
    • UI refresh and convergence everywhere
    • Action Center in Windows
    • Adaptive Tiles and Toasts
    • Interactive Toasts
    • Session Objectives And Takeaways
    • Windows Apps
    • UI Updates
    • Notification Center
    • Flexibility != More Templates
    • More Powerful Notifications