Matière acryliqueAcrylic material

Image Hero

Acrylique est un type de pinceau qui produit une texture translucide.Acrylic is a type of Brush that creates a translucent texture. Vous pouvez appliquer l’acrylique à des surfaces d’application pour ajouter de la profondeur et établir une hiérarchie visuelle.You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.

API importantes : classe AcrylicBrush, propriété BackgroundImportant APIs: AcrylicBrush class, Background property

Acrylique dans un thème clair Acrylique dans un thème clairAcrylic in light theme Acrylic in light theme

Acrylique dans un thème foncé Acrylique dans un thème foncéAcrylic in dark theme Acrylic in dark theme

Acrylique et le système Fluent DesignAcrylic and the Fluent Design System

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.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Acrylique est un composant du système Fluent Design qui permet d’ajouter des textures physiques (matières) et de la profondeur à votre application.Acrylic is a Fluent Design System component that adds physical texture (material) and depth to your app. Pour en savoir plus, voir Présentation de Fluent Design pour UWP.To learn more, see the Fluent Design for UWP overview.

Résumé de la vidéoVideo summary

ExemplesExamples

Image

Galerie de contrôles XAMLXAML Controls Gallery
Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir Acrylique en action.If you have the XAML Controls Gallery app installed, click here to open the app and see acrylic in action.

Obtenir l’application Galerie de contrôles XAML (Microsoft Store)Get the XAML Controls Gallery app (Microsoft Store)
Obtenir le code source (GitHub)Get the source code (GitHub)

Types de fusions d’acryliqueAcrylic blend types

La caractéristique la plus remarquable de l’acrylique est sa transparence.Acrylic's most noticeable characteristic is its transparency. Il existe deux types de fusions d’acrylique qui modifient ce qui est visible au travers de la matière :There are two acrylic blend types that change what’s visible through the material:

  • 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.Background acrylic reveals the desktop wallpaper and other windows that are behind the currently active app, adding depth between application windows while celebrating the user’s personalization preferences.
  • 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.In-app acrylic adds a sense of depth within the app frame, providing both focus and hierarchy.

Acrylique en arrière-plan

Acrylique dans l’application

Lorsque vous appliquez plusieurs couches d’acrylique, agissez avec précaution : plusieurs couches d’acrylique en arrière-plan peuvent créer des illusions d’optique perturbantes.Layer multiple acrylic surfaces with caution: multiple layers of background acrylic can create distracting optical illusions.

Quand utiliser l’acryliqueWhen to use acrylic

  • 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.Use in-app acrylic for supporting UI, such as on surfaces that may overlap content when scrolled or interacted with.
  • 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.Use background acrylic for transient UI elements, such as context menus, flyouts, and light-dismissable UI.
    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.Using Acrylic in transient scenarios helps maintain a visual relationship with the content that triggered the transient UI.

Si vous utilisez l’acrylique dans l’application sur des surfaces de navigation, envisagez d’étendre le contenu sous le volet acrylique pour améliorer le flux sur votre application.If you are using in-app acrylic on navigation surfaces, consider extending content beneath the acrylic pane to improve the flow on your app. NavigationView fait cela pour vous automatiquement.Using NavigationView will do this for you automatically. 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.However, to avoid creating a striping effect, try not to place multiple pieces of acrylic edge-to-edge - this can create an unwanted seam between the two blurred surfaces. L’acrylique vous permet d’harmoniser la présentation visuelle de vos conceptions mais, utilisée de manière incorrecte, il peut générer un bruit visuel.Acrylic is a tool to bring visual harmony to your designs, but when used incorrectly, can result in visual noise.

Pour déterminer la meilleure façon d’incorporer de l’acrylique dans votre application, envisagez les modèles d’utilisation suivants :Consider the following usage patterns to decide how best to incorporate acrylic into your app:

Navigation ou exécution de commandes horizontaleHorizontal navigation or commanding

Si votre application n’est pas en mesure d’utiliser NavigationView et que vous prévoyez d’ajouter de l’acrylique vous-même, nous vous recommandons d’utiliser une acrylique relativement translucide, d’une opacité de 60 %.If your app is not able to leverage NavigationView and you plan on adding acrylic on your own, we recommend using relatively translucent acrylic with 60% tint opacity.

Application Cartes utilisant des commandes horizontales dans l’application

En outre, le fait que votre contenu s’étende ou défile sous l’acrylique permet à votre application d’offrir une expérience plus immersive et transparente.In addition, having your content extend or scroll under the acrylic at the top will give your app a more immersive and seamless experience.

Volets verticauxVertical Panes

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.For vertical panes or surfaces that help section off content of your app, we recommend you use an opaque background instead of acrylic. 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.If your vertical panes open on top of content, like in NavigationView's Compact or Minimal modes, we suggest you use in-app acrylic to help maintain the page's context when the user has this pane open.

Surfaces temporairesTransient surfaces

Pour les applications utilisant des menus volants, des menus contextuels non modaux, ou des volets qui disparaissent par abandon interactif, il est recommandé d’utiliser l’acrylique en arrière-plan.For apps with menu flyouts, non-modal popups, or light-dismiss panes, it is recommended to use background acrylic.

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

La plupart de nos contrôles utilisent l’acrylique par défaut.Many of our controls will use acrylic by default. Des contrôles tels que MenuFlyouts, AutoSuggestBox, ComboBox et autres contrôles similaires avec des fenêtres contextuelles disparaissant par abandon interactif utilisent tous l’acrylique temporaire.MenuFlyouts, AutoSuggestBox, ComboBox and similar controls with light-dismiss popups will all use the transient acrylic when they are invoked.

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.Rendering acrylic surfaces is GPU-intensive, which can increase device power consumption and shorten battery life. Les effets acryliques sont automatiquement désactivés lorsque les appareils entrent en mode Économiseur de batterie, et les utilisateurs peuvent désactiver les effets acryliques pour toutes les applications s’ils le souhaitent.Acrylic effects are automatically disabled when devices enter Battery Saver mode, and users can disable acrylic effects for all apps, if they choose.

Convivialité et capacité d’adaptationUsability and adaptability

L’acrylique adapte automatiquement son apparence à un vaste éventail d’appareils et de contextes.Acrylic automatically adapts its appearance for a wide variety of devices and contexts.

En mode Contraste élevé, les utilisateurs continuent de voir la couleur d’arrière-plan qu’ils ont choisie, au lieu de l’acrylique.In High Contrast mode, users continue to see the familiar background color of their choosing in place of acrylic. En outre, l’acrylique en arrière-plan et l’acrylique dans l’application apparaissent toutes deux comme une couleur unie :In addition, both background acrylic and in-app acrylic appear as a solid color:

  • Lorsque l’utilisateur désactive la transparence dans Paramètres > Personnalisation > CouleurWhen the user turns off transparency in Settings > Personalization > Color
  • Lorsque le mode Économiseur de batterie est activéWhen Battery Saver mode is activated
  • Lorsque l’application est exécutée sur du matériel bas de gammeWhen the app runs on low-end hardware

En outre, seule l’acrylique en arrière-plan remplace sa translucidité et sa texture par une couleur unie :In addition, only background acrylic will replace its translucency and texture with a solid color:

  • Quand une fenêtre d’application sur le bureau se désactiveWhen an app window on desktop deactivates
  • Lorsque l’application UWP s’exécute sur un téléphone, une Xbox, HoloLens ou en mode tabletteWhen the UWP app is running on phone, Xbox, HoloLens or tablet mode

Considérations relatives à la lisibilitéLegibility considerations

