Windows 10 UWP App Development ebook

1
Windows 10
Universal Windows Platform (UWP)
I. CONTROLES..............................................................................................................................................3
1. RELATIVEPANEL.............................................................................................................................................. 3
2. SPLITVIEW..................................................................................................................................................... 5
a. SplitView de base et Adaptive Triggers ................................................................................................. 5
b. Bouton Rechercher et AutoSuggestBox dans SplitView......................................................................... 8
c. « Page Header » : Contrôle utilisateur « Barre de titre » avec marge adaptable selon le mode
d’affichage du SplitView............................................................................................................................... 10
3. NAVIGATION MODEL...................................................................................................................................... 13
4. BACKBUTTON............................................................................................................................................... 16
5. COMMANDBAR, SYMBOLICON, ….................................................................................................................... 17
6. MEDIA ELEMENT ET CUSTOM MEDIA TRANSPORT CONTROLS ................................................................................. 20
7. CONTENT DIALOG ......................................................................................................................................... 21
8. AUTOSUGGESTBOX (« REMPLAÇANT DE SEARCHBOX »)....................................................................................... 22
9. POPUP........................................................................................................................................................ 23
10. EXTENDED SPASHSCREEN........................................................................................................................... 23
11. VARIABLESIZEDWRAPGRID......................................................................................................................... 25
II. ACCENT ET THEME (DARK, LIGHT).......................................................................................................... 27
DÉFINIR SON PROPRE THÈME.................................................................................................................................... 27
III. DESIGN TIME.......................................................................................................................................... 28
IV. DATATEMPLATESELECTOR ................................................................................................................. 29
 DERNIER ELEMENT « AFFICHER PLUS » POUR LISTVIEW OU GRIDVIEW.................................................................... 31
V. HEADERGROUP...................................................................................................................................... 34
DATATEMPLATES ........................................................................................................................................... 36
POUR LISTVIEW..................................................................................................................................................... 36
POUR GRIDVIEW ................................................................................................................................................... 38
VI. ADAPTIVE UI...................................................................................................................................... 40
1. ADAPTIVE TRIGGERS...................................................................................................................................... 41
2. MASTER DETAILS................................................................................................................................................ 43
3. CUSTOM ADAPTIVE TRIGGERS .......................................................................................................................... 45
4. DEVICEFAMILY ............................................................................................................................................. 48
5. ASTUCE : REACTIVER LES ANIMATIONS, TRANSITIONS WINDOWS ............................................................................ 48
VII. X :BIND « COMPILED BINDING »........................................................................................................ 49
1. BINDING DE COLLECTION ................................................................................................................................ 49
2. AVEC DATATEMPLATE.................................................................................................................................... 50
3. AVEC DICTIONNAIRE DE RESSOURCES (RESOURCEDICTIONARY)............................................................................... 50
4. « RELATIVESOURCE » ET « ELEMENTNAME » … LIER AU NOM DE L’ELEMENT........................................................... 51
5. « SOURCE » ET « DATACONTEXT ».. AJOUTER UNE PROPRIETE DU VIEWMODEL DANS LE CODE-BEHIND ....................... 51
6. BINDING EVENTS .......................................................................................................................................... 52
7. DEFER LOADING............................................................................................................................................ 53

2
VIII. APPLICATION LIFECYCLE..................................................................................................................... 53
1. HISTORIQUE DE NAVIGATION (« APP ») ............................................................................................................ 54
2. ETATS DE LA PAGE ET DONNEES........................................................................................................................ 54
IX. TILES, TOASTS ........................................................................................................................................ 56
TILE .................................................................................................................................................................... 56
Adaptive Tiles ............................................................................................................................................... 59
TOAST ................................................................................................................................................................. 60
Adaptive toast .............................................................................................................................................. 60
Documentation, exemples (page de tous les exemples de codes)
Modèles d’application (Visual Studio 2015)
Avec Windows 10, le modèle d’application universelle permet de créer à partir d’un seul projet une
application pour le Windows Store (PC, tablettes et ordinateurs portables) et une application pour le
Windows Phone Store.
Modèle « Universel » Windows 10 (UWP)
Modèles d’applications Windows, Windows Phone et
« Universel » (avec projet « Shared ») Windows 8
Modèle « Universel Windows 8 » :
3 projets (un projet Windows Store,
un Windows Phone et un « Shared »)
Modèle « Universel Windows 10 »
(UWP) : 1 seul projet

3
I. Contrôles
Liste des contrôles et exemples
Voir l’exemple « XamlUIBasics »
1. RelativePanel
Permet de positionner les éléments les uns par rapport aux autres et de gérer le repositionnement
des éléments avec des AdaptiveTriggers.
Propriétés de placement
Placement par rapport à un élément
 Above : Au-dessus de l’élément
 Below : En-dessous de l’élément
 LeftOf : A gauche de l’élément
 RightOf : A droite de l’élément
Plus
 AlignHorizontalCenterWith
 AlignVerticalCenterWith
 AlignBottomWith
 AlignTopWith
 AlignLeftWith
 AlignRightWith
Exemple
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Rectangle x:Name="rectangle1" Fill="Red" Width="300" Height="150" />
<Rectangle x:Name="rectangle2" Fill="Blue" RelativePanel.RightOf="rectangle1" Width="300"
Height="150" />
<Rectangle x:Name="rectangle3" Fill="Green" RelativePanel.Below="rectangle2"
RelativePanel.AlignHorizontalCenterWith="rectangle2" Width="300" Height="150" />
</RelativePanel>
Rectangle bleu placé à droite du
rectangle rouge
Rectangle vert placé en-dessous du
rectangle bleu (Below) et aligné avec
celui-ci (AlignHorizontalCenterWith)

4
Placement par rapport au RelativePanel
 AlignTopWithPanel : En haut (à gauche si pas précisé) du RelativePanel
 AlignBottomWithPanel : En bas (et à gauche si pas précisé) du RelativePanel
 AlignLeftWithPanel : A gauche (et en haut si pas précisé) du RelativePanel
 AlignRightWithPanel : A droite (et en haut si pas précisé) du RelativePanel
Plus pour centrer horizontalement et verticalement un élément par rapport au RelativePanel
 AlignHorizontalCenterWithPanel
 AlignVerticalCenterWithPanel
<Rectangle x:Name="rectangle1" Fill="Red" Width="300" Height="150" />
<Rectangle x:Name="rectangle2" RelativePanel.AlignRightWithPanel="True" Fill="Blue"
Width="300" Height="150" />
<Rectangle x:Name="rectangle3" Fill="Green" RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignRightWithPanel="True" Width="300" Height="150" />
</RelativePanel>
Rectangle bleu placé à droite du
RelativePanel (AlignRightWithPanel)
Par défaut les éléments sont placés
à gauche en haut du RelativePanel
Rectangle vert placé à droite
(AlignRightWithPanel) et en bas
(AlignBottomWithPanel)du RelativePanel

5
2. SplitView
a. SplitView de base et Adaptive Triggers
Exemple
DisplayMode
- Overlay : par-dessus le contenu quand ouvert et caché fermé
- CompactOverlay : par-dessus le contenu quand ouvert et avec une barre quand fermé
- Inline : ancré ouvert, caché fermé
- CompactInline : ancré ouvert et avec une barre quand fermé
<SplitView>
<SplitView.Pane>

</SplitView.Pane>
<SplitView.Content>

</SplitView.Content>
</SplitView>
De 720 à 1024,
« CompactInline » et
panel fermé
Les « Adaptive Triggers »
permettent de basculer le mode
d’affichage du splitview selon la
taille de la page.
Plus de1024 « CompactInline »,
panel ouvert
En-dessous 720, Mode
d’affichage « Overlay »
Le bouton hamburger permet en
plus d’ouvrir, fermer le panel. Il est
placé en dehors du splitview pour ne
pas être caché quand le panel est
fermé en mode « Overlay »

6
SplitView
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="VisualStateMin0">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="splitView.DisplayMode" Value="Overlay"/>
<Setter Target="splitView.IsPaneOpen" Value="False"/>
</VisualState.Setters>
</VisualState>
<Setter Target="splitView.DisplayMode" Value="CompactInline"/>
<Setter Target="splitView.IsPaneOpen" Value="False"/>
</VisualState>
<Setter Target="splitView.DisplayMode" Value="CompactInline"/>
<Setter Target="splitView.IsPaneOpen" Value="True"/>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView x:Name="splitView"
DisplayMode="CompactInline"
IsPaneOpen="True"
OpenPaneLength="320">
<SplitView.Pane>
<ListView Margin="0,48,0,0"
VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.MenuItems}"
ItemTemplate="{StaticResource MenuItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"/>
</SplitView.Pane>
<SplitView.Content>
<Frame x:Name="mainFrame"></Frame>
</SplitView>
<Button Name="splitViewButton" Style="{StaticResource Square48x48ButtonStyle}"
VerticalAlignment="Top" Click="splitViewButton_Click">
<FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Glyph="≡" FontSize="32" Margin="0,-8,0,0"/>
</Button>
</Grid>
On peut définir ce que l’on veut en contenu .De
plus on peut omettre « SplitView.Content »
Bouton hamburger
placé en dernier
Marge de 48 par rapport au top
pour laisser la place au bouton
hamburger
Adaptive Triggers, on
change le mode
d’affichage du splitview
selon la taille de la page

