Der ganze Flat Design Mode Trend ist am Ende. Man fügt wieder Schatten ein und Microsoft nennt die Design Sprache Fluent Design. Das visuelle Verhalten zeigt beim Scrollen unterschiedliches Bewegungstempo um mehrere Ebenen zu simulieren. Man nennt dies Parallax Effekt. Ganz gut kann man das an der Wetter App selber ausprobieren. Folgender Blog gilt für Windows 10 Fall Creators Update.
Irgendwann 2015 hat Microsoft die sogenannte Composition API als Layer zwischen XAML und Direct X eingeführt. Ziel war es wohl, solche modernen UI Effekte zu realisieren. Ich habe mich ein wenig damit beschäftigt und fürchterlich gelangweilt. Man benötigt Unmengen von Sourcecode um Dinge zu tun, die ein Designer tun sollte. Meine damalige Nachfrage beim Team nach irgendwas XAML basierendes, wie z.B. Behaviour, wurde beantwortet “mit kommt noch”.
Nun ist es da, das ParallaxView als Steuerelement. Keine XAML Erweiterung, kein Verhalten. Das Control wird per Binding an ein bewegtes Control, vermutlich immer etwas in der Richtung ListView gebunden. Die Dynamik des Hintergrunds wird über VerticalShift gesteuert, 0 ist statisch.
1: <ParallaxView Source="{x:Bind Vordergrund}" VerticalShift="200">
2: <Image x:Name="Hintergrund" Source="Assets/WP_20170820_17_04_43_Pro.jpg"
3: Stretch="UniformToFill"/>
4: </ParallaxView>
5: <ListView x:Name="Vordergrund" Margin="100" Background="Azure" Opacity="0.9">
So sind die Probleme sauber im XAML getrennt beim Designer, da wo sie hingehören. Nach ersten Tests ergibt sich, das es gar nicht so einfach ist, ein passendes Hintergrundbild auszuwählen. Es darf keine Focuspunkte aufweisen, muss farblich passen und im Scrollen keine Unlesbarkeiten erzeugen. So komme ich in dem Beispiel auf den Ansatz, den Hintergrund der Liste zu mit Transparenz zu färben.
