Come usare Acrylic Accium in Windows 10 Creators Update?

Non riesco a trovare alcun documento dettagliato per utilizzare Acrylic Accent ( CreateBackdropBrush ). Ho trovato un post in StackOverflow che è in qualche modo utile ma non aiuta a iniziare. Quindi, per favore, crea una risposta dettagliata a questo post in modo che tutti possano imparare.

Aggiornare:

Microsoft ha rilasciato un documento ufficiale in materiale acrilico

Nota:

Se qualcuno non sa di Acrylic Accent. Acrylic Accent è la nuova funzionalità di Windows 10 Creators Update che consente allo sfondo dell’app di essere sfocato e trasparente. inserisci la descrizione dell'immagine qui inserisci la descrizione dell'immagine qui

AGGIORNAMENTO CREATORE

XAML

Devi usare un componente che hai messo sullo sfondo della tua app, diciamo un RelativePanel

      

Il secondo RelativePanel viene utilizzato per impostare il colore dell’ombra sopra la sfocatura.

.CS

E quindi puoi usare il seguente codice:

 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; 

e chiamandolo con applyAcrylicAccent(MainGrid); Dovrai anche gestire l’evento SizeChanged:

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

Ovviamente per eseguire questo è necessario essere nell’aggiornamento dei creativi, il CreateHostBackdropBrush () non funzionerà su un dispositivo mobile o in modalità tablet.

Inoltre, considera che il pannello o la griglia che hai impostato con un colore acrilico non sarà in grado di visualizzare alcun controllo (finora ho ancora testato). Quindi è necessario utilizzare il pannello relativo senza alcun controllo in esso.

Barra del titolo trasparente

La trasparenza della barra del titolo può essere impostata utilizzando il seguente codice

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

Ecco un esempio di ciò che genera il codice precedente (con alcune altre cose aggiunte). Esempio

Aggiornamento di caduta 10.0.16190 e versioni successive

Come menzionato da Justin XL in una risposta qui sotto, a partire dalla Build 16190 e sopra, gli sviluppatori hanno accesso a diversi Pennelli Acrilici situati su Windows.UI.Xaml.Media ( Acrylic API ) e le linee guida di Microsoft: Linee guida sui materiali acrilici

Nel Creators Update Insider Preview 16193 (insieme a Windows 10 SDK 16190 ), c’è un nuovo AcrylicBrush che puoi applicare direttamente sul tuo elemento proprio come un normale SolidColorBrush .

       

Nota: puoi modificare BackgroundSource in Backdrop per campionare dal contenuto dell’app invece del contenuto dietro la finestra dell’app. Assicurati inoltre di definire un FallbackColor appropriato perché perderai l’effetto acrilico quando la finestra dell’app ha perso la messa a fuoco o il dispositivo è in modalità risparmio batteria.

Nota

Funzionerà solo con Windows 10 Insider Preview (v10.0.16190.0 e versioni successive). Se vuoi usarlo in Creators Update, controlla la risposta di Sven Borden.

Puoi partecipare al programma Anteprima Insider di Windows 10 qui

Puoi iscriverti Scarica Windows 10 SDK Preview Build 16190 qui

Risorse tematiche acriliche

Le risorse denominate Acrylic \ WindowBrush * rappresentano lo sfondo acrilico, mentre Acrylic \ ElementBrush * si riferisce all’acrilico in-app

Tasto risorsa -> Opacità tinta -> Colore fallback

SystemControlAcrylicWindowBrush -> 80% -> ChromeMedium

SystemControlAcrylicElementBrush -> 80% -> ChromeMedium

SystemControlAcrylicMedium HighWindowBrush -> 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

Per dipingere una superficie specifica, applica una delle risorse del tema sopra agli sfondi degli elementi proprio come faresti con qualsiasi altra risorsa del pennello

  

Pennello acrilico personalizzato

  • TintColor: lo strato di sovrapposizione colore / tinta. Prendi in considerazione di specificare sia il valore del colore RGB che l’opacità del canale alfa.

  • TintOpacity: l’opacità dello strato di tinta. Raccomandiamo l’80% di opacità come punto di partenza, anche se i colors diversi possono sembrare più interessanti in altri lucidi.

  • BackgroundSource: il flag per specificare se si desidera sfondo o acrilico in-app.

  • FallbackColor: il colore solido che sostituisce l’acrilico in modalità di batteria scarica. Per l’acrilico di sfondo, il colore di riserva sostituisce anche l’acrilico quando l’app non si trova nella finestra del desktop triggers o quando l’app è in esecuzione su telefono e Xbox.

                

Il seguente esempio mostra come dichiarare AcrylicBrush nel codice. Se la tua app supporta più destinazioni del sistema operativo, assicurati di controllare che questa API sia disponibile sul computer dell’utente.

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

Estendere l’acrilico nella barra del titolo

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

Fonte: materiale acrilico