Sdílet prostřednictvím

Exemplarische Vorgehensweise: Erstellen eines datengesteuerten dynamischen Layouts

  • Článek

Aktualisiert: November 2007

Windows Presentation Foundation (WPF) stellt Steuerelemente bereit, die datengesteuerte dynamische Layouts unterstützen. Durch die Verwendung dieser Steuerelemente mit Windows Presentation Foundation (WPF)-Designer für Visual Studio wird das Erstellen dieser Layouttypen vereinfacht. Sie können die folgenden Steuerelemente in Ihren Anwendungen verwenden:

Das ListView-Steuerelement stellt die Infrastruktur zum Anzeigen eines Satzes von Datenelementen in verschiedenen Layouts bereit. Sie verwenden in der Regel ein GridView-Steuerelement zusammen mit dem ListView-Steuerelement, um Daten in Spalten anzuzeigen. Weitere Informationen finden Sie unter Übersicht über ListView und unter Übersicht über GridView.

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

  • Sie bereiten eine Datenquelle vor.

  • Sie erstellen eine WPF-Anwendung.

  • Sie konfigurieren das standardmäßige Grid-Bereichssteuerelement.

  • Sie fügen ein ListView-Steuerelement hinzu und konfigurieren es.

  • Sie fügen eine GridView hinzu und konfigurieren sie in XAML.

  • Sie fügen ein Button-Steuerelement hinzu und konfigurieren es.

  • Sie fügen Datenbindungscode hinzu.

  • Sie testen die Anwendung.

Die folgende Abbildung zeigt, wie die Anwendung angezeigt wird.

Datengesteuertes dynamisches Layout

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

Je nach 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

Vorbereiten der Datenquelle

Für diese exemplarische Vorgehensweise benötigen Sie eine Beispieldatenquelle, mit der Sie Datenbindung herstellen. Zu diesem Zweck erstellen Sie eine einfache CSV-Datei als Datenquelle.

So bereiten Sie die Datenquelle vor

  1. Erstellen Sie einen neuen Ordner mit dem Namen Data.

  2. Erstellen Sie im Ordner Daten eine neue Textdatei, und nennen Sie diese employees.csv.

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

    Sie können einen beliebigen Text-Editor, z. B. Editor, zum Erstellen der Datei verwenden.

  3. Fügen Sie folgenden Text in der Textdatei ein:

    LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

  4. Speichern und schließen Sie die Datei.

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

    Sie können die Datei in Excel öffnen und bestätigen, dass die durch Trennzeichen getrennten Daten in separaten Spalten angezeigt werden.

  5. Erstellen Sie im Ordner Daten eine neue Textdatei, und nennen Sie diese schema.ini. Die Schemadatei beschreibt das Format der Textdateien in Ihrem Datenordner.

  6. Fügen Sie folgenden Text in der Textdatei ein:

    [employees.csv]
Format=CSVDelimited
ColNameHeader=True
    Bb628657.alert_note(de-de,VS.90).gifTipp:

    In dieser exemplarischen Vorgehensweise sind in der CSV-Datei Spaltenüberschriften enthalten. Um eine Bindung zu einer CSV-Datei herzustellen, die keine Spaltenüberschriften hat, ändern Sie ColNameHeader=True in ColNameHeader=False.

  7. Speichern und schließen Sie die Datei.

Erstellen des Projekts

Der nächste Schritt besteht darin, das Visual Studio-Projekt für die Anwendung zu erstellen.

So erstellen Sie das Projekt

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

    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. In diesem Verfahren fügen Sie dem Raster zwei Zeilen hinzu. Sie legen die Höhe einer Zeile auf Automatisch fest, sodass sie sich dem Inhalt anpasst. Sie legen die Höhe der anderen Zeile auf * fest, sodass für diese Zeile die verbleibende verfügbare Höhe verwendet wird.

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 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 zweimal auf Hinzufügen, um zwei Zeilen hinzuzufügen.

  4. Legen Sie die Height-Eigenschaft der ersten Zeile auf * fest.

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

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

    Jetzt enthält das Raster zwei Zeilen, es wird jedoch nur eine Zeile angezeigt. Die Zeile, deren Height-Eigenschaft auf Automatisch festgelegt wurde, ist vorübergehend ausgeblendet, da sie keinen Inhalt 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 und Konfigurieren einer ListView

In diesem Verfahren fügen Sie eine ListView hinzu. Sie geben der ListView einen Namen, damit Sie in der Code-Behind-Datei darauf verweisen können. Sie konfigurieren die Layouteigenschaften.

So fügen Sie eine ListView hinzu und konfigurieren diese

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

  2. Ziehen Sie aus der Toolbox aus der Gruppe Steuerelemente ein ListView-Steuerelement auf das Grid.

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

    Eigenschaft

    Wert

    Name

    lvEmployees

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Breite

    Automatisch

    Höhe

    Automatisch

    HorizontalAlignment

    Strecken

    VerticalAlignment

    Strecken

    Margin

    0

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

Hinzufügen und Konfigurieren einer GridView

In diesem Verfahren fügen Sie eine GridView mit drei Spalten hinzu, um die Daten aus der Textdatei anzuzeigen. Sie benennen die Spalten, da Sie im Code-Behind auf sie verweisen werden, um die Daten einzeln an die Spalten zu binden. Weitere Informationen finden Sie unter Gewusst wie: Anzeigen von ListView-Inhalten mit GridView.

So fügen Sie eine GridView hinzu und konfigurieren diese

  1. Suchen Sie im XAML-Editor nach dem ListView-Element. Es sieht folgendermaßen aus:

    <ListView <ATTRIBUTES> />
    Bb628657.alert_note(de-de,VS.90).gifTipp:

    Um Elemente in der XAML-Ansicht auf einfache Weise hervorzuheben, klicken Sie in der Entwurfsansicht auf das Steuerelement, oder verwenden Sie das Fenster Dokumentgliederung.

  2. Ersetzen Sie das ListView-Element durch Folgendes:

    <ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

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

Hinzufügen und Konfigurieren einer Schaltfläche

In diesem Verfahren fügen Sie einen Button hinzu und geben das Click-Ereignis an.

So fügen Sie eine Schaltfläche hinzu und konfigurieren diese

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

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

    Da die ListView das Grid verdeckt, ist es möglicherweise schwierig, das Grid auszuwählen. Sie können die TAB-Taste oder das Fenster Dokumentgliederung verwenden, um das Grid auszuwählen.

  2. Ziehen Sie aus der Toolbox aus der Gruppe Steuerelemente ein Button-Steuerelement auf das Grid.

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

    Eigenschaft

    Wert

    Name

    btnGetData

    Inhalt

    Daten abrufen

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Breite

    75

    Höhe

    23

    HorizontalAlignment

    Right

    VerticalAlignment

    Bottom

    Margin

    5

  4. Suchen Sie im XAML-Editor nach dem Button-Element. Es sieht folgendermaßen aus:

    <Button <ATTRIBUTES>>Button</Button>
    Bb628657.alert_note(de-de,VS.90).gifTipp:

    Um Elemente in der XAML-Ansicht auf einfache Weise hervorzuheben, klicken Sie in der Entwurfsansicht auf das Steuerelement, oder verwenden Sie das Fenster Dokumentgliederung.

  5. Bearbeiten Sie das XAML, um ein Click-Ereignisattribut hinzuzufügen. Es sollte wie folgt aussehen:

    <Button Click="btnGetData_Click"<ATTRIBUTES>>Button</Button>

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

Hinzufügen des Datenbindungscodes

In diesem Verfahren fügen Sie den Code für das Click-Ereignis des Button hinzu. Zur Laufzeit klicken Sie auf die Schaltfläche, um die Daten abzurufen und sie an die ListView und die GridView zu binden.

