Freigeben über

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

  • Artikel

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. In dieser exemplarischen Vorgehensweise wird das Layout für eine Messenger-Anwendung erstellt.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

  • Erstellen Sie eine WPF-Anwendung.

  • Konfigurieren Sie den Standardrasterbereich.

  • Fügen Sie einen horizontalen GridSplitter hinzu.

  • Fügen Sie einen Dockbereich und Steuerelemente hinzu.

  • Fügen Sie einen Rasterbereich und Steuerelemente hinzu.

  • Testen Sie die Anwendung.

Die folgende Abbildung zeigt, wie die Anwendung angezeigt wird.

Veränderbare Anwendung

Tipp

Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Visual Studio 2010

Erstellen des Projekts

Der erste Schritt besteht im Erstellen des Projekts für die Anwendung.

So erstellen Sie das Projekt

  1. Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic oder Visual C# mit dem Namen ResizableApplication. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts.

    Tipp

    Sie müssen in dieser exemplarischen Vorgehensweise keinen Code schreiben. Die Sprache, die Sie für das Projekt auswählen, ist die Sprache, die für die Code-Behind-Seiten in Ihrer Anwendung verwendet wird.

    Die Datei MainWindow.xaml wird im WPF-Designer geöffnet.

  2. Klicken Sie im Menü Datei auf Alle speichern.

Konfigurieren des Standardrasterbereichssteuerelements

Standardmäßig enthält die neue WPF-Anwendung ein Window mit einem Grid-Bereich. Um der empfohlenen Vorgehensweise zu folgen, wird das Grid dem GridSplitter zugeordnet. Der Plan für das Raster lautet wie folgt:

Zeile 1: Ein Dock-Bereich für den ersten Teil des Layouts.

Zeile 2: Ein GridSplitter.

Zeile 3: Ein Grid-Bereich für den Rest des Layouts.

So konfigurieren Sie das Standardrasterbereichssteuerelement

  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. Suchen Sie im Fenster Eigenschaften die RowDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit den Auslassungszeichen.

    Der Auflistungs-Editor wird angezeigt.

  3. Klicken Sie dreimal auf Hinzufügen, um drei Zeilen hinzuzufügen.

  4. Legen Sie die Height-Eigenschaft der zweiten Zeile auf Automatisch fest.

  5. Legen Sie die MinHeight-Eigenschaft der dritten Zeile auf 70 fest.

  6. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.

    Jetzt enthält das Raster drei Zeilen, es werden jedoch nur zwei Zeilen angezeigt. Die Zeile, deren Height-Eigenschaft auf Automatisch festgelegt wurde, ist vorübergehend ausgeblendet, da sie keine Inhalte enthält. Für diese exemplarische Vorgehensweise ist dies in Ordnung. Um dies künftig zu vermeiden, können Sie die Größenanpassung mit dem Sternchen verwenden, während Sie arbeiten, und den Wert auf Automatisch ändern, wenn Sie damit fertig sind.

  7. Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen eines horizontalen GridSplitter

Fügen Sie als Nächstes einen GridSplitter hinzu.

So fügen Sie einen horizontalen GridSplitter hinzu

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

  2. Ziehen Sie aus der Toolbox ein GridSplitter-Steuerelement auf das Grid.

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

    Eigenschaft

    Wert

    ResizeDirection

    Rows

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Breite

    Auto

    Höhe

    10

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen eines Dockbereichs und eines Steuerelements

Jetzt fügen Sie einen DockPanel hinzu und richten das Layout der oberen Hälfte der Anwendung ein. Der DockPanel enthält ein Label und ein RichTextBox. Die Farbe des Label und des RichTextBox wird festgelegt, um die Größe der oberen Hälfte der Anwendung hervorzuheben, wenn der GridSplitter verschoben wird.

