Procedura dettagliata: compilazione di una semplice applicazione WPF con Progettazione WPF

In questa procedura dettagliata viene illustrato come compilare una semplice applicazione WPF (Windows Presentation Foundation) con WPF Designer.

Questa procedura dettagliata prevede l'esecuzione delle attività seguenti:

• Creazione del progetto.

• Creazione del layout.

• Aggiunta di controlli al layout.

• Impostazione delle proprietà correlate al layout.

• Creazione di un'origine dati.

• Connessione a un'origine dati.

• Associazione delle proprietà dei controlli.

Al termine, si disporrà di una semplice applicazione che consente di esplorare il file system. L'interfaccia utente dell'applicazione verrà implementata in linguaggio XAML (Extensible Application Markup Language). Per ulteriori informazioni, vedere XAML in WPF. Nella figura seguente è illustrata l'applicazione finale.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

• Visual Studio 2010.

Creazione del progetto

Il primo passaggio consiste nella creazione del progetto per l'applicazione.

Per creare il progetto

1. In Visual Basic o Visual C# creare un nuovo progetto di applicazione WPF denominato FolderExplorer. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

   MainWindow.xaml viene aperto in WPF Designer.

2. Nella visualizzazione Progettazione selezionare la finestra. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

3. Nella finestra Proprietà impostare il valore della proprietà Title su Folder Explorer.

Creazione del layout

Il layout definisce la disposizione dei controlli nella finestra principale dell'applicazione. Nei passaggi seguenti viene illustrato come costruire gli elementi del layout che conterranno i controlli dell'applicazione.

Per creare il layout

1. Selezionare il controllo Grid radice nella finestra.

2. Aggiungere una seconda riga alla griglia. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.

3. Aggiungere una seconda colonna alla griglia.

Aggiunta di controlli al layout

Una volta definito il layout, è possibile inserirvi i controlli.

Per aggiungere controlli al layout

1. Trascinare un controllo TreeView dalla Casella degli strumenti alla prima cella della griglia.

2. Trascinare un controllo ListView dalla Casella degli strumenti alla cella che occupa la prima riga e la seconda colonna della griglia.

3. Trascinare un controllo ListView dalla Casella degli strumenti alla cella che occupa la seconda riga e la seconda colonna della griglia.

Impostazione delle proprietà correlate al layout

Nei passaggi seguenti viene illustrato come impostare le proprietà correlate al layout sui controlli. Via via che si impostano le proprietà su ogni controllo, il layout sarà sempre più simile a quello dell'applicazione finale.

Per impostare le proprietà correlate al layout

1. Selezionare il controllo TreeView.

2. Nella finestra Proprietà impostare le seguenti proprietà come illustrato.

   Proprietà	Valore
   Grid.ColumnSpan	1
   Grid.RowSpan	2
   Altezza	Auto
   HorizontalAlignment	Stretch
   Margin	0,0,0,0
   VerticalAlignment	Stretch
   Larghezza	Auto

   Il controllo TreeView viene ridimensionato in base alla prima colonna e occupa le due righe della griglia.

3. Selezionare entrambi i controlli ListView.

4. Nella finestra Proprietà impostare le seguenti proprietà come illustrato.

   Proprietà	Valore
   Grid.ColumnSpan	1
   Grid.RowSpan	1
   Altezza	Auto
   HorizontalAlignment	Stretch
   Margin	0,0,0,0
   VerticalAlignment	Stretch
   Larghezza	Auto

   I controlli ListView vengono ridimensionati in base alle rispettive celle della griglia.

   

5. Aprire la finestra Struttura documento. Per ulteriori informazioni, vedere Spostamento all'interno della gerarchia di elementi di un documento WPF.

6. Espandere il nodo ColumnDefinitions per la griglia.

7. Selezionare il primo elemento ColumnDefinition.

   

8. Nella finestra Proprietà, impostare la proprietà Width su *.

9. Nella finestra Struttura documento, selezionare il secondo elemento ColumnDefinition.

10. Nella finestra Proprietà, impostare la proprietà Width su 2*.

    Le colonne vengono ridimensionate: la prima occupa un terzo della larghezza della finestra e la seconda due terzi.

11. Nella finestra Struttura documento, espandere il nodo RowDefinitions per la griglia.

12. Selezionare il primo elemento RowDefinition.

13. Nella finestra Proprietà, impostare la proprietà Height su *.

14. Nella finestra Struttura documento, selezionare il secondo elemento RowDefinition.

15. Nella finestra Proprietà, impostare la proprietà Height su *.

    Le righe vengono ridimensionate fino a occupare la metà dell'altezza della finestra.

16. Compilare ed eseguire la soluzione.

17. Ridimensionare la finestra per visualizzare il ridimensionamento dinamico dei controlli TreeView e ListView.

Creazione di un'origine dati

L'origine dati per l'applicazione FolderExplorer è una classe denominata Folder. Questa classe fornisce un semplice modello del file system. Ogni istanza di Folder include un insieme SubFolders e Files.

Per creare un'origine dati

1. Aggiungere al progetto FolderExplorer una nuova classe denominata Folder. Per ulteriori informazioni, vedere Procedura: aggiungere elementi di progetto nuovi.

2. Sostituire il contenuto del file di codice sorgente Folder con il codice seguente.

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

Connessione a un'origine dati

I controlli WPF vengono connessi a origini dati tramite associazione dati. Nella procedura seguente viene illustrato come dichiarare ed eseguire l'associazione a un oggetto ObjectDataProvider.

Per connettersi a un'origine dati.

1. Aprire MainWindow.xaml in WPF Designer. 

2. In visualizzazione XAML inserire il seguente markup XAML nel tag <Window>, con gli altri mapping xmlns. Per ulteriori informazioni, vedere Procedura: importare uno spazio dei nomi in XAML.

   xmlns:my="clr-namespace:FolderExplorer"
   

3. Inserire il seguente markup XAML dopo il tag di apertura per <Window> e prima del tag di apertura per <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>
   
   

4. Sostituire il tag <TreeView> con il seguente markup XAML.

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

Associazione delle proprietà dei controlli

È possibile associare le proprietà di un controllo a un altro controllo per abilitare l'aggiornamento automatico delle proprietà.

Per associare le proprietà dei controlli

1. In visualizzazione XAML sostituire entrambi tag <ListView> con il seguente markup XAML.

           <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. Compilare ed eseguire la soluzione.

3. Espandere l'elemento Cartelle per visualizzare le cartelle dell'unità C:.

4. Provare a fare clic sulle sottocartelle e a osservare il contenuto dei due controlli ListView.

   Le sottocartelle vengono visualizzate nel controllo ListView superiore, mentre i file nel controllo ListView inferiore.

Passaggi successivi

• Attualmente, l'applicazione FolderExplorer viene visualizzata con lo stile predefinito. È possibile applicare stili personalizzati per modificare l'aspetto e il comportamento dell'applicazione.

• In Visual Studio sono inoltre disponibili numerosi strumenti per il debug dell'applicazione WPF. Per ulteriori informazioni, vedere Procedura dettagliata: debug di controlli personalizzati WPF in fase di progettazione.

Vedere anche

Attività

Procedura: utilizzare eventi associati

Procedura dettagliata: debug di controlli personalizzati WPF in fase di progettazione

Concetti

Visualizzazione suddivisa: visualizzazione simultanea dell'area di progettazione WPF e del markup XAML

Spostamento all'interno della gerarchia di elementi di un documento WPF

Altre risorse

Utilizzo di controlli in WPF Designer

Cronologia delle modifiche