Contrôles (XAML avec C#/C++/VB)

  • Article

Ajoutez de nouvelles fonctionnalités à votre application du Windows Store, notamment des sélecteurs de date et d’heure et une prise en charge de la navigation améliorée, grâce aux nouveaux contrôles XAML dans Windows 8.1. Les contrôles existants ont été mis à jour pour être plus simples à utiliser et plus polyvalents.Ces nouveaux contrôles et mises à jour de contrôle facilitent plus que jamais la création d’applications complètes.

Nouveaux contrôles et mises à jour de contrôle

Windows 8.1 propose ces nouveaux contrôles et fonctionnalités :

  • Contrôles AppBar
  • CommandBar
  • DatePicker
  • Flyout
  • Hub
  • Hyperlink
  • MenuFlyout
  • SettingsFlyout
  • TimePicker

Windows 8.1 comprend des mises à jour pour les contrôles existants suivants :

  • Mises à jour de FlipView
  • En-têtes des contrôles ComboBox, DatePicker, TimePicker, Slider et Edit
  • Texte d’espace réservé
  • Autres mises à jour de contrôle

Contrôles AppBar

[Obtenir l’Exemple de contrôle AppBar XAML maintenant.]

Windows 8.1 introduit de nouveaux contrôles pour XAML qui vous permettent de créer plus facilement des boutons de commande de barres d’application conformes aux recommandations en matière de conception et présentant les comportements appropriés : les contrôles AppBarButton, AppBarToggleButton et AppBarSeparator.

Boutons de barre d’application pour XAML

 

Les boutons de barre d’application diffèrent des boutons standard à divers titres :

  • Leur apparence par défaut est un cercle au lieu d’un rectangle.

  • Vous utilisez les propriétés Label et Icon pour définir le contenu, au lieu de la propriété Content. La propriété Content est ignorée.

  • La propriété IsCompact du bouton contrôle sa taille.

Les contrôles de bouton de barre d’application ont deux tailles : normale et compact. Par défaut, ils possèdent une étiquette de texte et une marge intérieure complète. Quand la propriété IsCompact est définie sur true, l’étiquette de texte est masquée et la marge intérieure autour des boutons est réduite. Le contrôle AppBarSeparator possède également un état compact dans lequel la marge intérieure est réduite.

Voici les mêmes commandes que celles illustrées précédemment, mais dans l’état compact.

Boutons de barre d’application compacts

 

Lorsque vous utilisez ces contrôles de barre d’application dans le nouveau contrôle CommandBar, le CommandBar définit leur propriété IsCompact automatiquement. Si vous utilisez un bouton de barre d’application en dehors d’un CommandBar, par exemple dans un AppBar ou sur le canvas de l’application, vous devez définir la propriété IsCompact comme il convient dans votre code.

Vous pouvez utiliser les boutons de barre d’application en dehors d’une barre d’application. Il est courant d’utiliser un bouton de barre d’application en guise de bouton de retour dans un en-tête de page. Selon les recommandations Windows, quand un bouton de barre d’application est utilisé en dehors d’une barre d’application, il doit se trouver systématiquement en état compact.

Vous utilisez les propriétés Label et Icon pour définir le contenu des boutons de barre d’application. Définissez la propriété Label sur une chaîne pour spécifier l’étiquette de texte. Elle est affichée par défaut, mais est masquée quand le bouton est en état compact ; vous devez donc définir également une icône explicite. Pour ce faire, définissez la propriété Icon du bouton à un élément dérivé de la nouvelle classe IconElement. Quatre types d’élément d’icône sont fournis :

  • FontIcon : — l’icône est basée sur un glyphe dans la famille de polices spécifiée.

  • BitmapIcon : — l’icône est basée sur un fichier d’image bitmap avec le Uri spécifié.

  • PathIcon : — l’icône est basée sur des données Path.

  • SymbolIcon : — l’icône est basée sur une liste de glyphes prédéfinis de la police Segoe UI Symbol.

Création d’un bouton de barre d’application

Cet exemple montre comment créer les contrôles AppBarButton, AppBarSeparator et AppBarToggleButton avec chaque type d’icône.

<!-- App bar button with symbol icon. -->
<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         

<!-- App bar button with bitmap icon. -->
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarSeparator />

<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

<!-- App bar toggle button with path icon. -->
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Cet exemple de code crée ces contrôles.

Exemples d’icône de bouton de barre d’application.

 

CommandBar

[Obtenir l’Exemple de contrôle AppBar XAML maintenant.]

Windows 8.1 introduit un nouveau contrôle pour XAML qui permet à un utilisateur de créer des barres d’application bien conçues : le contrôle CommandBar.

La barre de commandes

 

Le contrôle CommandBar simplifie la création de barres d’application de base en fournissant :

  • une disposition automatique des commandes, avec les commandes principales à droite et les commandes secondaires à gauche ;

  • un redimensionnement automatique des commandes de barre d’application quand la taille de l’application change.

Lorsque vous avez besoin d’une barre d’application qui contient uniquement les contrôles AppBarButton,AppBarToggleButton et AppBarSeparator, utilisez ce nouveau contrôle CommandBar. Si vous avez besoin de contenu plus complexe, tel que des images, des barres de progression ou des blocs de texte, utilisez un contrôle AppBar.

Par défaut, les éléments que vous ajoutez au contrôle CommandBar enrichissent la collection PrimaryCommands. Ces commandes apparaissent à droite du contrôle CommandBar. Vous pouvez également ajouter des commandes à la collection SecondaryCommands, et ces éléments sont affichés sur la gauche.

Les contrôles de bouton de barre d’application ont deux tailles : normale et compact. Par défaut, ils possèdent une étiquette de texte et une marge intérieure complète. Quand la propriété IsCompact est définie sur true, l’étiquette de texte est masquée et la marge intérieure autour des boutons est réduite. Le contrôle AppBarSeparator possède également un état compact dans lequel la marge intérieure est réduite. Lorsque vous utilisez ces contrôles dans le nouveau contrôle CommandBar, il définit automatiquement leur propriété IsCompact quand il n’y a pas suffisamment de place pour les afficher en pleine taille.

Voici les mêmes commandes principales que celles illustrées précédemment, mais dans l’état compact.

Barre de commandes avec boutons compacts

 

Création d’un contrôle CommandBar

Cet exemple crée la barre de commandes illustrée précédemment.

<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

DatePicker

[Obtenir l’exemple de contrôles DatePicker et TimePicker XAML maintenant.]

Windows 8.1 introduit un nouveau contrôle pour XAML qui permet à un utilisateur de définir une date localisée dans votre application : le contrôle DatePicker.

Le sélecteur de dates

 

Le sélecteur de dates offre aux utilisateurs une méthode standard de sélection des dates localisées à l’aide d’une entrée tactile, de la souris ou du clavier. Vous pouvez utiliser le contrôle DatePicker dans sa forme par défaut avec peu de code XAML ou d’autre code, ou vous pouvez le personnaliser de différentes façons.

Le contrôle DatePicker prend en charge chacun des systèmes de calendrier pris en charge par Windows. Ces neuf calendriers sont spécifiés dans la classe Windows.Globalization.CalendarIdentifiers. Le contrôle DatePicker utilise le calendrier correct qui correspond à la langue par défaut de votre application ou vous pouvez définir la propriété CalendarIdentifier pour utiliser un système de calendrier spécifique.

Création d’un DatePicker

Cet exemple montre comment créer un DatePicker simple avec un en-tête.

<DatePicker x:Name=arrivalDatePicker Header="Arrival Date"/>

Ce DatePicker se présente ainsi quand le sélecteur de jour est ouvert.

Un sélecteur de dates avec le sélecteur de jours ouvert

 

Vous pouvez définir la date dans le code ou lier le contrôle à une instance de DateTimeOffset. Dans le cas présent, le DatePicker est défini dans le code pour prendre la valeur par défaut 2 mois à compter de la date actuelle, et l’année minimale est définie sur l’année actuelle.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default date to 2 months from the current date.
    arrivalDatePicker.Date = DateTimeOffset.Now.AddMonths(2);

    // Set the minimum year to the current year.
    arrivalDatePicker.MinYear = DateTimeOffset.Now;
}

Vous pouvez mettre en forme le texte de chaque ComboBox à l’aide de modèles de format standard. Cet exemple montre comment mettre en forme le champ du jour pour afficher le jour du mois et le jour abrégé de la semaine. La définition de la propriété YearVisible sur False permet de masquer le champ de l’année.

<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False"/>

Cet exemple crée ce DatePicker.

Sélecteur de dates avec l’année masquée

 

Le DatePicker prend également en charge les dispositions verticales en définissant sa propriété Orientation. Il est personnalisable : vous pouvez utiliser les styles et les modèles pour personnaliser presque tous les aspects du DatePicker et de son contenu.

Flyout

[Obtenir l’exemple Flyout et MenuFlyout XAML maintenant.]

Windows 8.1 introduit un nouveau contrôle pour XAML qui permet d’afficher provisoirement une interface utilisateur liée à l’opération en cours : le contrôle Flyout.

Bouton avec menu volant

 

Un Flyout affiche une interface utilisateur légère (appelé menu volant) qui contient des informations ou demande une interaction de l’utilisateur. À la différence d’une boîte de dialogue, un menu volant peut être fermé rapidement en cliquant ou en appuyant en dehors du contrôle. Il permet de collecter des saisies de l’utilisateur, d’afficher des informations complémentaires sur un élément ou de demander à l’utilisateur de confirmer une action. Un menu volant ne doit apparaître qu’en réponse à une pression ou un clic de l’utilisateur et il se ferme toujours lorsque l’utilisateur appuie à l’extérieur du contrôle.

Il est courant d’attacher un menu volant à un bouton, c’est pourquoi le contrôle Button propose une nouvelle propriété Flyout pour simplifier l’attachement et l’ouverture d’un contrôle Flyout. Un menu volant attaché à un bouton s’ouvre automatiquement lors d’un clic sur le bouton.

Vous pouvez également attacher un contrôle Flyout à n’importe quel objet FrameworkElement en utilisant la propriété jointe FlyoutBase.AttachedFlyout. Si tel est le cas, vous devez répondre à une interaction dans le FrameworkElement, par exemple Tapped, et ouvrir le Flyout dans votre code.

Création d’un menu volant

Cet exemple crée le contrôle Button avec un Flyout comme indiqué dans l’illustration précédente.

<Button Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{StaticResource BasicTextStyle}">All items will be removed. Do you want to continue?</TextBlock>
                <Button Click="DeleteConfirmation_Click">Yes, empty my cart</Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

