Matière acrylique

Acrylique est un type de pinceau qui produit une texture translucide. Vous pouvez appliquer l’acrylique à des surfaces d’application pour ajouter de la profondeur et établir une hiérarchie visuelle.

API importantes : classe AcrylicBrush, propriété Background

Acrylique dans le thème clair

Acrylique dans le thème foncé

Acrylique et le système Fluent Design

Le système Fluent Design vous aide à créer une interface utilisateur moderne et claire qui incorpore de la lumière, de la profondeur, du mouvement, des matières et une mise à l’échelle. Acrylique est un composant du système Fluent Design qui permet d’ajouter des textures physiques (matières) et de la profondeur à votre application. Pour plus d’informations, consultez Vue d’ensemble de Fluent Design.

Exemples

Galerie WinUI 2
Si vous avez installé l’application WinUI 2 Gallery, cliquez ici pour ouvrir l’application et voir l’acrylique en action.

Obtenir l’application WinUI 2 (Microsoft Store)
Obtenir le code source (GitHub)

Types de fusions d’acrylique

La caractéristique la plus remarquable de l’acrylique est sa transparence. Il existe deux types de fusions d’acrylique qui modifient ce qui est visible au travers de la matière :

• Acrylique en arrière-plan révèle le papier peint du bureau et d’autres fenêtres qui se trouvent derrière l’application active, en ajoutant de la profondeur entre les fenêtres d’application tout en reflétant les préférences définies par l’utilisateur.
• Acrylique dans l’application ajoute de la profondeur dans le cadre de l’application, en fournissant à la fois une mise au point et une hiérarchie.

Évitez de superposer plusieurs surfaces acryliques : plusieurs couches d’acrylique d’arrière-plan peuvent créer des illusions optiques distrayantes.

Quand utiliser l’acrylique

• Utilisez l’acrylique dans l’application pour traiter l’interface utilisateur, par exemple quand des surfaces qui peuvent chevaucher du contenu lors de l’interaction avec celui-ci.
• Utilisez l’acrylique en arrière-plan pour des éléments d’interface utilisateur temporaires, tels que des menus contextuels, menus volants et autres éléments qui disparaissent par abandon interactif.
  L’utilisation de l’acrylique dans des scénarios temporaires permet de maintenir une relation visuelle avec le contenu qui a déclenché l’interface utilisateur temporaire.

Si vous utilisez l’acrylique in-app sur les surfaces de navigation, envisagez d’étendre le contenu sous le volet acrylique pour améliorer le flux dans votre application. NavigationView fait cela pour vous automatiquement. Toutefois, pour éviter de créer un effet de rayures, évitez de placer plusieurs éléments en acrylique bord à bord. Cela peut créer une sorte de rayure indésirable à la jointure entre deux surfaces floues. L’acrylique est un outil qui permet d’apporter une harmonie visuelle à vos conceptions, mais lorsqu’elle est utilisée de manière incorrecte, elle peut entraîner un bruit visuel.

Pour déterminer la meilleure façon d’incorporer de l’acrylique dans votre application, envisagez les modèles d’utilisation suivants :

Volets verticaux

Pour les volets verticaux ou les surfaces qui aident à compartimenter le contenu de votre application, nous vous recommandons d’utiliser un arrière-plan opaque plutôt que l’acrylique. Si vos volets verticaux s’ouvrent par-dessus le contenu, comme dans les modes Compact ou Minimal de NavigationView, nous vous conseillons d’utiliser l’acrylique dans l’application pour conserver le contexte de la page lorsque ce type de volet est ouvert.

Surfaces temporaires

Pour les applications avec des menus contextuels, des menus volants, des fenêtres contextuelles non modales ou des volets d’arrêt clair, il est recommandé d’utiliser l’acrylique d’arrière-plan, en particulier si ces surfaces dessinent en dehors du cadre de la fenêtre d’application main.

De nombreux contrôles XAML dessinent l’acrylique par défaut. MenuFlyout, AutoSuggestBox, ComboBox et des contrôles similaires avec des fenêtres contextuelles d’arrêt clair utilisent tous l’acrylique lorsqu’ils sont ouverts.

Notes

Le rendu des surfaces acryliques sollicite les ressources du processeur graphique de manière intensive, ce qui peut accroître la consommation d’énergie de l’appareil et réduire l’autonomie de sa batterie. Les effets acryliques sont automatiquement désactivés lorsqu’un appareil passe en mode Économiseur de batterie. Les utilisateurs peuvent désactiver les effets acryliques pour toutes les applications en désactivant les effets de transparence dans Les paramètres > Couleurs de personnalisation > .

Convivialité et capacité d’adaptation

L’acrylique adapte automatiquement son apparence à un vaste éventail d’appareils et de contextes.

En mode Contraste élevé, les utilisateurs continuent de voir la couleur d’arrière-plan qu’ils ont choisie, au lieu de l’acrylique. En outre, l’acrylique en arrière-plan et l’acrylique dans l’application apparaissent toutes deux comme une couleur unie :

• Lorsque l’utilisateur désactive les effets de transparence dans Paramètres > Couleurs de personnalisation > .
• Lorsque le mode Économiseur de batterie est activé.
• Lorsque l’application s’exécute sur du matériel bas de gamme.

En outre, seule l’acrylique en arrière-plan remplace sa translucidité et sa texture par une couleur unie :

• Lorsqu’une fenêtre d’application sur le bureau est désactivée.
• Lorsque l’application s’exécute sur Xbox, HoloLens ou en mode tablette.

Considérations relatives à la lisibilité

