Exemplarische Vorgehensweise: Erstellen einer einfachen WPF-Anwendung mit dem WPF-Designer

Artikel
08/10/2011

In dieser exemplarischen Vorgehensweise wird erläutert, wie eine einfache WPF (Windows Presentation Foundation)-Anwendung mit dem WPF-Designer erstellt wird.

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

Erstellen des Projekts.
Erstellen des Layouts.
Hinzufügen von Steuerelementen zum Layout.
Festlegen von layoutbezogenen Eigenschaften.
Erstellen einer Datenquelle.
Bauen Sie eine Verbindung zu einer Datenquelle auf.
Binden von Steuerelementeigenschaften.

Anschließend verfügen Sie über eine einfache Anwendung, mit der Sie das Dateisystem durchsuchen können. Die Benutzeroberfläche der Anwendung wird in XAML (Extensible Application Markup Language) implementiert. Weitere Informationen finden Sie unter XAML in WPF. Die folgende Abbildung zeigt, wie die Anwendung angezeigt wird.

FolderExplorer-Strukturansicht und -Listenansichten

Tipp

Eine in Visual Studio 2010 ausgeführte praktische Übungseinheit für diese exemplarische Vorgehensweise steht unter Exemplarische Vorgehensweise: Einfache WPF-Anwendung – praktische Übungseinheit zur Verfügung.

Erforderliche Komponenten

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

Visual Studio 2010.

Erstellen des Projekts

Zunächst muss das Projekt für die Anwendung erstellt werden.

So erstellen Sie das Projekt

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

Die Datei MainWindow.xaml wird im WPF-Designer geöffnet.
Wählen Sie in der Entwurfsansicht das Fenster aus. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.
Legen Sie im Fenster Eigenschaften den Wert der Title-Eigenschaft auf Folder Explorer fest.

Erstellen des Layouts

Durch das Layout wird definiert, wie die Steuerelemente im Hauptfenster der Anwendung angeordnet werden. In den folgenden Schritten wird dargestellt, wie die Layoutelemente erstellt werden, die die Steuerelemente der Anwendung enthalten.

So erstellen Sie das Layout

Wählen Sie im Fenster das Grid-Stammsteuerelement aus.
Fügen Sie dem Raster eine zweite Zeile hinzu. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.
Fügen Sie dem Raster eine zweite Spalte hinzu.

Hinzufügen von Steuerelementen zum Layout

Das definierte Layout kann nun mit Steuerelementen gefüllt werden.

So fügen Sie Steuerelemente zum Layout hinzu

Ziehen Sie aus der Toolbox ein TreeView-Steuerelement in die erste Zelle des Rasters.
Ziehen Sie aus der Toolbox ein ListView-Steuerelement in die erste Zelle der zweiten Spalte des Rasters.
Ziehen Sie aus der Toolbox ein ListView-Steuerelement in die zweite Zelle der zweiten Spalte des Rasters.

Festlegen von layoutbezogenen Eigenschaften

In den folgenden Schritten wird dargestellt, wie layoutbezogene Eigenschaften von Steuerelementen festgelegt werden. Mit jedem Steuerelement, für das Sie Eigenschaften festgelegen, wird das Layout der endgültigen Anwendung ähnlicher.

So legen Sie layoutbezogene Eigenschaften fest

Wählen Sie das TreeView-Steuerelement aus.
Legen Sie im Eigenschaftenfenster die folgenden Eigenschaften wie dargestellt fest.

Eigenschaft

Wert

Grid.ColumnSpan

1

Grid.RowSpan

2

Höhe

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Breite

Auto

Die Größe des TreeView-Steuerelements wird so geändert, dass es die erste Spalte und beide Zeilen des Rasters ausfüllt.
Wählen Sie beide ListView-Steuerelemente aus.
Legen Sie im Eigenschaftenfenster die folgenden Eigenschaften wie dargestellt fest.

Eigenschaft

Wert

Grid.ColumnSpan

1

Grid.RowSpan

1

Höhe

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Breite

Auto

Die Größe der ListView-Steuerelemente wird an die jeweilige Rasterzelle angepasst.
Öffnen Sie das Fenster Dokumentgliederung. Weitere Informationen finden Sie unter Navigieren in der Elementhierarchie eines WPF-Dokuments.
Erweitern Sie den Knoten ColumnDefinitions für das Raster.
Wählen Sie das erste ColumnDefinition-Element aus.
Legen Sie im Fenster Eigenschaften die Width-Eigenschaft auf * fest.
Wählen Sie im Fenster Dokumentgliederung die zweite ColumnDefinition aus.
Legen Sie im Fenster Eigenschaften die Width-Eigenschaft auf 2* fest.

