Partager via


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

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

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

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

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

  1. Sélectionnez le contrôle Grid racine sur la fenêtre.

  2. Ajoutez une deuxième ligne à la grille. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.

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

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

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

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

  1. Sélectionnez le contrôle TreeView.

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

  3. Sélectionnez les deux contrôles ListView.

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

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

  6. Sélectionnez le premier élément ColumnDefinition.

  7. Dans la fenêtre Propriétés, affectez la valeur * à la propriété Width.

  8. Dans la fenêtre Structure du document, sélectionnez le deuxième élément ColumnDefinition.

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

  10. Dans la fenêtre Structure du document, développez le nœud RowDefinitions de la grille.

  11. Sélectionnez le premier élément RowDefinition.

  12. Dans la fenêtre Propriétés, affectez la valeur * à la propriété Height.

  13. Dans la fenêtre Structure du document, sélectionnez le deuxième élément RowDefinition.

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

  15. Générez et exécutez le projet.

  16. Redimensionnez la fenêtre et observez le redimensionnement dynamique des contrôles TreeView et ListView.

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

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

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

  1. Ouvrez Window1.xaml dans le Concepteur WPF. 

  2. 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"
    
  3. 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>
    
    
  4. 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

  1. 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" />
    
  2. Générez et exécutez le projet.

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

Voir aussi

Tâches

Comment : utiliser les événements attachés

Procédure pas à pas : débogage des contrôles personnalisés WPF au moment du design

Concepts

Affichage fractionné : afficher à la fois l'aire de conception WPF et XAML

Navigation dans la hiérarchie des éléments d'un document WPF

Autres ressources

Utilisation de contrôles dans le concepteur WPF