So fügen Sie den Datenbindungscode hinzu

  1. Öffnen Sie die Code-Behind-Datei; entweder Window1.xaml.cs oder Window1.xaml.vb, je nach der für das Projekt ausgewählten Sprache.

  2. Fügen Sie im Code-Editor am Anfang den folgenden Code ein. Um eine Bindung an die Daten herzustellen, müssen Sie auf den System.Data-Namespace und den System.Data.OleDb-Namespace zugreifen.

    Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

    using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

  3. Fügen Sie der Window1-Klasse den folgenden Code hinzu. Sie verwenden eine DataTable, um die Daten zu speichern.

    Dim dtEmployees As DataTable

    DataTable dtEmployees;

  4. Fügen Sie der Window1-Klasse den folgenden Code hinzu. Wenn der Benutzer auf die Schaltfläche klickt, rufen Sie die Daten ab und binden sie dann an die ListView.

    Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

    private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

  5. Fügen Sie der Window1-Klasse den folgenden Code hinzu, und geben Sie den Pfad zu Ihrem Datenordner an. Um die Daten abzurufen, verwenden Sie einen OleDbDataAdapter.

    Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

    DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

  6. Fügen Sie der Window1-Klasse den folgenden Code hinzu. Um die Daten an die ListView zu binden, legen Sie den DataContext auf die DataTable fest. Sie zeigen die Datenspalten in den Spalten der GridView an.

    Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

    void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

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

Festlegen des Fensters auf dynamische Größenanpassung

Die SizeToContent-Eigenschaft gibt an, wie sich die Größe eines Window ändert, wenn sich die Größe seines Inhalts ändert. Standardmäßig ist diese Eigenschaft auf Manual festgelegt. Dies bedeutet, dass der Benutzer die Größe des Fensters manuell an den Inhalt anpassen kann. In diesem Verfahren legen Sie diese Eigenschaft auf WidthAndHeight fest. Das bedeutet, dass das Fenster seine Größe automatisch anpasst, wenn sich der Inhalt ändert.

So legen Sie die dynamische Größenanpassung für das Fensters fest

  1. Öffnen Sie Window1.xaml im Designer.

  2. Wählen Sie in der Entwurfsansicht Window aus.

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

    Eigenschaft

    Wert

    SizeToContent

    WidthAndHeight

    Breite

    Automatisch

    Höhe

    Automatisch

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

Testen der Anwendung

So testen Sie die Anwendung

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

    Die Anwendung wird gestartet, und das Fenster wird angezeigt. Da Sie die SizeToContent-Eigenschaft auf WidthAndHeight festlegen, ist das Fenster nur groß genug für die GridView-Header und den Button.

  2. Klicken Sie auf Daten abrufen.

    Die Anwendung ruft die Daten ab und bindet sie an die GridView. GridView, ListView und Window passen ihre Größe dynamisch an den neuen Inhalt an.

  3. 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="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

Nächste Schritte

In dieser exemplarischen Vorgehensweise haben Sie eine GridView mit drei Spalten verwendet, um Daten anzuzeigen. Sie haben Daten direkt an jede einzelne Spalte gebunden. Sie können auch Datenvorlagen verwenden, um die Daten in einer ListView oder einer GridView anzuordnen und zu formatieren. Weitere Informationen finden Sie unter Übersicht über Datenvorlagen.

In dieser exemplarischen Vorgehensweise können Sie die Verwendung von Datenvorlagen ausprobieren. Sie können beispielsweise folgende Vorlage erstellen:

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

Verwenden Sie dann die Datenvorlage in der GridView mit Code wie dem folgenden:

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

Entfernen oder kommentieren sie folgenden Code im Code-Behind aus:

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines datengesteuerten dynamischen Layouts

Konzepte

Das Layoutsystem

Übersicht über den WPF-Designer

Weitere Ressourcen

Exemplarische Vorgehensweisen zum Layout

Arbeiten mit dem WPF-Designer