7
Template
<DataTemplate x:Key="MenuItemTemplate" x:DataType="local:MenuItem">
<StackPanel Orientation="Horizontal" Margin="2,0,0,0">
<SymbolIcon Symbol="{x:Bind Symbol}"/>
<TextBlock Text="{x:Bind Title}" Margin="24,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
Code-behind
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
ViewModel = new MainPageViewModel();
}
public MainPageViewModel ViewModel { get; set; }
private void splitViewButton_Click(object sender, RoutedEventArgs e)
{
splitView.IsPaneOpen = !splitView.IsPaneOpen;
}
}
Classe utilisée pour le menu
public class MenuItem
{
public Symbol Symbol { get; set; }
public string Title { get; set; }
public MenuItem(string title, Symbol symbol)
{
Title = title;
Symbol = symbol;
}
}
On remplit la collection
public class MainPageViewModel
{
public ObservableCollection<MenuItem> MenuItems { get; set; }
public MainPageViewModel()
{
MenuItems = new ObservableCollection<MenuItem>();
MenuItems.Add(new MenuItem("Accueil", Symbol.Home));
MenuItems.Add(new MenuItem("Vidéos", Symbol.Video));
MenuItems.Add(new MenuItem("Musiques", Symbol.Audio));
}
}

8
b. Bouton Rechercher et AutoSuggestBox dans SplitView
<SplitView x:Name="splitView"
DisplayMode="CompactInline"
IsPaneOpen="True"
OpenPaneLength="320">
<SplitView.Pane>
<StackPanel Margin="0,48,0,0">
<Grid Height="48">
<AutoSuggestBox x:Name="autoSuggestBox"
Margin="12,0"
PlaceholderText="Rechercher"
VerticalAlignment="Center"
QueryIcon="Find"
Visibility="{Binding IsPaneOpen, Converter={StaticResource
BooleanToVisibilityConverter}, ElementName=splitView}" />
<Button x:Name="searchButton"
Style="{StaticResource Square48x48ButtonStyle}"
Visibility="{Binding IsPaneOpen, Converter={StaticResource
BooleanToCollapsedConverter}, ElementName=splitView}"
Click="searchButton_Click">
<SymbolIcon Symbol="Find" />
</Button>
</Grid>
<ListView ItemsSource="{x:Bind ViewModel.MenuItems}"
IsItemClickEnabled="True"/>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Frame x:Name="mainFrame"></Frame>
</SplitView>
Il suffit en plus de permettre au clic sur le bouton rechercher d’ouvrir le panel
private void searchButton_Click(object sender, RoutedEventArgs e)
{
splitView.IsPaneOpen = true;
}
Style du bouton
On lie la visibilité de
l’AutoSuggestBox et du bouton
rechercher à SplitView
IsPaneOpen et on utilise des
converters
AutoSuggestBox quand le
panel est ouvert
Bouton quand le panel est
fermé
On fait en sorte que chaque
élément fasse 48px de haut

9
<Style x:Key="Square48x48ButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
<Setter Property="Height" Value="48" />
<Setter Property="Width" Value="48" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightListLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
Storyboard.TargetProperty="Foreground">
Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<ContentPresenter x:Name="Content"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Bouton 48x48 avec
contenu centré

10
c. « Page Header » : Contrôle utilisateur « Barre de titre » avec marge adaptable selon le
mode d’affichage du SplitView
Création d’un UserControl « PageHeader » qui pourra être glissé sur chaque page de contenu
(affichée dans la zone de contenu du SplitView) . On pourra personnaliser le contenu de cette barre
de titre pour chaque page, mais surtout permettra de gérer la marge entre le titre et le bouton
hamburger du splitview. En effet, en mode d’affichage Overlay, le titre (s’il est aligné à gauche) et le
bouton hamburger risqueraient de se chevaucher, il faut donc gérer la marge.
<UserControl
x:Class="UWPNavigationDemo.Controls.PageHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWPNavigationDemo.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="48"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<Grid x:Name="titleBar">
<ContentPresenter x:Name="content"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
Margin="{x:Bind Padding}"
Content="{x:Bind HeaderContent}"/>
</Grid>
</Grid>
</UserControl>
Code-behind du contrôle
public sealed partial class PageHeader : UserControl
{
public PageHeader()
{
EasyMessenger.Default.Subscribe<bool>("SplitView-DisplayMode-Overlay", (isOverlay)=> {
if (isOverlay)
{
this.titleBar.Margin = new Thickness(overlayMargin, 0, 0, 0);
}
else
{
this.titleBar.Margin = new Thickness(defaultMargin, 0, 0, 0);
}
});
}
private const int defaultMargin = 12;
private const int overlayMargin = 48;
public UIElement HeaderContent
{
get { return (UIElement)GetValue(HeaderContentProperty); }
set { SetValue(HeaderContentProperty, value); }
}
public static readonly DependencyProperty HeaderContentProperty =
DependencyProperty.Register("HeaderContent", typeof(UIElement), typeof(PageHeader), new
PropertyMetadata(DependencyProperty.UnsetValue));
}
Hauteur de 48 pour être aligné avec
le bouton hamburger
J’utilise un Messenger pour m’abonner au changement
de « DisplayMode » du SplitView. SI le DisplayMode est
« Overlay » . Je mets une grosse marge (48px) pour que
le bouton hamburger et le titre ne se chevauchent pas
Dependency Property
permettant de personnaliser le
contenu du contrôle selon
chaque page

11
Voir l’exemple XamlNavigation, qui n’utilise pas tout à fait la même méthode, mais il m’a
semblé observer quelques soucis
Dans le code-behind de MainPage
{
public MainPage()
{
SizeChanged += (s, e) =>
{
CheckDisplayMode();
};
mainFrame.Navigated += (s, e) =>
{
CheckDisplayMode();
};
// navigation
mainFrame.Navigate(typeof(PageOne));
}
private void CheckDisplayMode()
{
var displayMode = splitView.DisplayMode;
if (displayMode == SplitViewDisplayMode.Overlay)
{
// messenger
EasyMessenger.Default.Publish("SplitView-DisplayMode-Overlay", true);
}
else
{
EasyMessenger.Default.Publish("SplitView-DisplayMode-Overlay", false);
}
}
// etc.
}
PageOne
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Controls:PageHeader HorizontalAlignment="Left">
<Controls:PageHeader.HeaderContent>
<TextBlock Text="Titre de la page" Style="{StaticResource TitleTextBlockStyle}" />
</Controls:PageHeader.HeaderContent>
</Controls:PageHeader>
<Grid Background="#ccc" Grid.Row="1">
</Grid>
</Grid>
Abonnement au changement de taille de la page
et en fin de navigation de la frame
« mainFrame ».
On vérifie le mode d’affichage du SPlitView et
notifie par Messenger
Utilisation du contrôle, ajout
d’un simple TextBlock avec un
titre aligné à gauche

12
Marge de 12 en « CompactInline »
(panel ouvert et fermé)
Marge de 48 en mode « Overlay » pour éviter que
le titre et le bouton hamburger se chevauchent