Die Spaltengröße wird so geändert, dass die Größe der ersten Spalte einem Drittel der Fensterbreite und die Größe der zweiten Spalte zwei Dritteln der Fensterbreite entspricht.
Erweitern Sie im Fenster Dokumentgliederung den Knoten RowDefinitions des Rasters.
Wählen Sie das erste RowDefinition-Element aus.
Legen Sie im Fenster Eigenschaften die Height-Eigenschaft auf * fest.
Wählen Sie im Fenster Dokumentgliederung die zweite RowDefinition aus.
Legen Sie im Fenster Eigenschaften die Height-Eigenschaft auf * fest.

Die Zeilengröße wird so angepasst, dass die Größe beider Zeilen der halben Fenstergröße entspricht.
Erstellen Sie die Projektmappe, und führen Sie sie aus
Ändern Sie die Größe des Fensters, und beachten Sie die dynamische Größenänderung des TreeView-Steuerelements und des ListView-Steuerelements.

Eigenschaft	Wert
Grid.ColumnSpan	1
Grid.RowSpan	2
Höhe	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Breite	Auto

Eigenschaft	Wert
Grid.ColumnSpan	1
Grid.RowSpan	1
Höhe	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Breite	Auto

Erstellen einer Datenquelle

Die Datenquelle für die Anwendung FolderExplorer ist eine Klasse mit dem Namen Folder. Diese Klasse stellt ein einfaches Modell des Dateisystems bereit. Jede Folder-Instanz verfügt über eine SubFolders-Auflistung und eine Files-Auflistung.

So erstellen Sie eine Datenquelle

Fügen Sie dem Projekt FolderExplorer eine neue Klasse mit dem Namen Folder hinzu. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen neuer Projektelemente.

Ersetzen Sie den Quellcode von Folder durch den folgenden Code:

Imports System
Imports System.IO
Imports System.Linq
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Text

Public Class Folder
    Private _folder As DirectoryInfo
    Private _subFolders As ObservableCollection(Of Folder)
    Private _files As ObservableCollection(Of FileInfo)

    Public Sub New() 
        Me.FullPath = "c:\"

    End Sub 'New


    Public ReadOnly Property Name() As String 
        Get
            Return Me._folder.Name
        End Get
    End Property


    Public Property FullPath() As String 
        Get
            Return Me._folder.FullName
        End Get

        Set
            If Directory.Exists(value) Then
                Me._folder = New DirectoryInfo(value)
            Else
                Throw New ArgumentException("must exist", "fullPath")
            End If
        End Set
    End Property

    ReadOnly Property Files() As ObservableCollection(Of FileInfo)
        Get
            If Me._files Is Nothing Then
                Me._files = New ObservableCollection(Of FileInfo)

                Dim fi As FileInfo() = Me._folder.GetFiles()

                Dim i As Integer
                For i = 0 To fi.Length - 1
                    Me._files.Add(fi(i))
                Next i
            End If

            Return Me._files
        End Get
    End Property

    ReadOnly Property SubFolders() As ObservableCollection(Of Folder)

        Get
            If Me._subFolders Is Nothing Then
                Try

                Me._subFolders = New ObservableCollection(Of Folder)

                    Dim di As DirectoryInfo() = Me._folder.GetDirectories()

                    Dim i As Integer
                    For i = 0 To di.Length - 1
                        Dim newFolder As New Folder()
                        newFolder.FullPath = di(i).FullName
                        Me._subFolders.Add(newFolder)
                    Next i
                Catch ex As Exception

                    System.Diagnostics.Trace.WriteLine(ex.Message)

                End Try
            End If

            Return Me._subFolders
        End Get
    End Property
End Class

using System;
using System.IO;
using System.Linq;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace FolderExplorer
{
    public class Folder
    {
        private DirectoryInfo _folder;
        private ObservableCollection<Folder> _subFolders;
        private ObservableCollection<FileInfo> _files;

        public Folder()
        {
            this.FullPath = @"c:\";
        }

        public string Name
        {
            get
            {
                return this._folder.Name;
            }
        }

        public string FullPath
        {
            get
            {
                return this._folder.FullName;
            }

            set
            {
                if (Directory.Exists(value))
                {
                    this._folder = new DirectoryInfo(value);
                }
                else
                {
                    throw new ArgumentException("must exist", "fullPath");
                }
            }
        }

        public ObservableCollection<FileInfo> Files
        {
            get
            {
                if (this._files == null)
                {
                    this._files = new ObservableCollection<FileInfo>();

                    FileInfo[] fi = this._folder.GetFiles();

                    for (int i = 0; i < fi.Length; i++)
                    {
                        this._files.Add(fi[i]);
                    }
                }

                return this._files;
            }
        }

        public ObservableCollection<Folder> SubFolders
        {
            get
            {
                if (this._subFolders == null)
                {
                    this._subFolders = new ObservableCollection<Folder>();

                    DirectoryInfo[] di = this._folder.GetDirectories();

                    for (int i = 0; i < di.Length; i++)
                    {
                        Folder newFolder = new Folder();
                        newFolder.FullPath = di[i].FullName;
                        this._subFolders.Add(newFolder);
                    }
                }

                return this._subFolders;
            }
        }
    }
}

