Sdílet prostřednictvím

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

  • Článek

Aktualisiert: November 2007

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

Bb546954.alert_note(de-de,VS.90).gifHinweis:

Je nach den aktivierten Einstellungen oder der verwendeten Version können sich die angezeigten Dialogfelder und Menübefehle von den in der Hilfe beschriebenen unterscheiden. Klicken Sie zum Ändern der Einstellungen im Menü Extras auf Einstellungen importieren und exportieren. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Vorbereitungsmaßnahmen

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

  • Visual Studio 2008

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.

    Bb546954.alert_note(de-de,VS.90).gifHinweis:

    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.

    In WPF-Designer wird die Datei Window1.xaml 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 das 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 Eigenschaft RowDefinitions, und klicken Sie in der Spalte mit dem Eigenschaftenwert 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

    Zeilen

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Breite

    Automatisch

    Höhe

    10

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    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

    Automatisch

    Höhe

    Automatisch

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    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 Label fest:

    Eigenschaft

    Wert

    Hintergrund

    Blau (#FF0000FF)

    Vordergrund

    Weiß (#FFFFFFFF)

    Inhalt

    Anzeige

    DockPanel.Dock

    Oben

    Breite

    Automatisch

    Höhe

    23

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    Margin

    0

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

    Bb546954.alert_note(de-de,VS.90).gifTipp:

    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

    Hintergrund

    Hellblau (#FFADD8E6)

    DockPanel.Dock

    Bottom

    Breite

    Automatisch

    Höhe

    Automatisch

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    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

    Automatisch

    Höhe

    Automatisch

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    Margin

    0

  4. Suchen Sie im Fenster Eigenschaften die Eigenschaft ColumnDefinitions, und klicken Sie in der Spalte mit dem Eigenschaftenwert 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

    Strecken

    VerticalAlignment

    Strecken

    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 die RichTextBox fest:

    Eigenschaft

    Wert

    Hintergrund

    PaleGoldenrod (#FFEEE8AA)

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Breite

    Automatisch

    Höhe

    Automatisch

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    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 Window1 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.

    Bb546954.alert_note(de-de,VS.90).gifHinweis:

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

  7. Schließen Sie das Fenster.

Die Komponenten im Zusammenhang

Die vollständige Datei Window1.xaml sieht so aus:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" 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