L’exemple suivant illustre un Flyout attaché à un TextBlock. Comme indiqué précédemment, vous pouvez attacher un Flyout à n’importe quel FrameworkElement en utilisant la propriété jointe FlyoutBase.AttachedFlyout.

<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
           Tapped="TextBlock_Tapped" FontSize="18">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

Pour ouvrir ce Flyout, gérez l’événement Tapped et appelez la méthode FlyoutBase.ShowAttachedFlyout.

private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

Le bloc de texte se présente sous cette forme.

Texte avec menu volant fermé

 

Lors d’un appui sur le bloc de texte, le menu volant contenant le contrôle TextBox s’ouvre et le texte peut être modifié.

Texte avec menu volant ouvert

 

Vous pouvez créer un Flyout comme ressource et l’utiliser sur plusieurs contrôles. Ici, un Flyout est défini comme ressource et partagé entre 2 contrôles différents.

<Page.Resources>
    <Flyout x:Key="SharedFlyout">
        <StackPanel>
            <TextBlock Text="This Flyout is shared."/>                      
        </StackPanel>
    </Flyout>
</Page.Resources>

...

<Button Content="Button" Flyout="{StaticResource SharedFlyout}"/>
<TextBlock Text="TextBlock" FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" Tapped="TextBlock_Tapped"/>

Pour plus d’informations sur le Flyout, voir Démarrage rapide : ajout d’un menu volant.

Hub

[Obtenir l’exemple de contrôle Hub XAML maintenant.]

Windows 8.1 propose un nouveau contrôle pour XAML qui vous permet de créer plus facilement un modèle de conception Hub conforme aux recommandations en matière de conception et présentant les comportements appropriés : le contrôle Hub.

Une page Hub

 

Les pages Hub représentent le point d’entrée de l’utilisateur dans l’application. Elles affichent du contenu dans une vue panoramique détaillée qui permet aux utilisateurs d’avoir un aperçu de ce qui est nouveau et digne d’intérêt, puis d’explorer le contenu de votre application. Le Hub affiche différentes catégories de contenu, chacune étant mappée aux pages de section de l’application. Chaque section doit proposer du contenu ou une fonctionnalité. Le Hub doit être varié sur le plan visuel, il doit séduire les utilisateurs et les amener vers différentes parties de l’application.

Le contrôle Hub XAML fournit des éléments pour vous aider à mettre en œuvre plus facilement le modèle de conception Hub pour votre application. À la différence d’un contrôle GridView ou d’un contrôle ListView qui affiche les données d’une seule source, chaque section Hub peut afficher les données de différentes sources. Vous pouvez utiliser n’importe quel contenu XAML pour créer une page Hub enrichie sur le plan visuel. Pour vous lancer rapidement dans la création d’une application comportant une page Hub, utilisez le modèle Application Hub dans Microsoft Visual Studio 2013.

Ajoutez un en-tête au Hub pour indiquer aux utilisateurs le contexte de votre Hub. Il s’agit souvent du nom de votre application. Vous pouvez utiliser un Header avec un texte simple ou définir un HeaderTemplate qui utilise du contenu XAML. Bien que vous puissiez utiliser du contenu arbitraire dans l’en-tête, gardez à l’esprit que la hauteur de l’en-tête a une incidence sur la quantité d’espace vertical disponible pour le contenu des sections du Hub. L’en-tête est fixe et ne défile pas avec les sections de Hub.

Sections du Hub

Vous placez le contenu de votre Hub dans différents contrôles HubSection. Comme le Hub, chaque HubSection a un Header et une propriété HeaderTemplate que vous pouvez utiliser pour définir un en-tête facultatif pour la section. Vous pouvez également rendre l’en-tête de section interactif. En règle générale, l’utilisateur peut appuyer sur un en-tête interactif pour atteindre la page de section d’application correspondante. Quand sa propriété IsHeaderInteractive est true, l’en-tête par défaut comprend un glyphe chevron et les états visuels "Pointer" et "Appuyé". Si vous utilisez un HeaderTemplate personnalisé, fournissez des signaux visuels pour indiquer que l’en-tête est interactif.

Vous n’ajoutez pas directement du contenu à une section Hub mais vous définissez le contenu de votre HubSection dans un objet DataTemplate. Le contenu peut être défini inline ou être lié à une source de données. Tout XAML valide peut être utilisé dans une section du Hub.

Création d’un Hub

Cet exemple montre le code XAML de base utilisé pour créer un contrôle Hub.

<Hub Header="News">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>   
                <TextBlock Text="The most recent news will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Tech page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Sports page." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>

Cet exemple crée ce Hub.

Contrôle de Hub simple

 

Windows 8.1 ajoute l’élément Hyperlink au modèle objet texte XAML dans l’espace de nomsWindows.UI.Xaml.Documents.

L’élément Hyperlink vous permet d’ajouter un lien hypertexte à un bloc de texte. Le lien hypertexte est traité comme le reste du texte et participe aux sauts de ligne. Lorsqu’il est indiqué comme un lien hypertexte, le texte s’affiche dans une couleur spécifique et lors d’un appui dessus, l’URI spécifié dans la propriété NavigateUriest atteint.

Voici un bloc de texte auquel est incorporé un élément Hyperlink.

Texte avec lien hypertexte

 

Cet exemple crée le texte illustré précédemment. L’élément Hyperlink est intégré au reste du texte et entraîne l’ouverture du Centre de développement Windows quand l’utilisateur appuie dessus.

<RichTextBlock Width="200" Style="{StaticResource BasicRichTextStyle}">
    <Paragraph>Hyperlinks let you give readers a visual hint that certain text links to other content.
        <Hyperlink NavigateUri="https://dev.windows.com">Read more on the Windows Dev Center</Hyperlink>
        ... Text in a Hyperlink element is treated like the rest of the text and participates in line breaking.
    </Paragraph>
</RichTextBlock>

[Obtenir l’exemple Flyout et MenuFlyout XAML maintenant.]

Windows 8.1 introduit un nouveau contrôle pour XAML qui permet d’afficher provisoirement une liste de commandes ou d’options liée à l’opération en cours : le contrôle MenuFlyout.

Bouton avec menu volant

 

Un MenuFlyout affiche une interface utilisateur légère (appelé menu volant) qui peut être fermée rapidement en cliquant ou en appuyant en dehors du menu. Utilisez-le pour proposer à l’utilisateur une liste contextuelle de commandes ou d’options simples. Un menu volant ne doit apparaître qu’en réponse à une pression ou un clic de l’utilisateur et il se ferme toujours lorsque l’utilisateur appuie à l’extérieur du menu.

Vous définissez le contenu du menu en ajoutant des objets MenuFlyoutItem, ToggleMenuFlyoutItem et MenuFlyoutSeparator au MenuFlyout. Ces objets permettent de :

Il est courant d’attacher un menu volant à un bouton, c’est pourquoi le contrôle Button propose une nouvelle propriété Flyout pour simplifier l’attachement et l’ouverture d’un contrôle MenuFlyout. Un menu volant attaché à un bouton s’ouvre automatiquement lors d’un clic sur le bouton.

Vous pouvez également attacher un contrôle MenuFlyout à n’importe quel objet FrameworkElement en utilisant la propriété jointe FlyoutBase.AttachedFlyout. Si tel est le cas, vous devez répondre à une interaction dans le FrameworkElement, par exemple Tapped, et ouvrir le MenuFlyout dans votre code.

Création d’un MenuFlyout

Cet exemple crée le contrôle Button avec un MenuFlyout comme indiqué dans l’illustration précédente.

<Button Content="Options">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
            <MenuFlyoutSeparator/>
            <ToggleMenuFlyoutItem Text="Shuffle" IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
            <ToggleMenuFlyoutItem Text="Repeat" IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

SettingsFlyout

[Obtenir l’exemple Paramètre d’application maintenant.]

Windows 8.1 propose un nouveau contrôle pour XAML qui vous permet de créer facilement des menus volants de paramètres d’application conformes aux recommandations en matière de conception et présentant les comportements appropriés : le contrôle SettingsFlyout.

SettingsFlyout

 

Tout comme un contrôle Page, un contrôle SettingsFlyout peut être déclaré en XAML en tant qu’élément racine d’un document, avec un attribut x:Class spécifié dans une sous-classe de SettingsFlyout. Vous pouvez définir la largeur du menu volant Paramètres, mais la hauteur correspond toujours à la hauteur totale de l’écran.

Un SettingsFlyout possède une section d’en-tête et une section de contenu. L’en-tête contient un bouton de retour, un titre et une icône facultative. Définissez le HeaderBackground et HeaderForeground pour correspondre aux couleurs de votre application. Par défaut, l’icône représente l’icône réduite de votre application. Vous pouvez spécifier une autre icône en définissant la propriété IconSource. Le bouton de retour est toujours visible.

Affichage et fermeture du SettingsFlyout

Les utilisateurs peuvent accéder à un menu volant Paramètres via l’icône Paramètres. Vous pouvez afficher par programme un contrôle SettingsFlyout en appelant la méthode Show ou la méthode ShowIndependent et le fermer en appelant sa méthode Hide.

Par défaut, le bouton de retour ferme le menu volant Paramètres. Si un contrôle SettingsFlyout est affiché en appelant Show, un clic sur le bouton de retour ferme le menu volant et rouvre le volet des paramètres. Si un SettingsFlyout est affiché en appelant ShowIndependent, un clic sur le bouton de retour ferme le menu volant et renvoie l’utilisateur dans l’application. Par exemple, si vous ouvrez un contrôle SettingsFlyout à partir d’un bouton de paramètres dans votre application, vous appelez ShowIndependent afin que les utilisateurs retournent directement dans votre application quand ils ferment le menu volant.

Un seul contrôle SettingsFlyout peut être affiché à un même moment. L’appel de Show sur un SettingsFlyout entraîne la fermeture de tout autre SettingsFlyout actuellement affiché.

Vous pouvez remplacer le comportement par défaut du bouton de retour en gérant l’événement BackClick. Cet événement est déclenché chaque fois que l’utilisateur clique sur le bouton de retour. Pour remplacer le comportement par défaut, créez un gestionnaire d’événements pour l’événement et définissez la propriété BackClickEventArgs.Handled à true.

Connexion au SettingsPane