Il est important de s’assurer que tout le texte présenté aux utilisateurs dans votre application est conforme à des taux de contraste.It’s important to ensure that any text your app presents to users meets contrast ratios. Nous avons optimisé la recette acrylique afin que le texte noir, blanc ou même gris moyen respecte les taux de contraste par-dessus l’acrylique.We’ve optimized the acrylic recipe so that high-color black, white or even medium-color gray text meets contrast ratios on top of acrylic. Les ressources de thème fournies par la plateforme sont définies par défaut sur un contraste de couleur d’une opacité de 80 %.The theme resources provided by the platform default to contrasting tint colors at 80% opacity. Lorsque vous placez un corps de texte hautement coloré sur l’acrylique, vous pouvez réduire l’opacité tout en préservant la lisibilité.When placing high-color body text on acrylic, you can reduce tint opacity while maintaining legibility. En mode sombre, l’opacité de la teinte peut être de 70 %, tandis qu’en mode clair, l’acrylique présente des taux de contraste d’une opacité de 50 %.In dark mode, tint opacity can be 70%, while light mode acrylic will meet contrast ratios at 50% opacity.

Nous vous déconseillons de placer du texte de couleur accentuée sur des surfaces acryliques, car de telles combinaisons sont susceptibles de ne pas satisfaire aux exigences minimales de taux de contraste, avec une taille de texte 15 px.We don't recommend placing accent-colored text on your acrylic surfaces because these combinations are likely to not pass minimum contrast ratio requirements at 15px font size. Essayez d’éviter de placer des liens hypertexte sur des éléments acryliques.Try to avoid placing hyperlinks over acrylic elements. Par ailleurs, si vous choisissez de personnaliser le niveau de couleur ou d’opacité de l’acrylique en dehors des réglages par défaut de la plateforme fournis par la ressource de thème, gardez à l’esprit l’impact possible sur la lisibilité.Also, if you choose to customize the acrylic tint color or opacity level outside of the platform defaults provided by the theme resource, keep the impact on legibility in mind.

Ressources de thèmes acryliquesAcrylic theme resources

Vous pouvez aisément appliquer l’acrylique sur les surfaces de votre application à l’aide de la nouvelle AcrylicBrush XAML ou des ressources de thème AcrylicBrush prédéfinies.You can easily apply acrylic to your app’s surfaces using the new XAML AcrylicBrush or predefined AcrylicBrush theme resources. Tout d’abord, vous devez décider si vous souhaitez utiliser l’acrylique dans l’application ou en arrière-plan.First, you’ll need to decide whether to use in-app or background acrylic. Veillez à passer en revue les modèles d’application courants décrits plus haut dans cet article pour obtenir des recommandations.Be sure to review common app patterns described earlier in this article for recommendations.

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.We’ve created a collection of brush theme resources for both background and in-app acrylic types that respect the app’s theme and fall back to solid colors as needed. Les ressources nommées AcrylicWindow correspondent à une acrylique en arrière-plan, tandis que les ressources nommées AcrylicElement correspondent à une acrylique dans l’application.Resources named AcrylicWindow represent background acrylic, while AcrylicElement refers to in-app acrylic.

Ressources clésResource key Opacité de la teinteTint opacity Couleur de secours Fallback color
SystemControlAcrylicWindowBrush, SystemControlAcrylicElementBrushSystemControlAcrylicWindowBrush, SystemControlAcrylicElementBrush
SystemControlChromeLowAcrylicWindowBrush, SystemControlChromeLowAcrylicElementBrushSystemControlChromeLowAcrylicWindowBrush, SystemControlChromeLowAcrylicElementBrush
SystemControlBaseHighAcrylicWindowBrush, SystemControlBaseHighAcrylicElementBrushSystemControlBaseHighAcrylicWindowBrush, SystemControlBaseHighAcrylicElementBrush
SystemControlBaseLowAcrylicWindowBrush, SystemControlBaseLowAcrylicElementBrushSystemControlBaseLowAcrylicWindowBrush, SystemControlBaseLowAcrylicElementBrush
SystemControlAltHighAcrylicWindowBrush, SystemControlAltHighAcrylicElementBrushSystemControlAltHighAcrylicWindowBrush, SystemControlAltHighAcrylicElementBrush
SystemControlAltLowAcrylicWindowBrush, SystemControlAltLowAcrylicElementBrushSystemControlAltLowAcrylicWindowBrush, SystemControlAltLowAcrylicElementBrush
80 %80% ChromeMediumChromeMedium
ChromeLowChromeLow

BaseHighBaseHigh

BaseLowBaseLow

AltHighAltHigh

AltLowAltLow
Utilisation recommandée : il s’agit des ressources acryliques à usage général qui fonctionnent correctement pour de nombreuses utilisations.Recommended usage: These are general-purpose acrylic resources that work well in a wide variety of usages. Si votre application utilise un texte secondaire de couleur AltMedium avec une taille de texte inférieure à 18px, placez une ressource acrylique à 80 % derrière le texte pour respecter les exigences de taux de contraste.If your app uses secondary text of AltMedium color with text size smaller than 18px, place an 80% acrylic resource behind the text to meet contrast ratio requirements.
SystemControlAcrylicWindowMediumHighBrush, SystemControlAcrylicElementMediumHighBrushSystemControlAcrylicWindowMediumHighBrush, SystemControlAcrylicElementMediumHighBrush
SystemControlBaseHighAcrylicWindowMediumHighBrush, SystemControlBaseHighAcrylicElementMediumHighBrushSystemControlBaseHighAcrylicWindowMediumHighBrush, SystemControlBaseHighAcrylicElementMediumHighBrush
70 %70% ChromeMediumChromeMedium

BaseHighBaseHigh
Utilisation recommandée : si votre application utilise un texte secondaire de couleur AltMedium avec une taille de texte d’au moins 18px, vous pouvez placer des ressources acryliques à 70 % plus translucides derrière le texte.Recommended usage: If your app uses secondary text of AltMedium color with a text size of 18px or larger, you can place these more translucent 70% acrylic resources behind the text. Nous vous recommandons d’utiliser ces ressources dans les zones de navigation et de commandes horizontales supérieures de votre application.We recommend using these resources in your app's top horizontal navigation and commanding areas.
SystemControlChromeHighAcrylicWindowMediumBrush, SystemControlChromeHighAcrylicElementMediumBrushSystemControlChromeHighAcrylicWindowMediumBrush, SystemControlChromeHighAcrylicElementMediumBrush
SystemControlChromeMediumAcrylicWindowMediumBrush, SystemControlChromeMediumAcrylicElementMediumBrushSystemControlChromeMediumAcrylicWindowMediumBrush, SystemControlChromeMediumAcrylicElementMediumBrush
SystemControlChromeMediumLowAcrylicWindowMediumBrush, SystemControlChromeMediumLowAcrylicElementMediumBrushSystemControlChromeMediumLowAcrylicWindowMediumBrush, SystemControlChromeMediumLowAcrylicElementMediumBrush
SystemControlBaseHighAcrylicWindowMediumBrush, SystemControlBaseHighAcrylicElementMediumBrushSystemControlBaseHighAcrylicWindowMediumBrush, SystemControlBaseHighAcrylicElementMediumBrush
SystemControlBaseMediumLowAcrylicWindowMediumBrush, SystemControlBaseMediumLowAcrylicElementMediumBrushSystemControlBaseMediumLowAcrylicWindowMediumBrush, SystemControlBaseMediumLowAcrylicElementMediumBrush
SystemControlAltMediumLowAcrylicWindowMediumBrush, SystemControlAltMediumLowAcrylicElementMediumBrushSystemControlAltMediumLowAcrylicWindowMediumBrush, SystemControlAltMediumLowAcrylicElementMediumBrush
60 %60% ChromeHighChromeHigh

ChromeMediumChromeMedium

ChromeMediumLowChromeMediumLow

BaseHighBaseHigh

BaseLowBaseLow