13
3. Navigation model
Documentation
Voir l’exemple XamlNavigation
La navigation doit se faire dans deux sens. La barre de navigation doit être « synchronisée »
(navigation retour) avec les pages affichées.
{
public MainPage()
{
var MenuItems = new ObservableCollection<MenuItem>();
MenuItems.Add(new MenuItem("HomePage", "Accueil", Symbol.Home));
MenuItems.Add(new MenuItem("VideosPage", "Vidéos", Symbol.Video)) ;
MenuItems.Add(new MenuItem("MusicsPage", "Musiques", Symbol.Audio));
menusListView.ItemsSource = MenuItems;
mainFrame.Navigated += (s, e) =>
{
// affiche le bouton
if (mainFrame.CanGoBack)
{
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
AppViewBackButtonVisibility.Visible;
}
else
{
AppViewBackButtonVisibility.Collapsed;
}
// sélectionne le menu correspondant à la page
if (e.NavigationMode == NavigationMode.Back)
{
string pageName = e.SourcePageType.Name;
foreach (var item in menusListView.Items)
{
var menu = item as MenuItem;
if (menu.Id == pageName)
{
menusListView.SelectedItem = item;
return;
}
}
}
};
// Gère la navigation retour
SystemNavigationManager.GetForCurrentView().BackRequested += (s, a) =>
{
if (mainFrame.CanGoBack)
{
mainFrame.GoBack();
a.Handled = true;
}
};
}
Navigation « Retour »

14
private void ListView_ItemClick(object sender, ItemClickEventArgs e)
{
var menu = e.ClickedItem as MenuItem;
if (menu.Id == "HomePage")
{
mainFrame.Navigate(typeof(HomePage));
}
if (menu.Id == "VideosPage")
{
mainFrame.Navigate(typeof(VideosPage));
}
if (menu.Id == "MusicsPage")
{
mainFrame.Navigate(typeof(MusicsPage));
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// navigation
mainFrame.Navigate(typeof(HomePage));
menusListView.SelectedIndex = 0;
}
}
public class MenuItem
{
public string Id { get; set; }
public Symbol Symbol { get; set; }
public MenuItem(string id,string title, Symbol symbol)
{
Id = id;
Title = title;
Symbol = symbol;
}
}
La ListView modifiée en sélection « Single »
<ListView x:Name="menusListView"
SelectionMode="Single"
IsItemClickEnabled="True"
ItemClick="ListView_ItemClick"/>
Navigation « Aller »
Ajout d’un paramètre « Id »
permettant de retrouver la page
correspondante au menu

15
Navigation « Aller »
Navigation « Retour », après avoir cliqué sur le bouton retour de la barre de titre, le menu est
sélectionné et synchronisé par rapport à la page affichée.
Il faut garder en tête ici que c’est un scénario simple. On pourrait par exemple imaginer créer un
paramètre spécifique à la navigation avec des propriétés permettant de mieux gérer celle-ci
(exemple la page doit elle être prise en compte dans la navigation par la barre de menus?)
On peut également observer Template10, qui crée un contrôle « HamburgerMenu ».

16
4. BackButton
Voir l’exemple BackButton
Affichage d’un bouton dans la barre de titre (Desktop)
Dans « App » pour « rootFrame » (ou dans le code de la page pour une Frame particulière)
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
// etc.
Window.Current.Activate();
// Affiche ou masque le bouton retour de la barre de titre
rootFrame.Navigated += (s, a) =>
{
if (rootFrame.CanGoBack)
{
AppViewBackButtonVisibility.Visible;
}
else
{
AppViewBackButtonVisibility.Collapsed;
}
};
// Gère la navigation retour
SystemNavigationManager.GetForCurrentView().BackRequested += (s, a) =>
{
if (rootFrame.CanGoBack)
{
rootFrame.GoBack();
a.Handled = true;
}
};
}
Page d’accueil
Navigation vers une autre page, le bouton retour apparait
dans la barre de titre. La couleur correspond à l’accent
sélectionné des paramètres de personnalisation de
Windows 10

17
5. CommandBar, SymbolIcon, …
Voir l’exemple XamlCommanding et XamlUIBasics
CommandBar
<CommandBar>
<CommandBar.Content>
<TextBlock Text="Titre" />
</CommandBar.Content>
<AppBarButton Icon="Like" Label="Like" />


<AppBarSeparator/>

<AppBarButton Icon="OpenWith" Label="Show Flyout">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Option 1"/>
<MenuFlyoutItem Text="Option 2"/>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>

<AppBarToggleButton Icon="Contact" Label="Contact" IsChecked="True"/>

<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings"/>
</CommandBar.SecondaryCommands>
</CommandBar>
Menu Flyout (apparait au-dessus ou en dessous la barre selon l’espace disponible)
On peut définir « IsOpen » pour
afficher ou non les labels
Les commandes secondaires et labels apparaissent
quand on clique sur le bouton « … »
« Content » à gauche
de la barre
Commandes « primaires »
placées à droite de la barre
Commandes « secondaires »
placées dans menu ouvert
avec le bouton « … »

18
« IconElement » (SymbolIcon, FontIcon, ou PathIcon)
<AppBarButton Icon="Like" Label="Like" />
SymbolIcon Liste des symboles disponibles
<AppBarButton Label="Dislike">
<AppBarButton.Icon>
<SymbolIcon Symbol="Dislike" Foreground="Red"/>
</AppBarButton.Icon>
</AppBarButton>
FontIcon permet de définir un symbole qui n’est pas inclus dans SymbolIcon (on peut s’aider avec la
« table des caractères »
<AppBarButton Label="FontIcon">
<AppBarButton.Icon>
<FontIcon FontFamily="Candara" Glyph="Σ"/>
</AppBarButton>
PathIcon
<AppBarButton Label="PathIcon">
<AppBarButton.Icon>
<PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"
HorizontalAlignment="Center"/>
</AppBarButton>
BitmapIcon
<AppBarButton Label="BitmapIcon">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/YouTube.png" />
</AppBarButton>
Custom
<AppBarButton Label="Custom" HorizontalContentAlignment="Center">
<Grid Width="48" Height="48" Margin="0,-8,0,-4">
<SymbolIcon Symbol="Memo"/>
<TextBlock Text="2" Margin="0,2,0,0" Style="{StaticResource
CaptionTextBlockStyle}" HorizontalAlignment="Center"/>
</Grid>
</AppBarButton>

19
Top et bottom AppBar
(Peuvent être ajoutées rapidement depuis le panneau « Structure du document »)
<Page.TopAppBar>
<CommandBar x:Name="topBar" ClosedDisplayMode="Compact">
<CommandBar.Content>
<StackPanel Orientation="Horizontal">
<AppBarButton Icon="Home" />

</StackPanel>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="Valider"/>

</CommandBar>
</Page.TopAppBar>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Accept" Label="Valider"/>

</CommandBar>
</Page.BottomAppBar>
On peut changer le mode d’affichage :
- Compact (par défaut)
- Minimal (n’affiche plus que le bouton « … » permettant d’afficher les éléments de la barre)
- Hidden la barre est complètement cachée.
TopAppBar
BottomAppBar

20
6. Media Element et Custom media transport controls
Documentation
Source
<MediaElement x:Name="mediaElement"
Source="/Assets/dhany.mp4"
AreTransportControlsEnabled="True" />
SetSource
<MediaElement x:Name="mediaElement" AreTransportControlsEnabled="True" />
Ouverture d’une boite de dialogue
private async void button_Click(object sender, RoutedEventArgs e)
{
var picker = new FileOpenPicker();
picker.FileTypeFilter.Add(".wmv");
picker.FileTypeFilter.Add(".mp4");
picker.FileTypeFilter.Add(".mp3");
picker.FileTypeFilter.Add(".wma");
picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
var file = await picker.PickSingleFileAsync();
if (file != null)
{
IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
mediaElement.SetSource(stream, file.ContentType);
}
}
Il est possible de customiser les contrôles, en ajouter (un bouton like en plus par exemple)
Voir l’exemple XamlCustomMediaTransportControls

21
7. Content Dialog
Menu « Ajouter » … « Nouvel élément » … « Boite de dialogue de contenu »
Desktop Mobile
Exemple de « ContentDialog »
<ContentDialog
x:Class="UWPContentDialogDemo.MyContentDialog"
xmlns:local="using:UWPContentDialogDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Ecrire une note"
PrimaryButtonText="Envoyer"
SecondaryButtonText="Annuler"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
<StackPanel>
<TextBox Header="Titre"></TextBox>
<TextBox TextWrapping="Wrap" AcceptsReturn="True" Header="Contenu" Height="100"></TextBox>
</StackPanel>
</ContentDialog>
Afficher la boite de dialogue et gérer le résultat
private async void Button_Click(object sender, RoutedEventArgs e)
{
var dialog = new MyContentDialog();
var dialogResult = await dialog.ShowAsync();
if(dialogResult == ContentDialogResult.Primary)
{
}
else if (dialogResult == ContentDialogResult.Secondary)
{ }
}
La boite de dialogue s’adapte
selon la taille de la page.
Par défaut la boite occupe toute la
page mais on peut la
redimensionner depuis le designer
Contenu
Titre et boutons de la
boite de dialogue

22
8. AutoSuggestBox (« remplaçant de SearchBox »)
Voir les exemples XamlUIBasics et XamlAutoSuggestBox
<AutoSuggestBox x:Name="autoSuggestBox"
Margin="0,8,12,0"
Width="270"
PlaceholderText="Entrer le nom d'une ville Française"
QueryIcon="Find"
TextChanged="autoSuggestBox_TextChanged"
SuggestionChosen="autoSuggestBox_SuggestionChosen"
QuerySubmitted="autoSuggestBox_QuerySubmitted"
RelativePanel.AlignRightWithPanel="True" />
private void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
{
var suggestions = GetSuggestions(sender.Text);
sender.ItemsSource = suggestions;
}
}
private void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs
args)
{
var selectedItem = args.SelectedItem.ToString();
suggestionChosenTextBlock.Text = "Suggestion choisie : " + selectedItem;
}
private void autoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs
args)
{
if (args.ChosenSuggestion != null) { }
else if (!string.IsNullOrEmpty(args.QueryText)){ }
}
private List<string> GetSuggestions(string query)
{
var suggestions = cities.FindAll(c => c.ToLower().StartsWith(query.ToLower()));
return suggestions;
}
On change la liste des
suggestions selon le texte
saisi
Déclenché lorsque l’utilisateur sélectionne une suggestion de la liste proposée

23
private List<string> cities = new List<string>
{
"Lyon",
"Marseille",
"Nantes",
"Nice",
"Strasbourg",
"Toulouse",
"Paris"
};
9. Popup
Exemple popup « chargement » affichée pendant le chargement des données
<Popup IsOpen="{Binding IsBusy}" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid Background="{ThemeResource ContentDialogBorderThemeBrush}" Height="100" Width="200">
<Grid.RenderTransform>
<TranslateTransform X="-100" Y="-50" />
</Grid.RenderTransform>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<ProgressRing VerticalAlignment="Center" IsActive="True"
Foreground="{ThemeResource ContentDialogDimmingThemeBrush}" />
<TextBlock x:Uid="loadingTextBlock" Foreground="{ThemeResource ContentDialogDimmingThemeBrush}"
Text="Loading" FontSize="22" FontWeight="Light" Margin="12,0,0,0" />
</StackPanel>
</Grid>
</Popup>
10.Extended SpashScreen
Ajout dans la méthode « OnLaunched » de « App »
if (e.PreviousExecutionState != ApplicationExecutionState.Running)
{
bool loadState = (e.PreviousExecutionState == ApplicationExecutionState.Terminated);
var splash = new ExtendedSplash(e.SplashScreen, loadState);
rootFrame.Content = splash;
Window.Current.Content = rootFrame;
}
Création d’une page avec image et progress ring.
<Grid Background="#D03133" >
<RowDefinition/>
<RowDefinition Height="180"/>
<Canvas Grid.RowSpan="2">
<Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
</Canvas>
<ProgressRing IsActive="True"
Grid.Row="1" Width="80" Height="80" Foreground="White" HorizontalAlignment="Center" />
</Grid>
Place correctement au centre de la page

24
La taille de l’image et les éléments sont repositionnés selon la taille de la page
public sealed partial class ExtendedSplash
{
internal Rect splashImageRect;
private SplashScreen splash;
private double ScaleFactor;
public ExtendedSplash(SplashScreen splashscreen, bool loadState)
{
InitializeComponent();
Window.Current.SizeChanged += new WindowSizeChangedEventHandler(OnResize);
ScaleFactor = (double)DisplayInformation.GetForCurrentView().ResolutionScale / 100;
splash = splashscreen;
if (splash != null)
{
splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(OnDismissed);
splashImageRect = splash.ImageLocation;
PositionImage();
}
}
private void PositionImage()
{
extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.Left);
extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Top);
extendedSplashImage.Height = splashImageRect.Height / ScaleFactor;
extendedSplashImage.Width = splashImageRect.Width / ScaleFactor;
}
private void OnResize(Object sender, WindowSizeChangedEventArgs e)
{
if (splash != null)
{
splashImageRect = splash.ImageLocation;
PositionImage();
}
}
private async void OnDismissed(SplashScreen sender, object e)
{
// on peut effectuer un chargement, essayer de connecter l’utilisateur, etc. par exemple
puis naviguer vers la page principale
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
WNavigationService.Default.Navigate(typeof(MainPage));
});
}
}

25
11.VariableSizedWrapGrid
<VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" ItemHeight="100" ItemWidth="100">
<Rectangle Fill="Green" Width="200" Height="200" VariableSizedWrapGrid.RowSpan="2"
VariableSizedWrapGrid.ColumnSpan="2" Margin="4"/>
<Rectangle Fill="Gray" Width="200" VariableSizedWrapGrid.ColumnSpan="2" Margin="4"/>
<Rectangle Fill="Red" Margin="4"/>
<Rectangle Fill="Blue" Margin="4"/>
</VariableSizedWrapGrid>
La même chose pour un GridView
public class VariableGridView : GridView
{
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
var variableItem = item as VariableSizedItem;
if (variableItem != null)
{
var gridViewItem = element as GridViewItem;
if (gridViewItem != null)
{
VariableSizedWrapGrid.SetColumnSpan(gridViewItem, variableItem.ColumnSpan);
VariableSizedWrapGrid.SetRowSpan(gridViewItem, variableItem.RowSpan);
}
}
base.PrepareContainerForItemOverride(element, item);
}
}
Le modèle
public class VariableItem
{
public SolidColorBrush BackgroundColor { get; set; }
public int Height { get; set; }
public int Width { get; set; }
public int ColumnSpan { get; set; }
public int RowSpan { get; set; }
// etc.
}
On peut changer la largeur,
hauteur et ainsi définir
combien de colonnes, lignes
sont occupées
Propriétés liées pour définir l’élément
dans le GridView, il pourrait avoir
d’autres propriétés avec des données
récupérées
On dérive le GridView et redéfinit
« PrepareContainerForItemOverride »
On change le nombre de colonnes
et lignes en rapport à l’élément
« VariableItem » (modèle défini)
Chaque élément de base a une taille de
100x100. Ils s’empilent horizontalement
(orientation) dans la limite de 4

26
Ajout à la page
<local:VariableGridView x:Name="variableGridView">
<local:VariableGridView.ItemTemplate>
<DataTemplate>
<Grid Background="{Binding BackgroundColor}"
Height="{Binding Height}" Width="{Binding Width}" Margin="4">
<TextBlock Text="{Binding Title}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</local:VariableGridView.ItemTemplate>
<local:VariableGridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="4" ItemHeight="100" ItemWidth="100"/>
</ItemsPanelTemplate>
</local:VariableGridView.ItemsPanel>
</local:VariableGridView>
Dans le code-behind de la page
{
public MainPage()
{
Items = new List<VariableItem>();
Items.Add(new VariableItem
{
Title = "First",
BackgroundColor = new SolidColorBrush(Colors.Green),
Height = 200,
Width = 200,
ColumnSpan = 2,
RowSpan = 2
});
{
Title = "Second",
BackgroundColor = new SolidColorBrush(Colors.Gray),
Width = 200,
Height = 100,
ColumnSpan = 2
});
{
Title = "Three",
BackgroundColor = new SolidColorBrush(Colors.Red),
Height = 100,
Width = 100,
});
{
Title = "Four",
BackgroundColor = new SolidColorBrush(Colors.Blue),
Height = 100,
Width = 100,
});
variableGridView.ItemsSource = Items;
}
public List<VariableItem> Items { get; set; }
}

27
II. Accent et Thème (Dark, Light)
<Rectangle Fill="{ThemeResource SystemAccentColor}" Grid.Row="1"></Rectangle>
On peut changer le thème (« Light » ou « Dark ») pour toute l’application dans « app »
<Application
x:Class="UWPAutoSuggestBoxDemo.App"
xmlns:local="using:UWPAutoSuggestBoxDemo"
RequestedTheme="Light">
</Application>
Ou pour seulement des éléments ou contrôles avec l’attribut « RequestedTheme », exemple
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Dark">

</RelativePanel>
Définir son propre thème
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="BackgroundBrush" Color="Red" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="BackgroundBrush" Color="Gray" />
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="BackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
</ResourceDictionary.ThemeDictionaries>
</Application.Resources>
Thème Dark, la couleur
sera rouge
Thème Light, la couleur
sera gris

28
On peut également définir les thèmes dans des dictionnaires de ressources et les rendre accessibles à
l’application
<Application
x:Class="UWPThemesDemo.App"
xmlns:local="using:UWPThemesDemo"
RequestedTheme="Dark">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary Source="Resources/Dark.xaml" x:Key="Default" />
<ResourceDictionary Source="Resources/Light.xaml" x:Key="Light" />
</ResourceDictionary.ThemeDictionaries>
</Application>
Utilisation
<Grid Background="{ThemeResource BackgroundBrush}">
</Grid>
III. Design Time
public class MainPageViewModel : ViewModelBase
{
{
if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
}
}
}

29
IV. DataTemplateSelector
Permet d’afficher différents Templates dans une ListView ou un GridView pour une même source de
données.
public class SearchResultTemplateSelector : DataTemplateSelector
{
public DataTemplate VideoTemplate { get; set; }
public DataTemplate ChannelTemplate { get; set; }
public DataTemplate PlayListTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if(item is Video)
{
return VideoTemplate;
}
if (item is Channel)
{
return ChannelTemplate;
}
if (item is PlayList)
{
return PlayListTemplate;
}
return base.SelectTemplateCore(item, container);
}
}
Exemple de Templates
<DataTemplate x:Key="YouTube320VideoItemTemplate" x:DataType="models:Video">

</DataTemplate>
<DataTemplate x:Key="YouTubeChannelItemTemplate" x:DataType="models:Channel">

