Matière acrylique

Image Hero

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 un thème clair Acrylique dans un thème clair

Acrylique dans un thème foncé Acrylique dans un 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.

Résumé de la vidéo

Exemples

Image

Galerie de contrôles XAML
Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir Acrylique en action.

Obtenir l’application Galerie de contrôles XAML (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 acryliques qui modifient ce qui est visible par le matériel :

  • L' arrière-plan acrylique affiche le papier peint du bureau et les autres fenêtres qui se trouvent derrière l’application actuellement active, en ajoutant une profondeur entre les fenêtres d’application tout en célébrant les préférences de personnalisation de 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.

Acrylique en arrière-plan

Acrylique dans l’application

Évitez la superposition de plusieurs surfaces acryliques : plusieurs couches d’arrière-plan acryliques peuvent créer des illusions optiques gênantes.

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 in-app acrylique sur des surfaces de navigation, envisagez d’étendre le contenu sous le volet acrylique pour améliorer le Flow 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. Acrylique est un outil qui permet d’adapter l’harmonie visuelle à vos conceptions, mais lorsqu’il est utilisé de manière incorrecte, cela 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 lanceurs, des fenêtres contextuelles non modales ou des volets avec fermeture de la lumière, il est recommandé d’utiliser l’arrière-plan acrylique, en particulier si ces surfaces dessinent en dehors du cadre de la fenêtre principale de l’application.

Modèle d’application de courrier utilisant un menu volant informatif

De nombreux contrôles XAML dessinent en acrylique par défaut. Les contrôles MenuFlyout, AutoSuggestBox, ComboBoxet similaires avec des menus contextuels avec fermeture de la lumière 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 Paramètres > les 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 > personnalisation > les couleurs.
  • 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 :

  • Quand une fenêtre d’application sur le bureau est désactivée.
  • quand l’application est en cours d’exécution sur Xbox, HoloLens ou dans tablet mode_ (Windows 10 uniquement).

Considérations relatives à la lisibilité

Il est important de s’assurer que tout texte que votre application présente aux utilisateurs répond à des ratios de contraste (consultez exigences de texte accessibles). Nous avons optimisé les ressources acryliques de telle sorte que le texte respecte les ratios de contraste par-dessus acrylique. Nous vous déconseillons de placer du texte en couleur des accents sur vos surfaces acryliques, car ces combinaisons sont susceptibles de ne pas passer des exigences de taux de contraste minimales à la taille de police par défaut 14px. Essayez d’éviter de placer des liens hypertexte sur des éléments acryliques. De même, si vous choisissez de personnaliser la couleur de teinte acrylique ou le niveau d’opacité, gardez l’impact sur la lisibilité à l’esprit.

Ressources de thèmes acryliques

Vous pouvez facilement appliquer acrylique aux surfaces de votre application à l’aide de la ACRYLICBRUSH XAML ou de ressources de thème AcrylicBrush prédéfinies. Tout d’abord, vous devez décider s’il faut utiliser l’application ou l’arrière-plan acrylique. 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 pinceau pour les types acryliques d’arrière-plan et dans l’application qui respectent le thème de l’application et remontent aux couleurs unies en fonction des besoins. pour WinUI 2, ces ressources de thème se trouvent dans le fichier AcrylicBrush themeresources, dans le référentiel microsoft-ui-xaml GitHub. Les ressources qui incluent un arrière-plan dans leurs noms représentent l’arrière-plan acrylique, tandis que 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 d’éléments, comme vous le feriez pour n’importe quelle autre ressource pinceau.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

Pinceau acrylique personnalisé

Vous pouvez choisir d’ajouter une teinte de couleur à l’acrylique de votre application pour afficher la personnalisation ou fournir un équilibre visuel avec d’autres éléments sur la page. Pour afficher la couleur plutôt que les nuances de gris, vous devez définir vos propres pinceaux acryliques à l’aide des 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’arrière-plan acrylique, la couleur de secours remplace également acrylique lorsque votre application n’est pas dans la fenêtre Active Desktop ou lorsque l’application s’exécute sur le téléphone et la Xbox.

Nuances d’acrylique dans un thème clair

Nuances acrylique dans un thème foncé

Opacité de la luminosité par rapport à l’opacité de la teinte

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&quot;>
        <AcrylicBrush x:Key=&quot;MyAcrylicBrush&quot;
            BackgroundSource=&quot;HostBackdrop&quot;
            TintColor=&quot;#FFFF0000&quot;
            TintOpacity=&quot;0.8&quot;
            TintLuminosityOpacity=&quot;0.5&quot;
            FallbackColor=&quot;#FF7F0000&quot;/>
    </ResourceDictionary>

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

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

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

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(&quot;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 acrylique sur des surfaces transitoires.
  • Étendez acryliquement à au moins un bord de votre application pour fournir une expérience transparente en fusionnant subtilement avec l’environnement de l’application.
  • Ne placez pas le bureau en acrylique 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 se traduit par une jointure visible indésirable.
  • Ne placez pas de texte en couleur des accents sur des surfaces acryliques.

Comment nous avons conçu l’acrylique

Nous avons affiné les composants clés d’acrylique pour obtenir une apparence et des propriétés 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.

Recette de l’acrylique
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

Vue d’ensemble de Fluent Design