Vous devez manuellement associer le contrôle SettingsFlyout à l’objet SettingsPane de l’application. Pour ce faire, gérez l’événement SettingsPane.CommandsRequested et ajoutez un SettingsCommand à la collection ApplicationCommands. Le SettingsCommand a une étiquette pour votre SettingsFlyout qui s’affiche sur l’icône Paramètres et spécifie une méthode qui est exécutée quand un utilisateur sélectionne la commande dans l’icône Paramètres. Dans cette méthode, vous créez une instance du contrôle SettingsFlyout et l’affichez.

Création d’un SettingsFlyout

Bg182878.wedge(fr-fr,WIN.10).gifPour ajouter un SettingsFlyout dans Visual Studio

  1. Sélectionnez Projet > Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Menu volant des paramètres dans le volet du milieu.

  3. Tapez un nom pour le fichier de menu volant Paramètres et cliquez sur Ajouter. Dans cet exemple, le nom du menu volant Paramètres est UpdateSettingsFlyout.

    Remarque  Quand vous ajoutez un menu volant Paramètres, vous créez une classe portant le nom que vous spécifiez et dérivant de SettingsFlyout. Pour instancier votre menu volant Paramètres, utilisez le nom que vous avez spécifié, tel que new UpdateSettingsFlyout().

Cet exemple crée le contrôle SettingsFlyout comme indiqué dans l’illustration précédente.

<SettingsFlyout
    x:Class="SettingsFlyoutExample.UpdateSettingsFlyout"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsFlyoutExample"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="App Updates"
    d:DesignWidth="346"
    Width="346" 
    HeaderBackground="#FF2B4A80">
    <SettingsFlyout.Resources>
        <Style x:Key="SettingsFlyoutSectionStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="0,0,0,39"/>
        </Style>
    </SettingsFlyout.Resources>

    <!-- This stack panel acts as a root panel for vertical layout of the content sections. -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The stack panels below define individual content sections. -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                                 Text="Automatic updates" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Turn automatic updating on or off.
                </TextBlock.Text>
            </TextBlock>
            <ToggleSwitch Header="Download updates automatically" />
            <ToggleSwitch Header="Install updates automatically" />

        </StackPanel>

        <!-- Define more Content Sections below as necessary. -->

    </StackPanel>
</SettingsFlyout>

Cet exemple explique comment ajouter le SettingsFlyout au volet Paramètres.

public MainPage()
{
    this.InitializeComponent();

    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}

void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsCommand updateSetting = 
        new Windows.UI.ApplicationSettings.SettingsCommand("AppUpdateSettings", "App updates", (handler) =>
    {
        UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
        updatesFlyout.Show();

    });

    args.Request.ApplicationCommands.Add(updateSetting);
}

Cet exemple montre comment ouvrir le SettingsFlyout à partir d’un bouton dans votre application.

<Button Content="App update settings" Click="UpdateSettingsButton_Click"/>

private void UpdateSettingsButton_Click(object sender, RoutedEventArgs e)
{
    UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
    updatesFlyout.ShowIndependent();
}

TimePicker

[Obtenir l’exemple de contrôles DatePicker et TimePicker XAML maintenant.]

Windows 8.1 introduit un nouveau contrôle pour XAML qui permet à un utilisateur de sélectionner une valeur d’heure dans votre application : le contrôle TimePicker.

TimePicker

 

Le sélecteur d’heure offre aux utilisateurs une méthode standard de sélection d’une heure à l’aide d’une entrée tactile, de la souris ou du clavier. Vous pouvez utiliser le contrôle TimePicker dans sa forme par défaut avec peu de code XAML ou d’autre code, ou vous pouvez le personnaliser de différentes façons. Le TimePicker peut utiliser une horloge de 12 heures ou de 24 heures.

Création d’un TimePicker

Cet exemple montre comment créer un TimePicker simple avec un en-tête.

<TimePicker x:Name=arrivalTimePicker Header="Arrival Time"/>

Cet exemple montre comment créer un TimePicker avec une horloge 24 heures.

<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock"/>

Le TimePicker dans cet exemple ressemble à cela. Le sélecteur AM/PM est automatiquement masqué.

TimePicker avec horloge de 24 heures

 

Vous pouvez définir l’heure dans le code ou lier le contrôle à une instance de TimeSpan. Ici, le TimePicker est défini dans le code à une valeur par défaut égale à 8:00 A.M.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default time to 8 A.M.
    arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
}

Vous pouvez définir l’incrément dans le sélecteur de minute sur une valeur adaptée à votre application. Ici, l’incrément de minutes est égal à 15 minutes.

<TimePicker x:Name=arrivalTimePicker Header="Arrival Time" MinuteIncrement="15"/>

Ce TimePicker se présente ainsi quand le sélecteur de minutes est ouvert.

TimePicker avec incréments de 15 minutes

 

Le TimePicker prend également en charge les dispositions verticales en définissant sa propriété Orientation. Il est personnalisable : vous pouvez utiliser les styles et les modèles pour personnaliser presque tous les aspects du TimePicker et de son contenu.

Mises à jour de FlipView

[Obtenir l’exemple de contrôle FlipView XAML maintenant.]

Le contrôle FlipView XAML prend en charge trois modes de navigation : tactile, par bouton et par programme. Quand un utilisateur navigue par mouvement tactile, les éléments FlipView défilent avec fluidité. Toutefois, dans le cas d’une navigation à l’aide de la souris, du clavier ou par programme, l’animation ne se produit pas et les éléments s’affichent directement. Cela est source d’incohérence entre les modes de navigation.

Windows 8.1 ajoute la nouvelle propriété UseTouchAnimationsForAllNavigation au contrôle FlipView pour permettre une expérience utilisateur cohérente entre tous les modes de navigation. Quand vous affectez la valeur true à cette propriété, la même animation se produit quel que soit le type de navigation utilisé.

En-têtes des contrôles ComboBox, DatePicker, TimePicker, Slider et Edit

[Obtenir l’exemple Contrôles fondamentaux XAML maintenant.]

Certains contrôles, tels que ComboBox, sont généralement accompagnés d’une étiquette qui décrit leur contexte. L’ajout d’une étiquette à ces contrôles peut s’avérer peu pratique, et nécessite l’utilisation d’éléments supplémentaires, tels que des objets TextBlock et StackPanel, pour générer la disposition adéquate.

Windows 8.1 ajoute les propriétés Header et HeaderTemplate à plusieurs contrôles afin de faciliter leur étiquetage. Ces contrôles possèdent les nouvelles propriétés :

Le Header par défaut ne peut pas être testé par sélection et n’accepte pas le focus ou une entrée clavier ou souris. Une valeur null ou une chaîne vide crée un en-tête vide. Un en-tête vide n’occupe pas d’espace ou n’a pas d’incidence sur la disposition.

Vous pouvez utiliser un HeaderTemplate si vous avez besoin d’autre chose que d’un en-tête de texte simple. Un HeaderTemplate peut contenir du code XAML valide, notamment des éléments qui peuvent être testés par sélection, par exemple un Button.

Voici comment ajouter un Header à un ComboBox et un PasswordBox.

<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

Cet exemple crée ces contrôles.

Un ComboBox avec en-tête

 

Un PasswordBox avec en-tête

 

Dans l’exemple suivant, un HeaderTemplate dans un RichEditBox en lecture seule contient un contrôle Button. Lorsque l’utilisateur clique sur le bouton, la zone d’édition riche devient modifiable et l’en-tête est modifié.

<RichEditBox x:Name="richTextBox1" IsReadOnly="True">
    <RichEditBox.HeaderTemplate>
        <DataTemplate>
            <Button Content="Click to edit" Click="Button_Click"/>
        </DataTemplate>
    </RichEditBox.HeaderTemplate>
</RichEditBox>

private void Button_Click(object sender, RoutedEventArgs e)
{
    richTextBox1.IsReadOnly = false;
    richTextBox1.HeaderTemplate = null;
    richTextBox1.Header = "Editable RichEditBox";
}

Cet exemple crée ce contrôle RichEditBox.

RichEditBox avec modèle d’en-tête

 

Lorsque l’utilisateur clique sur le bouton, la zone d’édition riche devient modifiable et l’en-tête est modifié ainsi :

RichEditBox avec en-tête

 

PlaceholderText

Windows 8.1 ajoute la propriété PlaceholderText à plusieurs contrôles qui contiennent du texte. Certains contrôles, tels que ComboBox ou PasswordBox, peuvent nécessiter une entrée utilisateur. Si vous ne souhaitez pas proposer de valeur par défaut ou afficher un contrôle vide, vous pouvez ajouter un texte d’espace réservé comportant des indications contextuelles à l’attention de l’utilisateur.

Ces contrôles possèdent la nouvelle propriété PlaceholderText :

Dans un ComboBox, le texte d’espace réservé est indiqué quand la valeur de SelectedIndex est -1 et le SelectedItem est null. (Ces deux propriétés sont synchronisées en permanence.) Un utilisateur ne peut pas afficher le texte d’espace réservé une fois qu’un élément a été sélectionné. Toutefois, vous pouvez définir par programme la propriété SelectedIndex sur -1 ou la propriété SelectedItem sur null pour que le texte d’espace réservé soit réaffiché.

Dans les contrôles d’édition riche, le texte d’espace réservé apparaît quand les contrôles sont vides. L’utilisateur peut rétablir cet état en supprimant la totalité du texte des contrôles.

Voici comment ajouter un texte d’espace réservé à un ComboBox et à un PasswordBox.

<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

Cet exemple crée ces contrôles :

Un ComboBox avec en-tête

 

Un PasswordBox avec en-tête

 

Mises à jour de WebView

[Obtenir l’exemple de contrôle WebView XAML maintenant.]

Windows 8.1 vous permet d’héberger beaucoup plus facilement le contenu HTML et Web dans vos applications. Dans Windows 8.1, le contrôle WebView résout plusieurs problèmes et ajoute de nouvelles fonctionnalités :

Les éléments d’API WebView suivants sont déconseillés dans Windows 8.1 :

Ces changements sont sans incidence sur les applications Windows 8 exécutées sur Windows 8.1.

Affichage de l’arborescence XAML dans une bitmap

Windows Runtime pour Windows 8.1 ajoute un nouveau type à l’espace de noms Windows.UI.Xaml.Media.Imaging : RenderTargetBitmap.

Ce type fournit deux méthodes clés :

  • RenderTargetBitmap.RenderAsync, qui crée une représentation bitmap d’une arborescence visuelle XAML.

    Remarque  Cette opération restitue de façon asynchrone l’arborescence d’éléments XAML donnée sous la forme d’une bitmap. Cette méthode n’est pas synchronisée avec le rafraîchissement de l’écran et ne garantit pas une synchronisation d’image exacte. Ainsi, la bitmap peut correspondre à une image affichée une fraction de seconde avant ou après le moment supposé de la capture.

  • RenderTargetBitmap.GetPixelsAsync, qui retourne un tableau d’octets de pixels dans un format spécifique.

Voici comment afficher une arborescence d’éléments XAML.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(myElementTree);

myImage.Source = renderTargetBitmap;

RenderTargetBitmap héritant d’ImageSource, il est possible de le définir directement en tant que source d’un objet Image sans appeler GetPixelsAsync pour obtenir et afficher les données de la bitmap.

Voici comment écrire dans un fichier la bitmap affichée.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.Render(myElementTree);
var pixels = await renderTargetBitmap.GetPixelsAsync();

var picker = new FileSavePicker();
// Picker setup
var file = await picker.PickSaveFileAsync();
// File validation

using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    var encoder = await 
        BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);
    
    encoder.SetPixelData(BitmapPixelFormat.Rgba8, 100, 0, 96, 96,         
        await renderTargetBitmap.GetPixelsAsync());
        
    await encoder.FlushAsync();
}

Autres mises à jour de contrôle

  • Améliorations apportées à ScrollViewer XAML :

    Windows 8.1 ajoute les propriétés ScrollViewer (TopHeader, LeftHeader et TopLeftHeader) qui permettent de définir des zones « figées » comme les volets figés dans Microsoft Excel. Le contenu de ces zones ne défile pas ou ne défile que dans une direction avec le contenu principal. L’en-tête supérieur gauche ne défile pas, l’en-tête gauche défile verticalement, mais pas horizontalement, tandis que l’en-tête supérieur défile horizontalement, mais pas verticalement.

  • Améliorations apportées à la liaison de données XAML :

    Windows 8.1 ajoute les éléments d’API suivants :

    • L’événement FrameworkElement.DataContextChanged permet de répondre aux modifications de la valeur de la propriété DataContext. Vous pouvez utiliser cet événement pour mettre à jour les propriétés de contrôle manuellement au lieu de recourir à la liaison de données. Cela est utile pour traiter les problèmes de performance de la liaison de données.

    • Les propriétés Binding.FallbackValue et Binding.TargetNullValue permettent de définir des valeurs par défaut pour l’affichage quand une liaison ne peut pas résoudre une valeur ou quand elle est résolue en valeur null.

    • La propriété Binding.UpdateSourceTrigger, la méthode FrameworkElement.GetBindingExpression et la classe BindingExpression permettent de changer le comportement par défaut des liaisons bidirectionnelles à la propriété TextBox.Text. Par défaut, les liaisons TextBox.Text ne mettent à jour leur source de liaison que quand le contrôle perd le focus. Définissez UpdateSourceTrigger à PropertyChanged pour mettre à jour la source quand la valeur de la propriété TextBox.Text change. Définissez UpdateSourceTrigger à Explicit pour mettre à jour la source par programme en utilisant la méthode BindingExpression.UpdateSource.

  • Améliorations apportées à la navigation XAML :

    Windows 8.1 ajoute les éléments d’API suivants :

    • Nouvelles propriétés Frame BackStack, ForwardStack, BackStackProperty et ForwardStackProperty. Utilisez ces propriétés pour modifier par programme les piles de navigation vers l’arrière et vers l’avant en ajoutant ou supprimant des objets PageStackEntry. Cela est utile dans les scénarios tels que la suppression d’une page de connexion de l’historique de navigation après la connexion d’un utilisateur ou l’effacement de la pile de navigation quand l’application est relancée avec un autre contrat d’activation.

    • Une surcharge Frame.Navigate qui prend une valeur de paramètre NavigationTransitionInfo. Utilisez cette surcharge pour naviguer jusqu’à une page en utilisant une transition animée particulière au lieu d’une transition définie dans le XAML de la page. Vous pouvez également accéder à la valeur de paramètre dans les gestionnaires d’événements de navigation via les classes NavigationEventArgs et NavigatingCancelEventArgs.

    • Une propriété NavigatingCancelEventArgs.Parameter. Utilisez cette propriété pour annuler une navigation en fonction des valeurs de paramètre de navigation.

  • Thèmes dynamiques :

    Dans Windows 8, les thèmes clair et foncé pour le contraste élevé sont chargés quand l’application démarre. Toutefois, si l’utilisateur modifie le thème alors que l’application est en cours d’exécution, le système de thèmes XAML ne peut pas le détecter et les thèmes ne changent pas dans l’application. Dans Windows 8.1, le système de thèmes XAML peut détecter les modifications de thème apportées au moment de l’exécution, et recharger les ressources. Les ressources par défaut partagées pour les contrôles XAML effectuent cette opération automatiquement dans Windows 8.1. Pour activer ce comportement dans un modèle personnalisé que vous définissez, référencez la ressource spécifique au thème en utilisant la nouvelle extension de balisage ThemeResource. Toute ressource que vous configurez différemment thème par thème est définie dans plusieurs dictionnaires de ressources, à raison d’un par thème. Ces dictionnaires de ressources sont fusionnés dans l’ensemble global de ressources XAML associé à une application. Le dictionnaire adéquat est chargé dynamiquement quand le système détecte un changement de thème, même si celui-ci se produit alors que l’application est en cours d’exécution.

  • Application de thèmes contrôle par contrôle :

    Dans Windows 8, le thème est défini à l’aide de la propriété Application.RequestedTheme et s’applique à toute l’interface utilisateur de l’application. Application.RequestedTheme ne peut pas être modifié au moment de l’exécution. Dans Windows 8.1, vous pouvez demander qu’un élément d’interface utilisateur spécifique utilise un autre thème que celui défini par Application.RequestedTheme. Pour ce faire, vous définissez RequestedTheme en tant qu’attribut sur les éléments sur lesquels vous souhaitez utiliser un thème différent. Ce RequestedTheme est une propriété de la classe FrameworkElement et existe donc sur pratiquement tous les éléments d’interface utilisateur. La valeur RequestedTheme par élément peut être définie au moment de l’exécution.

  • GetOpenPopups :

    Quand vous créez un contrôle Popup XAML, il n’existe pas dans l’arborescence visuelle. Si vous voulez fermer les fenêtres contextuelles en raison de la navigation, de la suspension ou pour d’autres raisons et que vous n’avez pas enregistré une référence, il peut être difficile de trouver et de fermer les éléments Popup avec du code Windows 8. Windows 8.1 propose l’API VisualTreeHelper.GetOpenPopups, qui permet de retourner toutes les fenêtres contextuelles ouvertes dans une liste. Vous pouvez ensuite affecter la valeur false à IsOpen pour toutes les fenêtres contextuelles que vous souhaitez fermer.

  • Accessibilité et UI Automation :

    Windows 8.1 ajoute des homologues pour certains contrôles qui existaient dans Windows 8 mais qui utilisaient la classe FrameworkElementAutomationPeer pour la prise en charge. Par exemple, le contrôle AppBar a un homologue dédié. Si vous créez des homologues personnalisés pour des classes, vous pouvez vous baser sur ces homologues afin de réutiliser les implémentations d’API de modèle existantes durant l’implémentation de votre propre homologue Microsoft UI Automation. Il existe également une prise en charge du code managé pour les modèles qui ont été ajoutés à l’infrastructure UI Automation globale de Windows 8. Par exemple, il existe une interface IStylesProvider qui vous permet d’implémenter le modèle Styles sur un homologue de contrôle XAML. Enfin, il existe une propriété jointe AccessibilityView au niveau de l’application. Elle vous permet de paramétrer l’affichage d’un élément d’interface utilisateur donné dans les différentes représentations de l’arborescence UI Automation perçues par un client UI Automation — en indiquant, par exemple, si votre élément doit apparaître dans l’arborescence des contenus ou dans l’arborescence des contrôles.

  • Propriété MaxLines :

    (S’applique aux contrôles TextBlock, RichTextBlock, et RichTextBlockOverflow)

    Cette propriété permet de spécifier le nombre maximum de lignes de texte qui s’affichent dans un bloc de texte. Le contrôle de texte ajuste sa hauteur afin d’afficher un nombre de lignes inférieur ou égal au nombre spécifié, indépendamment de la taille de la police, du style de police ou de la longueur du texte.

  • Propriété PreventKeyboardDisplayOnProgrammaticFocus :

    (S’applique aux contrôles TextBox, RichEditBox, et PasswordBox)

    Définissez cette propriété sur true pour empêcher l’affichage du clavier tactile visuel quand le focus est défini par programme sur une zone de texte. Par défaut, le clavier tactile apparaît chaque fois que le focus est positionné sur une zone de texte modifiable et que l’entrée la plus récente a été générée par un mouvement tactile. Cela se produit que le focus soit défini par programme ou par une interaction utilisateur. Certaines situations ne justifient pas nécessairement l’affichage du clavier quand le focus est défini par programme. Par exemple, vous pouvez juger opportun d’empêcher que le clavier recouvre une partie de votre interface utilisateur tant que l’utilisateur n’est pas prêt à poursuivre son interaction avec l’application.

  • Propriété SelectionHighlightColor :

    (S’applique aux contrôles TextBlock, TextBox, RichEditBox, RichTextBlock, et PasswordBox)

    Vous pouvez spécifier un SolidColorBrush pour modifier la couleur de surbrillance d’un contrôle de texte en fonction de la personnalisation de votre application.

  • Événement Paste :

    (S’applique aux contrôles TextBox, RichEditBox, et PasswordBox)

    Vous pouvez fournir une gestion personnalisée de l’événement Paste dans les contrôles de texte modifiables dans votre application.

  • Valeur TextWrapping.WrapWholeWords :

    Utilisez cette valeur pour empêcher le renvoi à la ligne au milieu du mot. Le renvoi à la ligne se produira alors avant le dernier mot du bloc de texte.

    Cette valeur permet d’insérer un saut de ligne si la ligne dépasse la largeur de bloc disponible. Toutefois, une ligne peut dépasser la largeur de bloc si l’algorithme de saut de ligne ne peut pas déterminer une possibilité de saut de ligne, comme dans le cas d’un mot très long se trouvant dans un conteneur à largeur fixe dépourvu de dispositif de défilement.

  • Valeur TextTrimming.Clip :

    Grâce à cette valeur, le texte est tronqué au niveau d’un pixel, ce qui permet de couper visuellement les glyphes superflus.

  • Valeur TextTrimming.CharacterEllipsis :

    Grâce à cette valeur, le texte est tronqué au niveau d’un caractère, plutôt qu’au niveau d’un mot. Des points de suspension (...) apparaissent à la place du texte restant.