Gewusst wie: Erstellen von durch Benutzer größenveränderbare Anwendungen mit GridSplitter

Sie können das GridSplitter-Steuerelement zusammen mit dem Grid-Containersteuerelement verwenden, um ein Fensterlayout zu erstellen, dessen Größe vom Benutzer zur Laufzeit geändert werden kann. Beispielsweise kann der Benutzer in einer Anwendung mit einer in verschiedene Bereiche eingeteilten Oberfläche einen Splitter verschieben, um den Bereich zu vergrößern, an dem er gerade interessiert ist.

Wenn Sie ein GridSplitter-Steuerelement einem Grid hinzufügen, wird er zu einem untergeordneten Element des Grid-Steuerelements und muss wie jedes andere untergeordnete Steuerelement in einer Zeile und einer Spalte positioniert werden. Der GridSplitter muss eine Breite oder Höhe ungleich Null haben, damit der Benutzer ihn zur Laufzeit verschieben kann.

Es wird empfohlen, im Umgang mit GridSplitter die folgenden Vorgehensweisen zu beachten:

• Legen Sie den GridSplitter in einer Zeile oder Spalte ab, die keine anderen Steuerelemente enthält.

• Legen Sie die Höhe der Zeile oder die Breite der Spalte, die den GridSplitter enthält, auf Auto fest.

• Verwenden Sie für den GridSplitter ein einzelnes Grid. Fügen Sie dem Grid zusätzliche Containerbereiche hinzu, um das Layout zu vervollständigen.

So erstellen Sie einen vertikalen GridSplitter

1. Wählen Sie in der Entwurfsansicht Grid aus. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.

2. Fügen Sie an der Stelle eine Spalte hinzu, an der der GridSplitter angezeigt werden soll. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

   Tipp

   In einigen Fällen kann es schwierig sein, Zeilen und Spalten im Designer zu positionieren. In diesen Fällen können Sie den Grid mit dem XAML-Editor konfigurieren. Ein Beispiel für das entsprechende XAML-Markup finden Sie im Beispielabschnitt am Ende dieses Themas.

3. Ziehen Sie aus der Toolbox ein GridSplitter-Steuerelement in die hinzugefügte Spalte.

4. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für den GridSplitter fest:

   Eigenschaft	Wert	Mögliche Werte
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Columns	Auto Spalte Rows
   Grid.Column	Die Spalte, in der Sie den GridSplitter platzieren möchten. (Spaltennummern sind nullbasiert.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	Die Gesamtanzahl der Zeilen im Grid.
   Breite	Eine Zahl ungleich 0 (null). Beispielsweise 10.
   Höhe	Auto
   HorizontalAlignment	Stretch	Links Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. Wählen Sie in der Entwurfsansicht Grid aus.

6. Legen Sie die Breite der ColumnDefinition, die den GridSplitter enthält, auf Auto fest.

So erstellen Sie einen horizontalen GridSplitter

1. Wählen Sie in der Entwurfsansicht Grid aus. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.

2. Fügen Sie an der Stelle eine Zeile hinzu, an der der GridSplitter angezeigt werden soll. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

   Tipp

   In einigen Fällen kann es schwierig sein, Zeilen und Spalten im Designer zu positionieren. In diesen Fällen können Sie den Grid mit dem XAML-Editor konfigurieren. Ein Beispiel für das entsprechende XAML-Markup finden Sie im Beispielabschnitt am Ende dieses Themas.

3. Ziehen Sie aus der Toolbox ein GridSplitter-Steuerelement in die hinzugefügte Zeile.

4. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für den GridSplitter fest:

   Eigenschaft	Wert	Mögliche Werte
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto Spalte Rows
   Grid.Column	0
   Grid.ColumnSpan	Die Gesamtanzahl der Spalten im Grid.
   Grid.Row	Die Zeile, in der Sie den GridSplitter platzieren möchten. (Zeilennummern sind nullbasiert.)
   Grid.RowSpan	1
   Breite	Auto
   Höhe	Eine Zahl ungleich 0 (null). Beispielsweise 10.
   HorizontalAlignment	Stretch	Links Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. Wählen Sie in der Entwurfsansicht Grid aus.

6. Legen Sie die Höhe der RowDefinition, die den GridSplitter enthält, auf Auto fest.

Beispiel

Mit dem folgenden XAML wird ein horizontaler GridSplitter erstellt:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen einer größenveränderbaren Anwendung mit dem WPF-Designer

Referenz

GridSplitter

Weitere Ressourcen

Layouts im WPF-Designer

GridSplitter