</DataTemplate>
<DataTemplate x:Key="YouTubePlaylistItemTemplate" x:DataType="models:PlayList">

</DataTemplate>
Models
public class ModelBase
{
// properties
}
public class Video :ModelBase
{
//
}
public class Channel :ModelBase
{
//
}
public class PlayList :ModelBase
{
//
}
3 propriétés permettant de
définir un Template à retourner
selon le type de l’élément reçu
Les 3 classes peuvent hériter d’une
classe de base. Ainsi la source de
données sera une collection de
« ModelBase »

30
ViewModel
public class SearchPageViewModel : ViewModelBase
{
private ObservableCollection<ModelBase> _results;
public ObservableCollection<ModelBase> Results
{
get { return _results; }
set { SetProperty(ref _results, value); }
}
// etc.
}
Utilisation
En ressources (de la page par exemple)
<local:SearchResultTemplateSelector x:Key="TemplateSelector"
VideoTemplate="{StaticResource YouTubeVideoItemTemplate}"
ChannelTemplate="{StaticResource YouTubeChannelItemTemplate}"
PlayListTemplate="{StaticResource YouTubeSearchPlayListItemTemplate}">
</local:SearchResultTemplateSelector>
Puis définition de l’ « ItemTemplateSelector »
<GridView x:Name="itemsGridView"
ItemsSource="{x:Bind ViewModel.Results,Mode=OneWay}"
ItemTemplateSelector="{StaticResource TemplateSelector}">
</GridView>
Le GridView affiche un Template
différent selon que c’est une
vidéo, une playlist ou une chaine
par exemple

31
 Dernier élément « Afficher plus » pour ListView ou GridView
Sur ce même principe on peut imaginer un « last item » template qui afficherait un bouton afficher
plus par exemple.
public class LastTemplateSelector : DataTemplateSelector
{
public DataTemplate NormalTemplate { get; set; }
public DataTemplate LastTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item is DataItem) { return NormalTemplate; }
if (item is LastItem) { return LastTemplate; }
return base.SelectTemplateCore(item, container);
}
}
Pour les modèles on a deux classes héritant de « ModelBase
public class ModelBase
{
}
public class LastItem : ModelBase
{
public LastItem(string title)
{
Title = title;
}
}
public class DataItem : ModelBase
{
public int Id { get; set; }
public string Subtitle { get; set; }
// etc.
}

32
ViewModel
public class MainPageViewModel
{
public ObservableCollection<ModelBase> Items { get; set; }
private ICommand _goDetailsPageCommand;
public ICommand GoDetailsPageCommand
{
get
{
return _goDetailsPageCommand ?? (_goDetailsPageCommand = new
RelayCommand<ItemClickEventArgs>((item) =>
{
var selectedItem = item.ClickedItem;
if(selectedItem is DataItem)
{
// navigate to data
}
if(selectedItem is LastItem)
{
// load more data
}
}));
}
}
{
Items = new ObservableCollection<ModelBase>();
Items.Add(new DataItem(1, "Titre 1", "Subtile", "Lorem ipsum dolor sit …",
"Images/group.jpg"));
Items.Add(new DataItem(2, "Titre 2", "Subtile", "Lorem ipsum dolor sit …",
"Images/group_2.jpg"));
// etc.
// Last
Items.Add(new LastItem("Afficher plus"));
}
}
On ajoute dans le code behind de la page une propriété pour le binding (avec x :Bind)
{
public MainPage()
{
}
}
Quand l’utilisateur clique sur
un élément du GridView soit
on le diriga vers la page détails
soit on charge plus d’éléments.
(Il faudra les insérer avant le
bouton)

33
En ressources de la page
<local:LastTemplateSelector x:Key="LastTemplateSelector"
NormalTemplate="{StaticResource ImageOverlayTemplate}"
LastTemplate="{StaticResource LastTemplate}"/>
On définit un template simple pour le type « LastItem »
<DataTemplate x:Key="LastTemplate" x:DataType="models:LastItem">
<Grid Width="200" Height="200" Background="{ThemeResource SystemAccentColor}" Margin="4">
<TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
Le GridView avec ItemTemplateSelector et behavior
<GridView x:Name="itemsListView"
ItemsSource="{x:Bind ViewModel.Items}"
ItemTemplateSelector="{StaticResource LastTemplateSelector}"
IsItemClickEnabled="True">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="ItemClick">
<Core:InvokeCommandAction Command="{x:Bind ViewModel.GoDetailsPageCommand}"
CommandParameter="{x:Bind itemsListView.SelectedItem}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</GridView>

34
V. HeaderGroup
Models
public sealed class DataSource
{
public static IEnumerable<DataGroup> GetGroups()
{
var groups = new List<DataGroup>();
var groupA = new DataGroup("A");
groupA.Items.Add(new DataItem("Aanor"));
groupA.Items.Add(new DataItem("Aaricia"));
groupA.Items.Add(new DataItem("Aaron"));
// etc.
groups.Add(groupA);
var groupB = new DataGroup("B");
groupB.Items.Add(new DataItem("Babet"));
groupB.Items.Add(new DataItem("Babeth"));
// etc.
groups.Add(groupB);
// etc.
return groups;
}
}
public class DataGroup
{
public string TitleGroup { get; private set; }
public ObservableCollection<DataItem> Items { get; set; }
public DataGroup(string titleGroup)
{
TitleGroup = titleGroup;
Items = new ObservableCollection<DataItem>();
}
}
public class DataItem
{
public string TitleItem { get; set; }
public DataItem(string titleItem)
{
TitleItem = titleItem;
}
}
Switch du nom de groupe au
défilement

35
ViewModel
public class MyDataViewModel
{
public ObservableCollection<DataGroup> Groups { get; set; }
public void LoadData()
{
var groups = DataSource.GetGroups();
if (groups != null)
{
Groups = new ObservableCollection<DataGroup>(groups);
}
}
}
Utilisation
Code behind de la page
{
public MainPage()
{
ViewModel = new MyDataViewModel();
}
public MyDataViewModel ViewModel { get; set; }
{
ViewModel.LoadData();
}
}
<ListView ItemsSource="{x:Bind cvs.View}"
ItemTemplate="{StaticResource DataItemTemplate}">
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource HeaderTemplate}" />
</ListView.GroupStyle>
</ListView>
Templates et source de données groupée
<Page.Resources>
<CollectionViewSource x:Name="cvs"
Source="{x:Bind ViewModel.Groups}"
IsSourceGrouped="True"
ItemsPath="Items" />
<DataTemplate x:Key="HeaderTemplate" x:DataType="models:DataGroup">
<TextBlock Text="{x:Bind TitleGroup}"
Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
<DataTemplate x:Key="DataItemTemplate" x:DataType="models:DataItem">
<TextBlock Text="{x:Bind TitleItem}"
Style="{StaticResource BaseTextBlockStyle}"/>
</DataTemplate>
</Page.Resources>
Utilisation ici d’une ListView
mais on peut faire la même
chose avec un GridView

36
DataTemplates
Pour ListView
Texte seul
<DataTemplate x:Key="TextListTemplate" x:DataType="models:DataItem">
<Grid Width="280">
<TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}"
Margin="8,0,0,0" HorizontalAlignment="Left" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
Icone et texte
<DataTemplate x:Key="IconTextTemplate" x:DataType="models:DataItem">
<StackPanel Orientation="Horizontal" Width="500">
<Image Height="45" Width="45" Margin="0,8,0,8" Source="{x:Bind Image}" Stretch="UniformToFill"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="8,8,0,0">
<TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}" />
<TextBlock Text="{x:Bind Subtitle}" Margin="0,4,8,0"
Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>

37
Image et texte
<DataTemplate x:Key="ImageTextListTemplate" x:DataType="models:DataItem">
<StackPanel Orientation="Horizontal" Width="500" Height="130">
<Image Height="110" Width="110" Margin="0,8,0,8" Source="{x:Bind Image}" Stretch="UniformToFill"/>
<StackPanel VerticalAlignment="Center" Width="380" Margin="8,8,0,0">
<TextBlock Text="{x:Bind Subtitle}" TextWrapping="WrapWholeWords"
Style="{StaticResource CaptionTextBlockStyle}" />
<TextBlock Text="{x:Bind Description}" TextWrapping="WrapWholeWords" Margin="0,8,0,0"
Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
Overlay
<DataTemplate x:Key="ImageOverlayTemplate" x:DataType="models:DataItem">
<Grid Height="110">
<RowDefinition/>
<RowDefinition/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="{x:Bind Image}" Stretch="Uniform" Grid.Column="1" Grid.RowSpan="2"
Margin="0,8,0,8"/>
<Border Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" Margin="0,8,0,8">
<TextBlock Text="{x:Bind Title}" Margin="8,8,0,0" TextWrapping="Wrap"
HorizontalAlignment="Left" Style="{StaticResource BaseTextBlockStyle}"/>
</Border>
<TextBlock Text="{x:Bind Subtitle}" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}"
TextWrapping="Wrap" Margin="8,0,0,0"/>
</Grid>
</DataTemplate>
</Page.Resources>

