WPF: Resizeable Grid

2. Dezember 2011

Oft ist es notwendig in seinen Anwendungen den User die Mögichkeit zu bieten, das Layout an seine Bedürfnisse anzupassen. Eine der einfachsten Arten ist hierbei die einzelnen Bereiche in der Größe anpassbar zu machen.

Bei WPF gibt es für diesen Zweck den GridSplitter, mit welchen man einzelne Zeilen (Rows) oder Spalten (Columns) des Grids verschieben kann. Mit wenigen Zeilen XMAL-Code sind auch komplexere Strukturen leicht und einfach zu realisieren.

Beispiel:

<Grid Grid.Row="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="150" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 
    <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" />
    <Rectangle Fill="Blue" Grid.Column="2" Grid.Row="0" />
    <Rectangle Fill="Green" Grid.Column="2" Grid.Row="2" />
 
    <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Width="5" VerticalAlignment="Stretch" HorizontalAlignment="Left" ShowsPreview="True" />
    <GridSplitter Grid.Column="2" Grid.Row="1" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" />
</Grid>

Das obige Beispiel erzeugt folgende Ausgabe:

Durch die Splitter (graue Linien zwischen den Farbigen Rechtecken) können die einzelnen Spalten beliebig vergrößert und verkleinert werden.

Die Eigenschaft “ShowsPreview” des GridSplitters ermöglicht es, vor dem eigentlichen Verschieben eine Vorschau anzuzeigen. Da hier nicht sofort verkleinert/vergrößert wird, sollte dies bei komplexeren Strukturen und Inhalten auch Geschwindigkeitsvorteile bringen.

Die Horizontal- und VerticalAliognment Eigenschaften sollten auch immer gesetzt werden da es sonst zu Problemen kommt. Es wird dann teilweise nicht die Inhalts-Zeile oder Spalte geändert, sondern die Zeile/Spalte in welcher sich der GridSplitter befindet.

{ 0 Kommentare } { 0 Shares }

Schreib einen Kommentar

Previous post: