web-dev-qa-db-fra.com

Comment utiliser Acrylic Accent dans la mise à jour de Windows 10 Creators?

Je ne trouve aucun document détaillé sur l'utilisation de l'accent acrylique ( CreateBackdropBrush ). J'ai trouvé un post dans StackOverflow qui est un peu utile mais qui n'aide pas à démarrer. Alors s'il vous plaît créer une réponse détaillée à ce post afin que tout le monde puisse apprendre.

Mise à jour:

Microsoft a publié un document officiel matériel acrylique

Remarque:

Si quelqu'un ne sait pas à propos de l'accent acrylique. Acrylic Accent est la nouvelle fonctionnalité de Windows 10 Creators Update qui permet à l’arrière-plan de l’application d’être flou et transparent . enter image description hereenter image description here

c#uwpwin-universal-appwindows-composition-apifluent-design
28
Vijay Nirmal

MISE À JOUR DU CRÉATEUR

XAML

Vous devez utiliser un composant que vous avez mis sur l'arrière-plan de votre application, disons un RelativePanel

<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
    <!--Having content here, for example textblock and so on-->
</Grid>

Le second RelativePanel est utilisé pour définir la couleur de l'ombre au-dessus du flou.

.CS

Et puis vous pouvez utiliser le code suivant:

private void applyAcrylicAccent(Panel panel)
{
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _hostSprite = _compositor.CreateSpriteVisual();
    _hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);

    ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
    _hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;

et en l'appelant avec applyAcrylicAccent(MainGrid);, vous devrez également gérer l'événement SizeChanged:

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (_hostSprite != null)
        _hostSprite.Size = e.NewSize.ToVector2();
}

Bien sûr, vous devrez être sur la mise à jour du créateur pour exécuter cette opération, la CreateHostBackdropBrush () ne fonctionnera pas sur un appareil mobile, ou en mode tablette.

En outre, considérez que le panneau ou la grille que vous définissez avec une couleur acrylique ne pourra afficher aucun contrôle (autant que j'ai déjà testé). Vous devez donc utiliser votre panneau relatif sans aucun contrôle.

Barre de titre transparente

La transparence de la barre de titre peut être définie à l'aide du code suivant

ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

Voici un exemple de ce que le code ci-dessus génère (avec quelques autres choses ajoutées aussi.) Example

Mise à jour de l'automne 10.0.16190 et ultérieure

Comme Justin XL le mentionne dans une réponse ci-dessous, à partir de la version 16190, les développeurs ont accès à différents types de pinceaux acryliques situés à l’emplacement Windows.UI.Xaml.Media ( API acrylique ) et aux instructions de Microsoft: - Recommandations concernant les matériaux acryliques

27
Sven Borden

Dans le Mise à jour des créateurs Aperçu d'initié 16193 (avec Windows 10 SDK 16190 ), il existe un new AcrylicBrush que vous pouvez appliquer directement sur votre élément, comme un SolidColorBrush normal.

<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>

    <Grid Background="{StaticResource HostBackdropBrush}" />
</Page>

Notez que vous pouvez remplacer le BackgroundSource par Backdrop par un extrait du contenu de l'application au lieu du contenu situé derrière la fenêtre de l'application. Assurez-vous également que vous définissez un FallbackColor approprié, car vous perdrez l'effet acrylique lorsque la fenêtre de l'application n'a plus de focus ou que l'appareil est en mode d'économie de batterie.

9
Justin XL

Remarque

Cela ne fonctionnera que dans Windows 10 Insider Preview (versions 10.0.16190.0 et supérieures). Si vous souhaitez l’utiliser dans Creators Update, cochez la case réponse de Sven Borden.

Vous pouvez rejoindre le programme Windows 10 Insider Preview here

Vous pouvez rejoindre Download Windows 10 SDK Preview Build 16190 ici

Ressources sur le thème de l'acrylique

Les ressources nommées Acrylic\WindowBrush * représentent l’acrylique de fond, tandis que Acrylic\ElementBrush * fait référence à l’acrylique intégré à l’application.

Clé de ressource -> Opacité de la teinte -> Couleur de secours

SystemControlAcrylicWindowBrush -> 80% -> ChromeMedium

SystemControlAcrylicElementBrush -> 80% -> ChromeMedium

SystemControlAcrylicMediumHighWindowBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumHighElementBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumWindowBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicMediumElementBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicAccentMediumHighWindowBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentMediumHighElementBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentDark1WindowBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark1ElementBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark2MediumHighWindowBrush -> 70% -> SystemAccentColorDark2

SystemControlAcrylicAccentDark2MediumHighElementBrush -> 70% -> SystemAccentColorDark2

Pour peindre une surface spécifique, appliquez l'une des ressources de thème ci-dessus aux arrière-plans d'éléments de la même manière que vous appliqueriez toute autre ressource de pinceau.

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Pinceau acrylique personnalisé

  • TintColor: le calque superposé couleur/teinte. Envisagez de spécifier la valeur de couleur RVB et l'opacité du canal alpha.

  • TintOpacity: l'opacité du calque de teinte. Nous recommandons une opacité de 80% comme point de départ, bien que différentes couleurs puissent sembler plus convaincantes que d'autres transparents.

  • BackgroundSource: le drapeau pour spécifier si vous voulez un fond ou une acrylique intégrée à l'application.

  • FallbackColor: la couleur unie qui remplace l’acrylique en mode batterie faible. Pour l’acrylique d’arrière-plan, la couleur de remplacement remplace également l’acrylique lorsque votre application ne se trouve pas dans la fenêtre du bureau actif ou lorsque l’application est en cours d’exécution sur le téléphone et la Xbox.

    <ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
    <AcrylicBrush x:Key="MyAcrylicBrush"
        BackgroundSource="HostBackdrop"
        TintColor="#FFFF0000"
        TintOpacity="0.8"
        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"
        FallbackColor="#FFFF7F7F"/>
</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 que cette API est disponible sur la machine de l'utilisateur.

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;
}

Extension de l'acrylique dans votre barre de titre

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

Source: Matériau acrylique

9
Vijay Nirmal