Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: WPF – Verteilte Grid-Spalten verknüpfen
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger nun schon seit fünf Jahren Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Verteilte Grid-Spalten verknüpfen“.

Idealerweise beinhaltet ein WPF-Fenster nur ein Grid-Layout-Element. Schwieriger wird es, wenn mehrere benötigt werden und auch noch zusammenpassen müssen. Ein Formular ist hierfür ein ideales Beispiel. Es beginnt mit einem einfachen Grid aus zwei Spalten. Das erste beherbergt das Label und das zweite die TextBox zur Eingabe. Wenn das Grid nun unterbrochen wird und die Fortsetzung durch ein weiteres Grid folgt, bekommen wir das Problem mit der automatischen Breite der beiden ersten Spalten. Um das Problem besser zu verstehen, zeigt Listing 1 diese beiden Grid-Elemente. Sie sind durch einen Seperator voneinander getrennt. Beim Ausführen der Anwendung wird in Abbildung 1 ersichtlich, dass das zweite Label breiter ist und somit die TextBox-Eingabe-Felder nicht mehr linear zueinander sind.

Abb. 1: Zwei getrennte Grid-Elemente, die nicht aufeinander abgestimmt sind

WPF: Verteilte Grid-Spalten verknüpfen

Zur Abhilfe gibt es das SharedSizeScope-Feature, das verteilte Spaltengrößen automatisch aufeinander abstimmt. Es muss für das erste Elternelement der beiden Grids explizit aktiviert werden. In Listing 2 wird dies direkt beim StackPanel mit dem AttachedAttribut Grid.IsSharedSizeScope vorgenommen. Die beiden ersten Spalten erhalten jeweils einen eindeutigen Gruppennamen mittels SharedSizeGroup-Attribut. So kann WPF sie einander angleichen. Es gibt nur ein paar Regeln für das Festlegen von Gruppennamen: Der Name darf nicht leer sein. Er darf nur Buchstaben, Ziffern und Unterstriche enthalten. Zusätzlich darf er nicht mit einem numerischen Wert beginnen.

Wie das Ergebnis mit dem SharedSizeScope-Feature aussieht, kann man wunderbar in Abbildung 2 erkennen. Die zweite Spalte wird jetzt komplett linear dargestellt.

Abb. 2: Die Breite der ersten Grid-Spalten sind nun miteinander verknüpft

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Text="Name: "/>
<TextBox Grid.Column="1" />
</Grid>

<Separator Margin="0,20"/>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Text="Geburtsort: "/>
<TextBox Grid.Column="1"/>
</Grid>
<StackPanel Margin="15" Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Labels" />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Text="Name: "/>
<TextBox Grid.Column="1" />
</Grid>

<Separator Margin="0,20"/>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Labels" />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Text="Geburtsort: "/>
<TextBox Grid.Column="1"/>
</Grid>
</StackPanel>

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

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)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -