Vývoj pre Windows 10 – Dynamické dlaždice II / 12. časť

Späť na úvod >> Späť na programovanie >> Späť na seriál

V predchádzajúcej časti seriálu sme preberali dynamické dlaždice UWP aplikácií pre Windows 10 z hľadiska funkcionality, teda možností zobrazovania informácií aj keď aplikácia nie je spustená a následne z pohľadu dizajnéra. V tomto pokračovaní sa zameriame na dynamické dlaždice z pohľadu vývojára, napríklad ako na dlaždici rotovať kolekciu obrázkov, alebo čo je ešte zaujímavejšie, ako na ploche dlaždice vypísať oznam v prípade ak je aplikácia neaktívna. Ukážeme ako tieto funkcie realizovať prostriedkami operačného systému a ako cez cloudovú službu. Vývojár musí samozrejme počítať aj s tým, že na rôznu veľkosť dlaždice a tento parameter je na ľubovôli používateľa sa zmestí rôzne množstvo informácií.

Aktualizácia informácií na dlaždici

Obsah dlaždice je možné meniť lokálne, kedy aplikácia vytvorí frontu, kde je definované, čo sa má na dlaždici objavovať, prípadne aké obrázky majú na dlaždici rotovať, prípadne môžete meniť obsah dynamickej dlaždice z cloudu. Dlaždica je definovaná v aplikačnom manifeste. V šablóne je prednastavená statická dlaždica, biele zubaté slniečko na čiernom pozadí. Pre oživenie dlaždice slúžia aj ikonky stavu (badge). Zobrazujú sa rohoch dynamickej dlaždice.

Po vytvorení projektu UWP aplikácie, v ktorej chcete využívať informácie na dynamických dlaždiciach je potrebné v zložke References pridať do projektu balíček NotificationsExtensions.Win10. Nie je to produkt tretej strany, ale oficiálna knižnica pre notifikácie v UWP aplikáciách od Microsoftu a umožňuje generovať notifikácie na dlaždiciach, toastové notifikácie a takzvané badge notifikácie pomocou pomocou ikoniek na dlaždiciach. Na dynamických dlaždiciach môžete prostredníctvom badge notifikácie zobraziť číslo, ktoré vyjadruje počet relevantných entít, alebo udalostí, napríklad počet prijatých správ a podobne. K dispozícii je aj niekoľko desiatok ikoniek  Dôležité je, že tieto ikonky prekrývajú prípadný obrázok na dlaždici a teda sú vždy čitateľné.

Pridanie NuGet balíčka NotificationsExtensions.Win10

Odporúčame nainštalovať si aplikáciu Notifications Visualizer. Je to UWP aplikácia, ktorú nájdete vo Windows obchode https://www.microsoft.com/sk-sk/store/apps/notifications-visualizer/9nblggh5xsl1 Ako vyplýva z názvu, aplikácia vám umožní vizualizovať vaše návrhy notifikácií, takže si ich môžete overiť jednoduchšie, rýchlejšie a interaktívnejšie v tejto testovacej aplikácii, než metódou pokus-omyl vo vlastnej aplikácii. Pre ilustráciu možností aplikácie ukážeme tri obrázky. XML kód návrhu dlaždíc týchto ukážok neuvádzame, môžete si ho skopírovať z aplikácie Notifications Visualizer a prípadne prispôsobiť pre kód svojej aplikácie.

Aplikácia Notifications Visualizer: Notifikácia na dlaždici o mailovej správe

Aplikácia Notifications Visualizer: Notifikácia na dlaždici o počasí

Aplikácia Notifications Visualizer: Notifikácia na dlaždici z hry

XML dokument pre aktualizáciu obsahu dynamickej dlaždice bude

<tile>   <visual>     <binding template="TileMedium">       ...     </binding>     <binding template="TileWide">       <text hint-style="subtitle">Jennifer Parker</text>       <text hint-style="captionSubtle">Photos from our trip</text>       <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>     </binding>     <binding template="TileLarge">       ...     </binding>   </visual> </tile>

 

 

Príklad dlaždice

Testovacia aplikácia

Dlaždice sa aktualizujú pomocou preddefinovaných šablón, ktoré ponúkajú bohaté grafické možnosti. Ukážeme to na príklade jednoduchej aplikácie, ktorá bude mať len jediné tlačidlo na spustenie požadovanej činnosti. Vytvorte projekt UWP aplikácie. V XAML kóde na stránke MainPage.xaml je definovaný jediný ovládací prvok – tlačidlo:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">     <Button Content="Aktualizuj dlaždicu"             HorizontalAlignment="Left" Margin="185,210,0,0"             VerticalAlignment="Top" Height="100" Width="300"                  Click="Button_Click_1"/> </Grid>

Do súboru MainPage.xaml.cs pridajte odkazy na menné priestory

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;
using NotificationsExtensions.Tiles;

V obsluhe udalosti zatlačenia tlačidla bude kód:

private void Button_Click_1(object sender, RoutedEventArgs e)         {             // simulácia údajov reálnej aplikácie             string from = "PC REVUE";             string subject = "Novinka dňa";             string body = "Skúšobná prevádzka Hyperloop Bratislava Košice!";               // obsah dlaždice             TileContent content = new TileContent()             {                 Visual = new TileVisual()                 {                     TileMedium = new TileBinding()                     {                         Content = new TileBindingContentAdaptive()                         {                             Children =                 {                     new TileText()                     {                         Text = from                     },                     new TileText()                     {                         Text = subject,                         Style = TileTextStyle.CaptionSubtle                     },                     new TileText()                     {                         Text = body,                         Style = TileTextStyle.CaptionSubtle                     }                 }                         }                     },                     TileWide = new TileBinding()                     {                         Content = new TileBindingContentAdaptive()                         {                             Children =                 {                     new TileText()                     {                         Text = from,                         Style = TileTextStyle.Subtitle                     },                     new TileText()                     {                         Text = subject,                         Style = TileTextStyle.CaptionSubtle                     },                     new TileText()                     {                         Text = body,                         Style = TileTextStyle.CaptionSubtle                     }                 }                         }                     }                 }             };             // vytvorenie notifikácie             var notification = new TileNotification(content.GetXml());             // odoslanie notifikácie na dlaždicu             TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);         }

 

Po zatlačení tlačidla môžete na domovskej obrazovke sledovať, ako sa zmení text dlaždici

Notifikácia na dlaždici

Zobrazit Galériu