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