38
Pour GridView
Texte seul
<DataTemplate x:Key="TextTemplate" x:DataType="models:DataItem">
<TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}" Margin="8,0,0,0"/>
</StackPanel>
</DataTemplate>
Icone et texte
<DataTemplate x:Key="IconTextTemplate" x:DataType="models:DataItem">
<Image Source="{x:Bind Image}" Width="45" Height="45" Margin="8" Stretch="UniformToFill"/>
<StackPanel VerticalAlignment="Center" Margin="8,0">
<TextBlock Text="{x:Bind Subtitle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
Image et texte
<DataTemplate x:Key="ImageTextTemplate" x:DataType="models:DataItem">
<StackPanel Orientation="Horizontal" Width="500" Height="130">
<Image Source="{x:Bind Image}" Stretch="Fill" Height="110" Width="110" Margin="8,8,0,8"/>
<StackPanel Width="350" Margin="8,8,0,0" VerticalAlignment="Center">
<TextBlock Text="{x:Bind Subtitle}" Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock Text="{x:Bind Description}" TextWrapping="Wrap" Margin="0,8,0,0"/>
</StackPanel>
</StackPanel>
</DataTemplate>

39
Overlay
<DataTemplate x:Key="ImageOverlayTemplate" x:DataType="models:DataItem">
<StackPanel Height="130" Width="190" Margin="4,4,4,8">
<TextBlock Text="{x:Bind Title}" Margin="8,4" Width="186"
Style="{StaticResource BaseTextBlockStyle}" HorizontalAlignment="Left"/>
<Image Source="{x:Bind Image}" Margin="8,0,8,8" Stretch="UniformToFill"/>
</StackPanel>
</DataTemplate>

40
VI. Adaptive UI
Une application UWP doit pouvoir s’exécuter sur différents appareils. Il va falloir adapter la page
pour les différentes résolutions et orientations (Portrait, paysage).
Penser en Pixel effectif (et non en pixel réel)
« Four is the magic number » (tailles, marges multiples de 4)
« 6R »
 Reposition
 Resize
 Reflow (basculer de 2 à 3 colonnes par exemple)
 Reveal
 Replace
 Re-architect
Utilisation de RelativePanel pour pouvoir repositionner les éléments
Utilisation Visual States et AdaptiveTrigger pour déplacer des blocs ou éléments, redimensionner,
cacher, etc.
Snap points :
- 320
- 548 Phone
- 720 Tablet
- 1024 Desktop
Astuce : afficher la taille courante de la page
{
public MainPage()
{
this.SizeChanged += (s, e) =>
{
textBlock.Text = e.NewSize.Width.ToString();
};
}

41
1. Adaptive Triggers
Voir exemple Responsive Techniques
1. Ouvrir le projet avec Blend
2. Ajouter des Etats Visuels
Panneau Etats : Ajouter un groupe d’états puis des états visuels
3. Changer les propriétés des éléments selon les états
Sélectionner l’état dans le panneau « Etats » et l’élément dans le panneau « Objets et chronologie »,
puis modifier les propriétés de cet élément dans le panneau « Propriétés »
AdaptiveTrigger ou Custom Trigger
Ajout de groupe d’états Ajout d’états viusels
Ajouter un AdaptiveTrigger
Réglage des propriétés (MinWindowHeight et
MinWindowWidth pour un AdaptiveTrigger)

42
Repositionnement avec RelativePanel
<VisualStateGroup>
<Setter Target="textBlock.(RelativePanel.Below)" Value="image"/>
<AdaptiveTrigger MinWindowWidth="1"/>
</VisualState>
<Setter Target="textBlock.(RelativePanel.RightOf)" Value="image"/>
</VisualState>
</VisualStateGroup>
<Image x:Name="image" Source="Images/breakfast.jpg" Width="300" Margin="8"/>
<TextBlock x:Name="textBlock" Text="Une petite faim?" TextWrapping="NoWrap"
Style="{StaticResource SubheaderTextBlockStyle}" Margin="8" />
</RelativePanel>
De 0 à 548
> 548
Setters
StateTriggers
De 0 à 548 on place le texte
en-dessous l’image
> 548 on place le texte à
droite de l’image

43
2. Master details
> 548
Page divisée avec à gauche la liste, à droite le détail
De 0 à 548
La liste occupe toute la largeur de la page (ColumnSpan=2), la partie détail est cachée (Collapsed) et
lorsque l’on clique sur un élément de la liste on navigue vers une page détails
Une variante consiste donner un nom à chaque colonne de la grille (exemple « masterColumn »
et « detailsColumn ») et changer la taille pour de 0 à 548 (ou 720) passer masterColumn à « * » et
detailsColumn à 0. Exemple XamlMasterDetail

44
<Page …>
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition />
</TransitionCollection>
</Page.Transitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<VisualStateGroup>
<Setter Target="personDetailsControl.(UIElement.Visibility)"
Value="Collapsed"/>
<Setter Target="peopleList.(Grid.ColumnSpan)" Value="2"/>
</VisualState>
</VisualState>
</VisualStateGroup>
<ListView x:Name="peopleList"
ItemsSource="{x:Bind People}"
IsItemClickEnabled="True"
ItemClick="peopleList_ItemClick" />
<Controls:PersonDetailsControl x:Name="personDetailsControl" Background="#ccc"
DataContext="{Binding SelectedItem, ElementName=peopleList}"
Grid.Column="1"/>
</Grid>
Navigation vers une page Détails si la partie détails est cachée (>548)
private void ListView_ItemClick(object sender, ItemClickEventArgs e)
{
if (personDetailsControl.Visibility == Visibility.Collapsed)
{
Frame.Navigate(typeof(PersonDetailsPage), e.ClickedItem);
}
}
La liste à gauche de la grille
Un contrôle utilisateur affichant le détail à droite
Visual States
On peut ajouter une transition à
page pour effet de retour

45
La page Détails avec un bouton retour un titre et le contrôle utilisateur
<Button x:Name="backButton"
Style="{StaticResource NavigationBackButtonSmallStyle}"
TabIndex="1"
Margin="8"
Click="backButton_Click"
AutomationProperties.Name="Back"
ToolTipService.ToolTip="Back" />
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Name, Mode=OneWay}"
RelativePanel.RightOf="backButton" RelativePanel.AlignVerticalCenterWith="backButton" Margin="8"/>
<Controls:PersonDetailsControl RelativePanel.Below="backButton" />
</RelativePanel>
private void backButton_Click(object sender, RoutedEventArgs e)
{
Frame.GoBack(new DrillInNavigationTransitionInfo());
}
3. Custom adaptive triggers
voir l’exemple XamlStateTriggers
using Windows.System.Profile;
using Windows.UI.Xaml;
namespace UWPAdaptiveTriggerDemo.CustomTriggers
{
public class DeviceFamilyTrigger : StateTriggerBase
{
private string _deviceFamily;
public string DeviceFamily
{
get { return _deviceFamily; }
set
{
var qualifiers = ResourceContext.GetForCurrentView().QualifierValues;
_deviceFamily = value;
SetActive(_deviceFamily == qualifiers["DeviceFamily"]);
// ou
//var currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
//_deviceFamily = value;
//SetActive(_deviceFamily == currentDeviceFamily); }
}
}
}
Avec Blend, pour un état visuel
Hérite de « StateTriggerBase »
On appelle la méthode « SetActive »
Propriété(s) accessible(s) servant pour
déterminer quand l’état est activé
Sélectionner « Autre type » …

46
On change ensuite les propriétés des éléments de la page selon les états visuels.
Et le « Custom State Trigger »
On définit ensuite les valeurs qui
rendront actif l’état visuel

47
Dans cet exemple, on affiche une image quand on est sur desktop, et une autre quand on est sur
mobile
<VisualStateGroup x:Name="DeviceFamilyStates">
<VisualState x:Name="Desktop">
<triggers:DeviceFamilyTrigger DeviceFamily="Windows.Desktop" />
<Setter Target="desktopImage.Visibility" Value="Visible" />
<Setter Target="mobileImage.Visibility" Value="Collapsed" />
</VisualState>
<VisualState x:Name="Mobile">
<triggers:DeviceFamilyTrigger DeviceFamily="Windows.Desktop" />
<Setter Target="desktopImage.Visibility" Value="Collapsed" />
<Setter Target="mobileImage.Visibility" Value="Visible" />
</VisualState>
</VisualStateGroup>
<Image x:Name="desktopImage" Source="../Assets/desktop-family.png"></Image>
<Image x:Name="mobileImage" Source="../Assets/mobile-family.png"></Image>
</Grid>

48
4. DeviceFamily
On peut créer une version de page selon les devices
Si on navigue vers la page « Scenario4 », automatiquement la vue pour Mobile sera affichée si on est
sur ce device.
On peut obtenir le device également en code
var qualifiers = ResourceContext.GetForCurrentView().QualifierValues;
if (qualifiers["DeviceFamily"] == "DeviceFamily-Xbox")
{
Frame.Navigate(typeof(MainPage_Xbox));
}
else
{
Frame.Navigate(typeof(MainPage));
}
5. Astuce : réactiver les animations, transitions Windows
Régler les effets visuels de Windows. Permet de réactiver les animations, transitions au cas où elles
auraient été désactivées pour améliorer les performances par exemple.
Vue correspondante
pour Mobile
Vue par « défaut »

49
VII. x :Bind « Compiled Binding »
Voir exemple XamlBind
Les +
- Meilleures performances que le binding « classique ». Très performant pour afficher des
listes.
- Va chercher automatiquement les propriétés dans le code-behind de la page sans définir de
DataContext. Pour l’utilisation de ViewModels on définit donc directement une propriété
dans le code-behind.
- Le mode par défaut de binding est « OneTime ». Il faut donc définir un mode OneWay ou
TwoWay si ce n’est pas suffisant.
- On peut utiliser « x :Bind » pour binder des événements, permet d’éviter l’utilisation de
RelayCommand ou de behavior pour des scénarios simples.
Les -
- Problème avec les commandes dans les DataTemplates de fichier de ressources (Besoin
d’aller chercher le DataContext du parent)
- Problème avec SelectedItem (renvoyant un objet) avec ListView / GridView .., besoin de faire
des convertisseurs ?
- Problème avec les styles
- Les attributs ElementName, RelativeSource, Source, UpdateSourceTrigger ne sont pas pris
en charge par « x :Bind »
- Solution : il faudra parfois mélanger le binding classique et binding avec « x :Bind ». On règle
alors le DataContext sur le même ViewModel défini en propriété dans le code-behind de la
page.
1. Binding de collection
On définit une propriété dans le code-behind de la page sans définir de DataContext
public sealed partial class Scenario1 : Page
{
public Scenario1()
{
People = new ObservableCollection<Person>
{
new Person { Name ="Marie Bellin"},
new Person { Name ="Jérôme Romagny"}
};
}
public ObservableCollection<Person> People { get; set; }
}
(Le modèle utilisé)
public class Person
{
public string Name { get; set; }
public override string ToString()
{
return Name;
}
}

50
2. Binding dans la page
<ListView ItemsSource="{x:Bind People}" />
2. Avec DataTemplate
On définit le DataTemplate en ressources de la page
<DataTemplate x:Key="personItemTemplate" x:DataType="models:Person">
<SymbolIcon Symbol="People" Margin="8,0,0,0"/>
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0"/>
</StackPanel>
</DataTemplate>
<ListView ItemsSource="{x:Bind People}" ItemTemplate="{StaticResource personItemTemplate}" />
3. Avec dictionnaire de ressources (ResourceDictionary)
1. Ajouter un dictionnaire de ressources
<ResourceDictionary
x:Class="UWPDataBindingDemo.Resources.Templates"
xmlns:local="using:UWPDataBindingDemo.Resources"
xmlns:models="using:UWPDataBindingDemo.Models">
<DataTemplate x:Key="personItemTemplateFromResourceDictionary" x:DataType="models:Person">
<SymbolIcon Symbol="People" Margin="8,0,0,0"/>
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0"/>
</StackPanel>
</DataTemplate>
2. Ajout d’une classe (partielle) du même nom que le dictionnaire de ressources
namespace UWPDataBindingDemo.Resources
{
public partial class Templates
{
public Templates()
{
InitializeComponent();
}
}
}
Utilisation du DataTemplate du dictionnaire de resources
<ResourceDictionary.MergedDictionaries>
<resources:Templates />
</ResourceDictionary.MergedDictionaries>
Si aucun DataTemplate n’est défini c’est la méthode
ToString des éléments qui est appelée
Ajouter un namespace et
définir le DataType
Exemple de template
Ajout d’un nom de classe
Attention au namespace
Référencer le dictionnaire en
ressources de la page ou pour
toute l’application dans « App »

51
<ListView ItemsSource="{x:Bind People}"
ItemTemplate="{StaticResource personItemTemplateFromResourceDictionary}" />
4. « RelativeSource » et « ElementName » … lier au nom de l’élément
<Slider x:Name="slider" Header="Slider" Maximum="10" Margin="8"/>
<TextBlock Text="{x:Bind slider.Value,Mode=OneWay}" Margin="8"/>
5. « Source » et « DataContext ».. Ajouter une propriété du ViewModel dans le
code-behind
{
public MainPage()
{
ViewModel = new MyViewModel();
DataContext = ViewModel;
}
public MyViewModel ViewModel { get; set; }
}
Variantes
{
private MainViewModel viewModel;
public MainPage()
{
this.Loaded += MainPage_Loaded;
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
viewModel = new MyViewModel();
this.DataContext = viewModel;
}
}
}
{
public MainPage()
{
this.DataContextChanged += (s, e) => { ViewModel = DataContext as MyViewModel; };
}
}
Parfois il faudra définir le
DataContext pour mélanger les deux
formes de binding