AltMediumLowAltMediumLow
Utilisation recommandée : lorsque vous placez uniquement le texte principal de couleur AltHigh sur l’acrylique, votre application peut utiliser ces ressources à 60 %.Recommended usage: When placing only primary text of AltHigh color over acrylic, your app can utilize these 60% resources. Nous vous recommandons de peindre le volet de navigation verticale de votre application, autrement dit, le menu de type Hamburger, avec une acrylique de 60 %.We recommend painting your app's vertical navigation pane, i.e. hamburger menu, with 60% acrylic.

En plus d’une acrylique de couleur neutre, nous avons ajouté des ressources qui colorent l’acrylique avec la couleur d’accentuation spécifiée par l’utilisateur.In addition to color-neutral acrylic, we've also added resources that tint acrylic using the user-specified accent color. Nous vous recommandons d’utiliser l’acrylique colorée avec parcimonie.We recommend using colored acrylic sparingly. Pour les variantes dark1 et dark2 fournies, placez du texte blanc ou de couleur claire cohérent avec la couleur de texte de thème foncé placé sur ces ressources.For the dark1 and dark2 variants provided, place white or light-colored text consistent with dark theme text color over these resources.

Ressources clésResource key Opacité de la teinteTint opacity Teinte et couleurs de secours Tint and Fallback colors
SystemControlAccentAcrylicWindowAccentMediumHighBrush, SystemControlAccentAcrylicElementAccentMediumHighBrushSystemControlAccentAcrylicWindowAccentMediumHighBrush, SystemControlAccentAcrylicElementAccentMediumHighBrush 70 %70% SystemAccentColorSystemAccentColor
SystemControlAccentDark1AcrylicWindowAccentDark1Brush, SystemControlAccentDark1AcrylicElementAccentDark1BrushSystemControlAccentDark1AcrylicWindowAccentDark1Brush, SystemControlAccentDark1AcrylicElementAccentDark1Brush 80 %80% SystemAccentColorDark1SystemAccentColorDark1
SystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush, SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrushSystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush, SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrush 70 %70% SystemAccentColorDark2SystemAccentColorDark2

Pour peindre une surface spécifique, appliquez les ressources de thème ci-dessus aux éléments en arrière-plan comme vous le feriez avec n’importe quelle ressource de pinceau.To paint a specific surface, apply one of the above theme resources to element backgrounds just as you would apply any other brush resource.

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Pinceau acrylique personnaliséCustom acrylic brush

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.You may choose to add a color tint to your app’s acrylic to show branding or provide visual balance with other elements on the 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.To show color rather than greyscale, you’ll need to define your own acrylic brushes using the following properties.

  • TintColor : couleur ou teinte de la couche de superposition.TintColor: the color/tint overlay layer. Pensez à spécifier la valeur de couleur RVB et l’opacité du canal alpha.Consider specifying both the RGB color value and alpha channel opacity.
  • TintOpacity : opacité de la couche de couleur.TintOpacity: the opacity of the tint layer. Nous recommandons de commencer avec une opacité à 80 %, même si des variations de couleur peuvent sembler plus attrayantes que d’autres translucidités.We recommend 80% opacity as a starting point, although different colors may look more compelling at other translucencies.
  • TintLuminosityOpacity : contrôle la quantité de saturation de l’arrière-plan autorisée filtrer au travers de la surface acrylique.TintLuminosityOpacity: controls the amount of saturation that is allowed through the acrylic surface from the background.
  • BackgroundSource : indicateur permettant de spécifier si vous souhaitez utiliser l’acrylique en arrière-plan ou dans l’application.BackgroundSource: the flag to specify whether you want background or in-app acrylic.
  • FallbackColor : couleur unie qui remplace l’acrylique en mode Économiseur de batterie.FallbackColor: the solid color that replaces acrylic in Battery Saver. 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.For background acrylic, fallback color also replaces acrylic when your app isn’t in the active desktop window or when the app is running on phone and Xbox.

Nuances d’acrylique dans un thème clair

Nuances acrylique dans un thème foncé

Opacité de la luminosité comparée à l’opacité de la teinte

