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

Articolo
09/12/2008

Aggiornamento: novembre 2007

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

In questa procedura dettagliata vengono eseguite le 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. Nella figura seguente è illustrata l'applicazione finale.

Visualizzazione della struttura ad albero e visualizzazioni elenco di FolderExplorer

Nota:
È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida, a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Prerequisiti

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

Visual Studio 2008.

Creazione del progetto

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

Per creare il progetto

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.

Window1.xaml verrà aperto in WPF Designer.
Nella visualizzazione Progettazione selezionare la finestra. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.
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

Selezionare il controllo Grid radice nella finestra.
Aggiungere una seconda riga alla griglia. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.
Aggiungere una seconda colonna alla griglia.

Aggiunta di controlli al layout

Una volta definito il layout, è possibile inserirvi i controlli. Fare clic sul controllo desiderato nella Casella degli strumenti e trascinarlo nell'area di progettazione.

Per aggiungere controlli al layout

Trascinare un controllo TreeView dalla Casella degli strumenti alla prima cella della griglia. Ridimensionare il controllo se necessario.
Trascinare un controllo ListView dalla Casella degli strumenti alla cella che occupa la prima riga e la seconda colonna della griglia. Ridimensionare il controllo se necessario.
Trascinare un controllo ListView dalla Casella degli strumenti alla cella che occupa la seconda riga e la seconda colonna della griglia. Ridimensionare il controllo se necessario.

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

Selezionare il controllo TreeView.
Nella finestra Proprietà impostare le seguenti proprietà come illustrato.

Proprietà

Valore

Grid.ColumnSpan

1

Grid.RowSpan

2

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

Il controllo TreeView viene ridimensionato in base alla prima colonna e occupa le due righe della griglia.
Selezionare entrambi i controlli ListView.
Nella finestra Proprietà impostare le seguenti proprietà come illustrato.

Proprietà

Valore

Grid.ColumnSpan

1

Grid.RowSpan

1

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

I controlli ListView vengono ridimensionati in base alle rispettive celle della griglia.
Nella finestra Struttura documento, espandere il nodo ColumnDefinitions per la griglia. Per ulteriori informazioni, vedere Spostamento all'interno della gerarchia di elementi di un documento WPF.
Selezionare il primo elemento ColumnDefinition.
Nella finestra Proprietà, impostare la proprietà Width su *.
Nella finestra Struttura documento, selezionare il secondo elemento ColumnDefinition.
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.
Nella finestra Struttura documento, espandere il nodo RowDefinitions per la griglia.
Selezionare il primo elemento RowDefinition.
Nella finestra Proprietà, impostare la proprietà Height su *.
Nella finestra Struttura documento, selezionare il secondo elemento RowDefinition.
Nella finestra Proprietà, impostare la proprietà Height su *.

Le righe vengono ridimensionate fino a occupare la metà dell'altezza della finestra.
Generare ed eseguire il progetto.
Ridimensionare la finestra per visualizzare il ridimensionamento dinamico dei controlli TreeView e ListView.

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

Proprietà	Valore
Grid.ColumnSpan	1
Grid.RowSpan	1
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

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

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

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.

Aprire Window1.xaml in WPF Designer.
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"
```

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>

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

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>

     <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 attivare l'aggiornamento automatico delle proprietà.

Per associare le proprietà dei controlli

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

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

Generare ed eseguire il progetto.
Espandere l'elemento Folders per aprire la cartella radice. 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

Condividi tramite