Il est important de s’assurer que tout le texte présenté aux utilisateurs dans votre application est conforme à des taux de contraste (voir Exigences de texte accessible). Nous avons optimisé les ressources acryliques afin que le texte réponde aux ratios de contraste par-dessus l’acrylique. Nous vous déconseillons de placer du texte de couleur accentuation sur vos surfaces acryliques, car ces combinaisons sont susceptibles de ne pas répondre aux exigences de rapport de contraste minimal à la taille de police par défaut de 14 px. Essayez d’éviter de placer des liens hypertexte sur des éléments acryliques. En outre, si vous choisissez de personnaliser la couleur de teinte acrylique ou le niveau d’opacité, gardez à l’esprit l’impact sur la lisibilité.

Ressources de thèmes acryliques

Vous pouvez facilement appliquer l’acrylique aux surfaces de votre application à l’aide des ressources de thème AcryliqueBrush XAML ou acryliqueBrush prédéfinies. Tout d’abord, vous devez décider si vous souhaitez utiliser l’acrylique dans l’application ou en arrière-plan. Veillez à passer en revue les modèles d’application courants décrits plus haut dans cet article pour obtenir des recommandations.

Nous avons créé une collection de ressources de thème de pinceaux pour les types d’acryliques en arrière-plan et dans l’application qui respectent le thème de l’application et reviennent à des couleurs unies selon les besoins. Pour WinUI 2, ces ressources de thème se trouvent dans le fichier de thèmes AcryliqueBrush themeresources, dans le référentiel GitHub microsoft-ui-xaml. Les ressources qui incluent l’arrière-plan dans leurs noms représentent l’acrylique d’arrière-plan, tandis qu’InApp fait référence à l’acrylique in-app.

Pour peindre une surface spécifique, appliquez l’une des ressources de thème WinUI 2 aux arrière-plans des éléments comme vous le feriez pour toute autre ressource de pinceau.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

Pinceau acrylique personnalisé

Vous pouvez choisir d’ajouter une teinte à l’acrylique de votre application pour afficher une marque ou assurer un équilibre visuel avec les autres éléments de la page. Pour afficher la couleur plutôt que des nuances de gris, vous devez définir vos propres pinceaux acryliques en utilisant les propriétés suivantes.

• TintColor : couleur ou teinte de la couche de superposition.
• TintOpacity : opacité de la couche de couleur.
• TintLuminosityOpacity : contrôle la quantité de saturation de l’arrière-plan autorisée filtrer au travers de la surface acrylique.
• BackgroundSource : indicateur permettant de spécifier si vous souhaitez utiliser l’acrylique en arrière-plan ou dans l’application.
• FallbackColor : couleur unie qui remplace l’acrylique en mode Économiseur de batterie. Pour l’acrylique en arrière-plan, la couleur de secours remplace également l’acrylique lorsque l’application ne se trouve pas dans la fenêtre active du bureau ou quand elle s’exécute sur smartphone ou sur Xbox.

Pour ajouter un pinceau acrylique, définissez les trois ressources pour les thèmes à contraste élevé, clair et foncé. Notez qu’en contraste élevé, nous recommandons d’utiliser un SolidColorBrush avec la même x:Key que l’AcrylicBrush sombre/clair.

Notes

Si vous ne spécifiez pas de valeur pour TintLuminosityOpacity, le système ajuste automatiquement sa valeur en fonction de vos valeurs TintColor et TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

L’exemple suivant montre comment déclarer AcrylicBrush dans le code. Si votre application prend en charge plusieurs cibles du système d’exploitation, veillez à vérifier que cette API est disponible sur l’ordinateur de l’utilisateur.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

Étendre l’acrylique dans la barre de titre

Pour donner à la fenêtre de votre application un aspect épuré, vous pouvez utiliser l’acrylique dans la zone de la barre de titre. Cet exemple étend l’acrylique dans la barre de titre en définissant les propriétés ButtonBackgroundColor et ButtonInactiveBackgroundColor de l’objet ApplicationViewTitleBar sur Colors.Transparent.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

Ce code peut être placé dans la méthode OnLaunched de votre application (App.xaml.cs), après l’appel de Window.Activate, comme illustré ici, ou dans la première page de votre application.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

En outre, vous devez dessiner le titre de votre application, lequel apparaît normalement automatiquement dans la barre de titres, avec un contrôle TextBlock utilisant CaptionTextBlockStyle. Pour plus d’informations, voir Personnalisation de la barre de titre.

Pratiques conseillées et déconseillées

• Utilisez l’acrylique sur des surfaces temporaires.
• Étendez l’acrylique vers au moins un bord de votre application pour fournir une expérience fluide, en la mélangeant de manière subtile à l’environnement de l’application.
• Ne placez pas l’acrylique de bureau sur les grandes surfaces d’arrière-plan de votre application.
• Ne placez pas plusieurs volets acryliques les uns à côté des autres, car cela entraîne une couture visible indésirable.
• Ne placez pas du texte de couleur accentuée sur des surfaces acryliques.

Comment nous avons conçu l’acrylique

Nous avons affiné les composants clés de l’acrylique pour obtenir ses propriétés et son apparence uniques. Nous avons commencé par travailler sur la translucidité, le flou et le bruit pour ajouter une profondeur visuelle et une dimension aux surfaces planes. Nous avons ajouté au mode de fusion une couche d’exclusion pour préserver le contraste et la lisibilité de l’interface utilisateur placée sur un arrière-plan acrylique. Enfin, nous avons ajouté des teintes de couleur pour permettre la personnalisation. Ces couches s’additionnent pour constituer un support pratique et moderne.

La recette de l’acrylique est la suivante : arrière-plan, flou, fusion d’exclusion, superposition de couleurs/teintes, bruit

Obtenir l’exemple de code

• Exemple de galerie WinUI 2 : affichez tous les contrôles XAML dans un format interactif.

Articles connexes

Vue d’ensemble de Fluent Design