Pour ajouter un pinceau acrylique, définissez les trois ressources pour les thèmes à contraste élevé, clair et foncé.To add an acrylic brush, define the three resources for dark, light and high contrast themes. Notez qu’en contraste élevé, nous recommandons d’utiliser un SolidColorBrush avec la même x:Key que l’AcrylicBrush sombre/clair.Note that in high contrast, we recommend using a SolidColorBrush with the same x:Key as the dark/light AcrylicBrush.

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.If you don't specify a TintLuminosityOpacity value, the system will automatically adjust its value based on your TintColor and 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.The following sample shows how to declare AcrylicBrush in 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 your app supports multiple OS targets, be sure to check that this API is available on the user’s machine.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase"))
{
    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 titreExtend acrylic into the title bar

Pour donner à la fenêtre de votre application un aspect épuré, vous pouvez utiliser l’acrylique dans la zone de la barre de titre.To give your app's window a seamless look, you can use acrylic in the title bar area. 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.This example extends acrylic into the title bar by setting the ApplicationViewTitleBar object's ButtonBackgroundColor and ButtonInactiveBackgroundColor properties to 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.This code can be placed in your app's OnLaunched method (App.xaml.cs), after the call to Window.Activate, as shown here, or in your app's first page.

// 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.In addition, you'll need to draw your app's title, which normally appears automatically in the title bar, with a TextBlock using CaptionTextBlockStyle. Pour plus d’informations, voir Personnalisation de la barre de titre.For more info, see Title bar customization.

Pratiques conseillées et déconseilléesDo's and don'ts

  • Utilisez l’acrylique en tant que support d’arrière-plan des surfaces des applications non principales, comme les volets de navigation.Do use acrylic as the background material of non-primary app surfaces like navigation panes.
  • É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.Do extend acrylic to at least one edge of your app to provide a seamless experience by subtly blending with the app’s surroundings.
  • N’appliquez pas d’acrylique sur de grandes surfaces d’arrière-plan de votre application, car cela irait à l’encontre du modèle mental de l’acrylique utilisée principalement pour des surfaces temporaires.Don't put desktop acrylic on large background surfaces of your app - this breaks the mental model of acrylic being used primarily for transient surfaces.
  • Ne placez pas d’acryliques dans l’application et en arrière-plan côte à côte pour éviter toute fatigue visuelle due aux jointures entre ceux-ci.Don’t place in-app and background acrylics directly adjacent to avoid visual tension at the seams.
  • Ne placez pas davantage plusieurs volets acryliques de même teinte ou opacité côte à côte, car cela entraîne une jointure visible indésirable.Don't place multiple acrylic panes with the same tint and opacity next to each other because this results in an undesirable visible seam.
  • Ne placez pas du texte de couleur accentuée sur des surfaces acryliques.Don’t place accent-colored text over acrylic surfaces.

Comment nous avons conçu l’acryliqueHow we designed acrylic

Nous avons affiné les composants clés de l’acrylique pour obtenir ses propriétés et son apparence uniques.We fine-tuned acrylic’s key components to arrive at its unique appearance and properties. Nous avons commencé par travailler sur la translucidité, le flou et le bruit pour ajouter une profondeur visuelle et une dimension aux surfaces planes.We started with translucency, blur and noise to add visual depth and dimension to flat surfaces. 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.We added an exclusion blend mode layer to ensure contrast and legibility of UI placed on an acrylic background. Enfin, nous avons ajouté des teintes de couleur pour permettre la personnalisation.Finally, we added color tint for personalization opportunities. Ces couches s’additionnent pour constituer un support pratique et moderne.In concert these layers add up to a fresh, usable material.

Recette de l’acrylique Acrylic recipe
La recette de l’acrylique est la suivante : arrière-plan, flou, fusion d’exclusion, superposition de couleurs/teintes, bruitThe acrylic recipe: background, blur, exclusion blend, color/tint overlay, noise

Obtenir l’exemple de codeGet the sample code

Effet RévélerReveal highlight