52
<TextBlock Text="{x:Bind ViewModel.Message}"/>
public class MyViewModel
{
public string Message { get; set; }
public MyViewModel()
{
Message = "Bonjour!";
}
}
6. Binding Events
 Permet d’éviter l’utilisation de « RelayCommand » (ICommand) ou de behavior
« EventToCommand » pour des scénarios simples, de « déplacer » les événements du code-
behind de la page vers le ViewModel par exemple.
 N’accepte pas les paramètres « personnels », pas de support de CanExecute
Exemple
public class MyViewModel
{
public void DoWork1()
{
}
public void DoWork2(object sender, RoutedEventArgs e)
{
}
public void DoWork3(object sender, object e)
{
}
}
Dans le code-behind de la page
public sealed partial class Scenario4 : Page
{
public Scenario4()
{
ViewModel = new MyViewModel();
}
public MyViewModel ViewModel { get; set; }
}
<Button Content="Sans paramètre ... void DoWork1()" Click="{x:Bind ViewModel.DoWork1}"/>
<Button Content="void DoWork2(object sender, RoutedEventArgs e)" Click="{x:Bind ViewModel.DoWork2}"/>
<Button Content="void DoWork3(object sender, object e)" Click="{x:Bind ViewModel.DoWork3}"/>
Les 3 signatures
acceptées

53
7. Defer loading
Dans la page
<Grid x:Name="myGrid" x:DeferLoadStrategy="Lazy" Background="Red" />
Dans le code-behind
private void Button_Click(object sender, RoutedEventArgs e)
{
FindName("myGrid");
}
VIII. Application Lifecycle
Documentation
Il faut donner l’illusion que l’application n’a pas été suspendue quand celle-ci est résumée.
 Launch (« OnLaunched » de « App »).
- « PreviousExecutionState » : NotRunning, Running,Suspended, Terminated, ClosedByUser. Si
l’application est fermée par l’utilisateur (« ClosedByUser ») ne pas restaurer.
- « ActivationKind » : Launch, File, Protocol, Cortana, Secondary tile, toast, search contract,etc.
 Suspend : Les applications Desktop sont suspendues quand elles sont minimisées dans la barre
de tâches.
- Sauvegarder les états de la page et les données (Local, Roaming,…)
- « App » : Sauvegarder l’historique de navigation
 Resume :
- « App » : Restaurer l’historique de navigation, retourner sur la page avant la suspension
- Restaurer les états de la page (champs) et les données (Local, Roaming …)
Note : Les applications UWP n’incluent pas « SuspensionManager » et « NavigationHelper ».
La grille n’est affichée qu’à
l’appel de FindName

54
1. Historique de navigation (« App »)
Sauvegarder la navigation
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
Frame rootFrame = Window.Current.Content as Frame;
ApplicationData.Current.LocalSettings.Values["NavigationState"] = rootFrame.GetNavigationState();
deferral.Complete();
}
Restaurer la navigation
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
// etc.
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
if (ApplicationData.Current.LocalSettings.Values.ContainsKey("NavigationState"))
{
rootFrame.SetNavigationState((string)ApplicationData.Current.LocalSettings.Values["NavigationState"]);
}
}
}
2. Etats de la page et données
Sauver les états de la page courante à la suspension (« code-behind de la page » )
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
vm.SaveData();
}
ViewModel
public void SaveData()
{
ApplicationData.Current.RoamingSettings.Values["ValueOne"] = ValueOne;
ApplicationData.Current.RoamingSettings.Values["ValueTwo"] = ValueTwo;
}
Restaurer les états
{
if(e.NavigationMode == NavigationMode.New)
{
// clear
vm.ClearData();
}
else
{
vm.LoadData();
}
}
Exemple sauvegarde de deux
valeurs de champs