So fügen Sie einen Dockbereich und ein Steuerelement hinzu

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

  2. Ziehen Sie aus der Toolbox ein DockPanel-Steuerelement auf das Grid.

  3. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für den DockPanel fest:

    Eigenschaft

    Wert

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    LastChildFill

    True (Aktiviert)

    Breite

    Auto

    Höhe

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. Ziehen Sie aus der Toolbox ein Label-Steuerelement auf den DockPanel.

  5. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für die Label fest:

    Eigenschaft

    Wert

    Background

    Blau (#FF0000FF)

    Vordergrund

    Weiß (#FFFFFFFF)

    Inhalt

    Anzeige

    DockPanel.Dock

    Top

    Breite

    Auto

    Höhe

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  6. Wählen Sie in der Entwurfsansicht DockPanel aus.

    Tipp

    Da sich mehrere Steuerelemente auf dem Raster befinden, kann mit der TAB-TASTE, mit dem Fenster Dokumentgliederung oder mit der XAML-Ansicht der DockPanel einfacher ausgewählt werden. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.

  7. Ziehen Sie aus der Toolbox ein RichTextBox-Steuerelement auf den DockPanel.

  8. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das RichTextBox fest:

    Eigenschaft

    Wert

    Background

    Hellblau (#FFADD8E6)

    DockPanel.Dock

    Bottom

    Breite

    Auto

    Höhe

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    True (Aktiviert)

  9. Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen eines Dockbereichs und von Steuerelementen

Fügen Sie jetzt ein Grid hinzu, und richten Sie das Layout der unteren Hälfte der Anwendung ein. Das Grid enthält ein Button und ein RichTextBox. Die Farbe des RichTextBox wird festgelegt, um die Größe der unteren Hälfte der Anwendung hervorzuheben, wenn der GridSplitter verschoben wird.

So fügen Sie einen Rasterbereich und Steuerelemente hinzu

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

  2. Ziehen Sie aus der Toolbox ein Grid-Steuerelement auf den Grid.

  3. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das neue Grid fest:

    Eigenschaft

    Wert

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    2

    Grid.RowSpan

    1

    Breite

    Auto

    Höhe

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. Suchen Sie im Fenster Eigenschaften die ColumnDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit den Auslassungszeichen.

    Der Auflistungs-Editor wird angezeigt.

  5. Klicken Sie zweimal auf Hinzufügen, um zwei Spalten hinzuzufügen.

  6. Legen Sie die Width-Eigenschaft der zweiten Spalte auf Automatisch fest.

  7. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.

  8. Ziehen Sie aus der Toolbox ein Button-Steuerelement auf das Grid.

  9. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für die Button fest:

    Eigenschaft

    Wert

    Inhalt

    OK

    Grid.Column

    1

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Breite

    60

    Höhe

    60

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    5

  10. Ziehen Sie aus der Toolbox ein RichTextBox-Steuerelement auf das Grid.

  11. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das RichTextBox fest:

    Eigenschaft

    Wert

    Hintergrund

    PaleGoldenrod (#FFEEE8AA)

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Breite

    Auto

    Höhe

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    False (Deaktiviert)

  12. Klicken Sie im Menü Datei auf Alle speichern.

Testen der Anwendung

Abschließend wird die Anwendung getestet.

So testen Sie die Anwendung

  1. Klicken Sie im Menü Debuggen auf Debuggen starten.

    Die Anwendung wird gestartet und MainWindow wird angezeigt.

  2. Ändern Sie die Größe des Fensters sowohl vertikal als auch horizontal.

    Die beiden Hälften der Anwendung (oben, unten) vergrößern oder verkleinern sich, um den verfügbaren Platz auszunutzen.

  3. Ziehen Sie den Splitter, um die Größe der Anwendungsteilbereiche zu ändern. Verkleinern Sie einen Teil der Anwendung im Verhältnis zum anderen.

  4. Ändern Sie wieder die Größe des Fensters.

    Die beiden Hälften der Anwendung (oben, unten) vergrößern oder verkleinern sich proportional in Abhängigkeit von der Position des Splitters.

  5. Ziehen Sie den Splitter in der Anwendung so weit nach oben wie möglich.

    Es wird nur noch die untere Hälfte, nicht mehr die obere Hälfte der Anwendung angezeigt.

  6. Ziehen Sie den Splitter in der Anwendung so weit nach unten wie möglich.

    Die untere Hälfte der Anwendung wird immer noch angezeigt. Das liegt daran, dass Sie die MinHeight-Eigenschaft der dritten Zeile auf 70 festgelegt haben.

Tipp

70 = 60 (Höhe der Schaltfläche) + 5 (oberer Rand der Schaltfläche) + 5 (unterer Rand der Schaltfläche)

  1. Schließen Sie das Fenster.

Die Komponenten im Zusammenhang

Nachfolgend wird die vollständige Datei MainWindow.xaml dargestellt:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </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" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

Nächste Schritte

Die Anwendung, die Sie in dieser exemplarischen Vorgehensweise erstellt haben, enthält einen horizontalen Splitter. Sie können experimentieren, indem Sie dieselbe Anwendung erstellen und stattdessen einen vertikalen Splitter verwenden.

Anhand der erstellten Anwendung wurden nur Layouttechniken demonstriert. Sie können weiter experimentieren, indem Sie Code hinzufügen, um die Anwendung funktionsfähig zu machen. Es kann beispielsweise Code zu dem Click-Ereignis der Schaltfläche hinzugefügt werden, mit dem Text vom oberen Textfeld zum unteren Textfeld kopiert wird.

Siehe auch

Aufgaben

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

Konzepte

Layout mit absoluter und dynamischer Positionierung

Weitere Ressourcen

Exemplarische Vorgehensweisen zum Layout