#Win2D | Explore Tumblr posts and blogs

codingneko · 8 years ago

Text

Windows Acrylic für jeden!

In diesem Post will ich euch erklären, wie man den Acrylic-Effekt, welchen man in diversen Post bereits in Aktion sehen kann.

In diesem Post befasse ich mich mit dem HostBackdrop, auch Acrylic genannt. Das ist der Effekt, welcher den Hintergrund der App verschwimmen lässt. Damit ihr euch selber ein Bild davon machen könnt, bevor ihr es selbst einbaut, zeige ich euch hier ein paar Bilder von zwei Projekten, in denen ich den Backdrop angewendet habe.

Beides sind funktionierende Projekte, auf die ich nicht weiter eingehen werde. Man sieht aber schön, wie der Hintergrund der Apps das verschwommene Abbild vom Bereich hinter den Apps ist.

Voraussetzungen:

Visual Studio 2017 RC (Da das Insider-SDK, welches die Methode zum Erstellen des Blurs, nur mit dieser Version von Visual Studio funktioniert)

Windows 10 Insider Build 15003 oder höher

Windows 10 Insider SDK Build 15003 oder höher (Ich habe es mit Build 15003 gemacht, aber es sollte auch mit aktuelleren Versionen funktionieren)

Mein “HostBackdrop”-Kit (Beinhaltet alles in der Backdrop.cs-Datei und eine .png-Datei)

Schritt 1: Installieren von Visual Studio 2017 RC und des Insider SDK 15003 oder höher

Zuerst einmal solltet ihr logischerweise Visual Studio 2017 RC und das Insider SDK installieren.

Schritt 2: Das HostBackdrop-Kit runterladen und extrahieren

Das HostBackdrop-Kit enthält alles, was man für den Effekt benötigt. Extrahiert den Ordner dorthin, wo ihr es auch schnell wieder erreichen könnt.

Schritt 3: UWP-Projekt erstellen

Nun öffnen wir Visual Studio und erstellen eine leere universelle App. Im nächsten Schritt werdet ihr nach der Zielversion gefragt. Gebt da die kürzlich installierte Build 15003 oder höher an. Falls ihr bereits ein Projekt erstellt habt, springt zu Schritt 3.1.

Schritt 3.1: Zielversion bei vorhandenen Projekt anpassen

Diesen Schritt könnt ihr ignorieren, wenn ihr ein neues Projekt mit Schritt 3 erstellt habt.

Um die Zielversion zu ändern, klickt auf Properties im Projektmappen-Explorer (1) und wechselt die Zielversion auf Build 15003 oder höher (2)

Visual Studio sollte kurz von alleine neustarten.

Schritt 4: Win2D installieren

Für den Blur-Effekt braucht ihr außerdem Win2D.UWP. Dieses ladet ihr euch als NuGet-Paket runter. Dazu macht ihr einen Rechtsklick auf Verweise im Projektmappen-Explorer und wählt NuGe-Pakete verwalten aus (1). Nun sucht ihr nach Win2D.uwp (2) und installiert es (3)

Schritt 5: Das Backdrop-Kit importieren

Jetzt kommt mein Backdrop-Kit ins Spiel. Öffnet den Ordner, den ihr in Schritt 2 extrahiert habt. Ihr solltet eine Backdrop.cs und eine Noisey.png darin vorfinden. Die Backdrop.cs verschiebt ihr irgendwo in euer Projekt, indem ihr den Projektordner im Explorer öffnet und sie dort reinzieht. Die Noisey.png kopiert ihr in den Asset-Ordner. Anschließend müsst ihr nur noch die Dateien in euer Projekt einbinden, indem ihr einen Rechtsklick auf den Ordner eurer Wahl macht und mit Hinzufügen->Vorhandenes Element die Datei auswählt. Öffnet die Backdrop.cs und prüft, ob es keine Fehler gibt.

Schritt 6: Backdrop anwenden

Jetzt gehts zum spannendsten Teil des Tutorials: Dem tatsächlichen Anwenden des HostBackdrops. Das ist ganz einfach. Aber erstmal etwas Erklärung, was man beachten muss. Der Backdrop ist ein alleinstehendes XAML-Element, welches dafür sorgt, dass das Layout, in dem es sich befindet, ungeachtet dessen Hintergrundfarbe, den HostBackdrop-Effekt besitzt. Es gibt ein paar zusätzliche Attribute, die das Element besitzt, aber dazu später mehr.

Startet, falls nicht schon geschehen, eure App erstmal. Danach könnt ihr schon mit der Implementierung loslegen. Dazu fügt ihr dem Page-Element einfach nur das Attribut xmlns:blur=“using:Blur” hinzu. Nun braucht ihr einfach nur das Backdrop-Element in das Layout einzufügen, welches den Effekt besitzen soll (<blur:Backdrop/>)

Höchstwahrscheinlich wird eine Ausnahme im Designer ausgelöst, was unpraktisch ist, allerdings keine weiteren Auswirkungen auf die App hat.

Nun starten wir die App und voilà. Das Ergebnis sollte so aussehen.

Es gibt ein paar eigene Eigenschaften, die das Element zum Beispiel besitzen kann. Da wären zum einen BlurAmount, TintColor und die Standard-Eigenschaften wir Opacity.

BlurAmount bringt absolut keine Veränderung mit sich. Der Grad des Blurs bleibt gleich, egal ob BlurAmount=“0″ oder BlurAmound=“9000″.

Mit TintColor kann die Farbe des Blurs bestimmt werden. Wählt man eine der Farbe aus dem DropDown-Menü aus, zb. Cyan, dann überdeckt das zu 100% den Blur. Resultat ist, dass der verschwommene Hintergrund nicht sichtbar ist, alles ist Cyan. Daher kann man Tools wie Alpha Color Mixer den Code für die gewünschte Farbe mit Alpha-Wert generieren und diesen einfügen. Das Ergebnis sieht bei #7EC90000 zum Beispiel so aus:

Mit Opacity könnt ihr (obviously) die Deckkraft des Effekts anpassen. Dabei vermischt sich der Effekt mit dem Hintergrund des Containers, in dem es liegt. Das ergibt einen interessanten Effekt, gerade wenn es ein Bild ist, welches zur Hälfte mit dem BackDrop gemischt ist, der natürlich im Bewegten spektakulärer aussieht.

Experimentiert damit rum, wie es euch gefällt. Nachteil ist allerdings, dass man nicht mehrere Backdrop-Elemente innerhalb einer Page hinzufügen kann. Ebenso kann es passieren, dass es nicht funktioniert, wenn es innerhalb bestimmter Container verwendet wird (Splitview.Pane zum Beispiel).

Falls es euch passiert, dass ihr das Element falsch eingesetzt hat und dadurch der Bildschirm ständig schwarz wird und kurz aufflackert, drückt Strg+D und wartet etwas. Dann schließt die Anwendung mittels Taskleistenpreview.

0 notes