55
ViewModel
public void LoadData()
{
if (ApplicationData.Current.RoamingSettings.Values.ContainsKey("ValueOne"))
{
ValueOne = ApplicationData.Current.RoamingSettings.Values["ValueOne"].ToString();
}
if (ApplicationData.Current.RoamingSettings.Values.ContainsKey("ValueTwo"))
{
ValueTwo = ApplicationData.Current.RoamingSettings.Values["ValueTwo"].ToString();
}
}
public void ClearData()
{
if (ApplicationData.Current.RoamingSettings.Values.ContainsKey("ValueOne"))
{
ApplicationData.Current.RoamingSettings.Values.Remove("ValueOne");
}
if (ApplicationData.Current.RoamingSettings.Values.ContainsKey("ValueTwo"))
{
ApplicationData.Current.RoamingSettings.Values.Remove("ValueTwo");
}
}

56
IX. Tiles, toasts
Documentation
Voir exemple Notifications
Tile
On définit les Assets toujours dans le manifeste de l’application, onglet « Ressources visuelles »
- Petit : 71x71 (« généré automatiquement » si l’Asset n’est pas présent)
- Moyen : 150x150 (Square150x150Logo.png)
- Large : 310x150 (Wide310x150Logo.png)
- Grand : 310x310 (Wide310x310Logo.png)
Vignette de l’application : Chercher l’application depuis le champ recherche de Windows 10 puis
« Epingler à l’écran de démarrage »
71x71 150x150 310x150
310x310
Seulement pour desktop

57
Note : si on définit la couleur d’arrière-plan des vignettes sur « transparent », c’est alors la couleur
d’accent de Windows qui est appliqué
Vignette secondaire : ajoutée par code. La vignette est désormais ajoutée directement sans boite de
dialogue (comme c’était le cas avec Windows 8.1)
private async void OnPinSecondaryTile(object sender, RoutedEventArgs e)
{
var isPinned = SecondaryTile.Exists(tileId);
if (!isPinned)
{
await PinSecondaryTile(tileId);
}
}
const string tileId = "DetailsTile ";
private async Task<bool> PinSecondaryTile(string tileId)
{
string tileActivationArguments = " mon argument";
var tile = new SecondaryTile(tileId, "Vignette secondaire", tileActivationArguments,
new Uri("ms-appx:///Assets/Square150x150Logo.png", UriKind.Absolute),
TileSize.Square150x150);
tile.VisualElements.Wide310x150Logo =
new Uri("ms-appx:///Assets/Wide310x150Logo.png", UriKind.Absolute);
tile.VisualElements.Square310x310Logo =
new Uri("ms-appx:///Assets/Square310x310Logo.png", UriKind.Absolute);
// détails
tile.VisualElements.ShowNameOnSquare150x150Logo = true;
tile.VisualElements.ShowNameOnWide310x150Logo = true;
tile.VisualElements.ShowNameOnSquare310x310Logo = true;
//tile.VisualElements.BackgroundColor = Colors.DarkOrange;
tile.VisualElements.ForegroundText = ForegroundText.Light;
tile.RoamingEnabled = false;
bool isPinned = await tile.RequestCreateAsync();
return isPinned;
}
Nom affiché, arguments, uri de la
tile 150x150 et taille désirée de la
vignette

58
Notification de vignette
private void OnUpdateTile(object sender, RoutedEventArgs e)
{
string image = "ms-appx:///Assets/image_1.jpg";
string title = "Titre!";
string message = "Nouveau message!";
string xml = string.Format(@"<tile>
<visual version=""2"">
<binding template=""TileSquare150x150PeekImageAndText02""
fallback=""TileSquarePeekImageAndText02"">
<image id=""1"" src=""{0}"" alt=""alt text""/>
<text id=""1"">{1}</text>
</binding>
<binding template=""TileWide310x150PeekImage01""
fallback=""TileWidePeekImage01"">
<image id=""1"" src=""{0}""/>
</binding>
</visual>
</tile>", image, title, message);
var document = new XmlDocument();
document.LoadXml(xml);
var notification = new TileNotification(document);
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
}
« Scheduled » (différé)
// etc.
var notification = new ScheduledTileNotification(document, DateTimeOffset.Now.AddSeconds(10));
TileUpdateManager. CreateTileUpdaterForSecondaryTile(tileId). AddToSchedule(notification);
« Periodic » (Web Service appelé toutes les 30 minutes, 60 minutes, 6 heures, 12 heures, 24 heures)
// etc.
var updater = TileUpdateManager.CreateTileUpdaterForSecondaryTile(tileId);
var uri = new Uri("http://localhost:3660/api/Notification/");
updater.StartPeriodicUpdate(uri, PeriodicUpdateRecurrence.Hour);
« Push » (Push Services)
Documentation
Animation « cube 3D »
Défilement
Notification de la vignette principale. On peut également
notifier les vignettes secondaires en passant le « tile id »

59
Adaptive Tiles
On peut toujours utiliser les templates de Windows 8.1 ou on peut utiliser les « Adaptive Templates »
qui permettent plus de souplesse et de personnalisation
Adaptive Tile Schema
Exemple
private void OnAdaptiveTile(object sender, RoutedEventArgs e)
{
string title = "Titre!";
string xml = string.Format(@"<tile>
<visual>
<binding template=""TileSmall"">
<image src=""{0}"" placement=""background""></image>
</binding>
<binding template=""TileMedium"">
<text hint-style=""caption"" hint-wrap=""true"">{1}</text>
<text hint-style=""captionSubtle"" hint-wrap=""true"">{2}</text>
</binding>
<binding template=""TileWide"">
<text hint-style=""title"" hint-wrap=""true"">{1}</text>
<text hint-style=""subSubtle"" hint-wrap=""true"">{2}</text>
</binding>
<binding template=""TileLarge"" branding=""nameAndLogo"">
<group>
<subgroup>
<text hint-style=""title"">{1}</text>
<text hint-style=""subSubtle"">{2}</text>
</subgroup>
</group>
<image src=""{0}"" placement=""inline""></image>
</binding>
</visual>
</tile>", image, title, message);
var notification = new TileNotification(document);
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
}
Image en arrière-plan,
texte par-dessus avec styles
Vignette 71x71
Vignette 150x150
Vignette 310x150
Vignette 310x310
Placement de l’image en arrière-plan
(background) , on pourrait la placer en
ligne avec un alignement
On définit le style du texte
(caption, etc.) .« hint-
wrap » place devant
l’image d’arrière-plan
« branding » :
nom et logo
(44x44)
Affichage du nom
et logo
Image « inline »
Groupe et image
en ligne

60
Toast
Les toasts servent soit à afficher un message, soit propose une action.
On peut utiliser les templates de toast de Windows 8.1 ou on peut utiliser les adaptives templates.
private void OnSendToast(object sender, RoutedEventArgs e)
{
string title = "Mon application";
string xml = string.Format(@"<toast>
<visual>
<binding template=""ToastText02"">
</binding>
</visual>
</toast>", title, message);
var notification = new ToastNotification(document);
ToastNotificationManager.CreateToastNotifier().Show(notification);
}
Adaptive toast
Toast
Image remplaçant le
logo
Image « inline »
Centre de
notifications

61
private void OnSendAdaptiveToast(object sender, RoutedEventArgs e)
{
string newLogo = "ms-appx:///Assets/image_2.png";
string title = "Mon application";
string xml = string.Format(@"<toast>
<visual>
<binding template=""ToastGeneric"">
<image src=""{0}"" placement=""appLogoOverride""/>
<text>{1}</text>
<text>{2}</text>
<image src=""{3}"" placement=""inline""/>
</binding>
</visual>
</toast>",newLogo, title, message,image);
}
Scénarios
<toast scenario=""reminder"">
private void OnSendAlarmToast(object sender, RoutedEventArgs e)
{
string title = "Alarme!";
string message = "Message!";
string xml= string.Format(@"<toast launch='args' scenario='alarm'>
<visual>
<binding template='ToastGeneric'>
<text>{0}</text>
<text>{1}</text>
</binding>
</visual>
<actions>
<action arguments = 'snooze' content = 'snooze' />
<action arguments = 'dismiss' content = 'dismiss' />
</actions>
</toast>",title,message);
}
Reminder, alarm ou
incomingCall

62
Historique de notification
ToastNotificationManager.History.Clear();
Il est possible de définir les applications pouvant envoyer des notifications dans les options de
Windows 10 (« Système » … « Notifications et actions » ou depuis le centre de notifications de la
barre de tâches)

Windows 10 UWP App Development ebook

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Windows 10 UWP App Development ebook

Similar a Windows 10 UWP App Development ebook (20)

Más de Cheah Eng Soon

Más de Cheah Eng Soon (20)

Windows 10 UWP App Development ebook