Acrylique intégré à l'application

Vous pouvez appliquer l'acrylique dans l'app aux surfaces de votre application en utilisant un AcrylicBrush XAML ou des ressources prédéfinies du thème AcrylicBrush.

Ouvrez l’application Galerie WinUI et consultez Acrylique en action

WinUI inclut une collection de ressources de thème de brosse qui respectent le thème de l’application et reviennent aux couleurs unies en fonction des besoins. Pour peindre une surface spécifique, appliquez l’une des ressources de thème aux arrière-plans d’élément comme vous le feriez pour appliquer n’importe quelle autre ressource de pinceau.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Note

Vous pouvez afficher ces ressources dans le fichier de ressources de thème AcrylicBrush, dans le dépôt GitHub de microsoft-ui-xaml.

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 qui est autorisée à travers la surface acrylique à partir de l’arrière-plan.
• FallbackColor : couleur unie qui remplace l’acrylique en mode Économiseur de batterie. Pour l’acrylique d’arrière-plan, la couleur de secours remplace également l’acrylique lorsque votre application n’est pas dans la fenêtre de bureau active.

Pour ajouter un pinceau acrylique, définissez les trois ressources pour les thèmes sombres, lumineux et à contraste élevé. En contraste élevé, nous vous recommandons d’utiliser un SolidColorBrush avec le même x:Key que le AcrylicBrush foncé/clair.

Note

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

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            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"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

L’exemple suivant montre comment déclarer un pinceau acrylique dans le code.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;

Articles connexes

• Vue d’ensemble des matériaux
• Toiles de fond système (Mica/Acrylique)
• Conseils en matière de conception acrylique