Aufbauen der Verbindung zu einer Datenquelle

WPF-Steuerelemente werden durch Datenbindung mit Datenquellen verbunden. Im folgenden Vorgehen wird dargestellt, wie ein ObjectDataProvider deklariert und gebunden wird.

So bauen Sie eine Verbindung mit einer Datenquelle auf

Öffnen Sie im WPF-Designer die Datei MainWindow.xaml.
Fügen Sie in der XAML-Ansicht folgenden XAML-Code in das <Window>-Tag mit den anderen xmlns-Zuordnungen ein. Weitere Informationen finden Sie unter Gewusst wie: Importieren eines Namespace in XAML.
```
xmlns:my="clr-namespace:FolderExplorer"
```

Fügen Sie folgenden XAML-Code zwischen dem öffnenden <Window>-Tag und dem öffnenden <Grid>-Tag ein.

    <Window.Resources>

        <ObjectDataProvider x:Key="RootFolderDataProvider" >
            <ObjectDataProvider.ObjectInstance>
                <my:Folder FullPath="c:\"/>
            </ObjectDataProvider.ObjectInstance>
        </ObjectDataProvider>

        <HierarchicalDataTemplate 
            DataType    = "{x:Type my:Folder}"
            ItemsSource = "{Binding Path=SubFolders}">
            <TextBlock Text="{Binding Path=Name}" />
        </HierarchicalDataTemplate>

    </Window.Resources>

Ersetzen Sie das <TreeView>-Tag durch folgenden XAML-Code.

        <TreeView Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="0,0,0,0" Name="treeView1" >
            <TreeViewItem ItemsSource="{Binding Path=SubFolders, Source={StaticResource RootFolderDataProvider}}" Header="Folders"  />
        </TreeView>

Binden von Steuerelementeigenschaften

Sie können die Eigenschaften eines Steuerelements an ein anderes Steuerelement binden. Dies ermöglicht das automatische Aktualisieren von Eigenschaften.

So binden Sie Steuerelementeigenschaften

Ersetzen Sie in der XAML-Ansicht beide <ListView>-Tags durch folgenden XAML-Code.

        <ListView Name="listView1" 
        ItemsSource="{Binding Path=SelectedItem.SubFolders, ElementName=treeView1, Mode=OneWay}" 
        Grid.Column="1" 
        Grid.RowSpan="1" />

        <ListView Name="listView2" 
        ItemsSource="{Binding Path=SelectedItem.Files, ElementName=treeView1, Mode=OneWay}" 
        Grid.Column="1" 
        Grid.Row="1" />

Erstellen Sie die Projektmappe, und führen Sie sie aus
Erweitern Sie das Element Ordner, um die Ordner von Laufwerk C: anzuzeigen.
Klicken Sie versuchsweise auf die Unterordner, und achten Sie auf den Inhalt der beiden ListView-Steuerelemente.

Die Unterordner werden im oberen ListView-Steuerelement und die Dateien im unteren ListView-Steuerelement angezeigt.

Nächste Schritte

Derzeit wird die Anwendung FolderExplorer in der Standardformatierung angezeigt. Sie können eigene Formate anwenden, um die Darstellung und das Verhalten der Anwendung zu ändern.
Ergänzend werden in Visual Studio viele Tools zum Debuggen der WPF-Anwendung bereitgestellt. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Debuggen von benutzerdefinierten WPF-Steuerelementen zur Entwurfszeit.

Siehe auch

Änderungsprotokoll

Datum	Versionsgeschichte	Grund
Dezember 2010	Link zu Exemplarische Vorgehensweise: Einfache WPF-Anwendung – praktische Übungseinheit wurde hinzugefügt.	Informationsergänzung.

Dezember 2010

Link zu Exemplarische Vorgehensweise: Einfache WPF-Anwendung – praktische Übungseinheit wurde hinzugefügt.

Informationsergänzung.