Procédure pas à pas : génération d'une application WPF simple avec le concepteur WPF

Article
08/21/2008

Mise à jour : novembre 2007

Cette procédure pas à pas indique comment générer une application Windows Presentation Foundation (WPF) simple avec le Concepteur WPF.

Dans cette procédure pas à pas, vous exécutez les tâches suivantes :

créer le projet ;
créer la disposition ;
ajouter des contrôles à la disposition ;
définir les propriétés relatives à la disposition ;
créer une source de données ;
se connecter à une source de données ;
lier les propriétés de contrôle.

Une fois terminé, vous aurez une application simple qui vous permettra de parcourir le système de fichiers. L'interface utilisateur de votre application sera implémentée en langage XAML. Pour plus d'informations, consultez XAML. L'illustration suivante donne un aperçu de votre application.

Arborescence FolderExplorer et vues Liste

Remarque :
Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Vous avez besoin des composants suivants pour exécuter cette procédure pas à pas :

Visual Studio 2008.

Création du projet

La première étape consiste à créer le projet pour l'application.

Pour créer le projet

Créez un projet application WPF dans Visual Basic ou Visual C#, nommé FolderExplorer. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

Window1.xaml s'ouvre dans Concepteur WPF.
En mode Design, sélectionnez la fenêtre. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.
Dans la fenêtre Propriétés, affectez à la propriété Title la valeur Explorateur de dossiers.

Création de la disposition

La disposition définit la manière dont les contrôles sont organisés dans la fenêtre de principale de votre application. Les étapes suivantes vous indiquent comment construire des éléments de disposition qui contiendront les contrôles de l'application.

Pour créer la disposition

Sélectionnez le contrôle Grid racine sur la fenêtre.
Ajoutez une deuxième ligne à la grille. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.
Ajoutez une deuxième colonne à la grille.

Ajout de contrôles à la disposition

Une fois la disposition définie, vous pouvez la remplir avec des contrôles. Il suffit de cliquer sur le contrôle que vous souhaitez dans la Boîte à outils puis de la faire glisser sur l'aire de conception.

Pour ajouter des contrôles à la disposition

Depuis la Boîte à outils, faites glisser un contrôle TreeView dans la première cellule de la grille. Redimensionnez le contrôle si nécessaire.
Depuis la Boîte à outils, faites glisser un contrôle ListView dans la cellule qui occupe la première ligne et la deuxième colonne de la grille. Redimensionnez le contrôle si nécessaire.
Depuis la Boîte à outils, faites glisser un contrôle ListView dans la cellule qui occupe la deuxième ligne et la deuxième colonne de la grille. Redimensionnez le contrôle si nécessaire.

Définition des propriétés relatives à la disposition

Les étapes suivantes indiquent comment définir les propriétés relatives à la disposition sur les contrôles. À mesure que vous définissez les propriétés de chaque contrôle, la disposition ressemblera plus étroitement à l'application finale.

Pour définir des propriétés relatives à la disposition

Sélectionnez le contrôle TreeView.
Dans la Fenêtre Propriétés, définissez les propriétés suivantes comme indiqué.

Propriété

Valeur

Grid.ColumnSpan

1

Grid.RowSpan

2

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

Le contrôle TreeView se redimensionne pour s'ajuster à la première colonne et couvrir deux lignes de la grille.
Sélectionnez les deux contrôles ListView.
Dans la Fenêtre Propriétés, définissez les propriétés suivantes comme indiqué.

Propriété

Valeur

Grid.ColumnSpan

1

Grid.RowSpan

1

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

Les contrôles ListView se redimensionnent pour s'ajuster à leurs cellules de grille respectives.
Dans la fenêtre Structure du document, développez le nœud ColumnDefinitions de la grille. Pour plus d'informations, consultez Navigation dans la hiérarchie des éléments d'un document WPF.
Sélectionnez le premier élément ColumnDefinition.
Dans la fenêtre Propriétés, affectez la valeur * à la propriété Width.
Dans la fenêtre Structure du document, sélectionnez le deuxième élément ColumnDefinition.
Dans la fenêtre Propriétés, affectez la valeur 2* à la propriété Width.

Les colonnes sont redimensionnées, la première colonne occupant un tiers de la largeur de la fenêtre et la seconde, les deux tiers.
Dans la fenêtre Structure du document, développez le nœud RowDefinitions de la grille.
Sélectionnez le premier élément RowDefinition.
Dans la fenêtre Propriétés, affectez la valeur * à la propriété Height.
Dans la fenêtre Structure du document, sélectionnez le deuxième élément RowDefinition.
Dans la fenêtre Propriétés, affectez la valeur * à la propriété Height.

Les lignes sont redimensionnées pour occuper la moitié de la hauteur de la fenêtre.
Générez et exécutez le projet.
Redimensionnez la fenêtre et observez le redimensionnement dynamique des contrôles TreeView et ListView.

Propriété	Valeur
Grid.ColumnSpan	1
Grid.RowSpan	2
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Propriété	Valeur
Grid.ColumnSpan	1
Grid.RowSpan	1
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Création d'une source de données

La source de données de l'application FolderExplorer est une classe nommée Folder. Cette classe fournit à un modèle simple du système de fichiers. Chaque instance de Folder possède une collection de SubFolders et de Files.

Pour créer la source de données

Ajoutez une nouvelle classe nommée Folder au projet FolderExplorer. Pour plus d'informations, consultez Comment : ajouter de nouveaux éléments de projet.

Remplacez le contenu du code source de Folder par le code XAML suivant.

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;
            }
        }
    }
}

Connexion à une source de données

Les contrôles WPF sont connectés aux sources de données via une liaison de données. La procédure suivante indique comment déclarer et créer une liaison avec un ObjectDataProvider.

Pour se connecter à une source de données

Ouvrez Window1.xaml dans le Concepteur WPF.
En mode XAML, insérez le code XAML suivant dans la balise <Window>, avec les autres mappages xmlns. Pour plus d'informations, consultez Comment : importer un espace de noms en XAML.
```
xmlns:my="clr-namespace:FolderExplorer"
```

Insérez le code XAML suivant après la balise d'ouverture <Window> et avant que la balise d'ouverture <Grid>.

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

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

Remplacez la balise <TreeView> par le code XAML suivant.

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

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

Liaison de propriétés de contrôle

Vous pouvez lier les propriétés d'un contrôle à un autre contrôle, ce qui active la mise à jour automatique des propriétés.

Pour lier les propriétés d'un contrôle

En mode XAML, remplacez les deux balises <ListView> par le code XAML suivant.

       <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" />

     <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" />

Générez et exécutez le projet.
Développez l'élément Dossiers pour ouvrir le dossier racine. Expérimentez en cliquant sur un sous-dossier et en observant le contenu des deux contrôles ListView. Les sous-dossiers sont affichés dans le contrôle ListView supérieur et les fichiers sont affichés dans le contrôle ListView inférieur.

Étapes suivantes

Actuellement, l'application FolderExplorer est affichée avec le style par défaut. Vous pouvez utiliser vos propres styles pour modifier l'apparence et le comportement de l'application.
Visual Studio fournit également de nombreux outils pour déboguer votre application WPF. Pour plus d'informations, consultez Procédure pas à pas : débogage des contrôles personnalisés WPF au moment du design.

Voir aussi

Partager via