XAML Expertise: Universal Windows Apps

XAML-Tipp: Universal Windows-Apps – Adaptives Layout mit dem Relative Panel
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „Universal Windows-Apps: Adaptives Layout mit dem Relative Panel“.

Das Relative Panel ist eines der neuen Layoutsteuerelemente unter Windows-10-Apps, bei dem jedes Kindelement einen Namen erhält. Zusätzlich werden ein oder mehrere Attached Properties von RelativePanel deklariert. Dieses bietet weitere Eigenschaften an, zu welchen Elementen das aktuelle Element relativ ausgerichtet werden soll.

RelativePanel-Steuerelement vereinfacht das Layouten

In Listing 1 wird dies durch zwei Rechtecke demonstriert: ein rotes und ein blaues. Das blaue Rechteck erhält hierbei die Deklaration, dass es direkt unterhalb vom roten Rechteck positioniert werden soll. Eine weitere Deklaration mit AlignRightWith gibt an, dass es ebenfalls am rechten Ende vom gewünschten roten Rechteck ausgerichtet wird. Abbildung 1 zeigt das gewünschte Ergebnis.

<RelativePanel>
  <Rectangle x:Name="Red" Height="100" Width="200" Fill="Red"/>
  <Rectangle x:Name="Blue" Height="100" Width="150" Fill="Blue"
             RelativePanel.Below="Red"
             RelativePanel.AlignRightWith="Red"/>
</RelativePanel>
Abb. 1: Das neue RelativePanel-Steuerelement im Einsatz

Abb. 1: Das neue RelativePanel-Steuerelement im Einsatz

Das RelativePanel-Steuerelement vereinfacht das Layouten enorm. Dennoch ist es wichtig zu wissen, welche Fallstricke es damit für Entwickler gibt. Ändert man das AlignRightWith Property aus Listing 1 zu LeftOf, würde das blaue Rechteck direkt links unterhalb vom roten Rechteck positioniert werden. Die Praxis zeigt allerdings genau das Gegenteil. Das blaue Rechteck verschwindet komplett vom Bildschirm. Das liegt daran, dass der Standardwert aller RelativePanel-Kindelemente Top oder Left erhält. Horizontal für Top und vertikal für Left. Definiert man nun einen Wert, der für einen Standardwert bereits vorhanden ist, wird automatisch das Element ausgeblendet. Das ist aktuell jedoch ein noch unerwünschter Effekt.

Die Verarbeitung der Reihenfolge spielt hierbei ebenfalls eine große Rolle. So wird die Ausrichtung vom Panel als Erstes verarbeitet (AlignTopWithPanel, AlignLeftWithPanel …). Die Ausrichtung von Geschwisterelementen an zweiter Stelle (AlignTopWith, AlignLeftWith …). Das direkte Positionieren von Geschwisterelementen kommt zum Schluss (Above, Below, RightOf, LeftOf). Wichtig zu wissen ist außerdem: Ein gegenseitiger Verweis führt zur Laufzeit zu einer Exception. Zum Beispiel wenn man in Listing 1 beim roten Rechteck zusätzlich RelativePanel.Above=“Blue“ hinzufügen würde.

Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Aufmacherbild: Social network user login via Shutterstock / Urheberrecht: Stokkete

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -