逐步解說：使用 WPF 設計工具建置簡單的 WPF 應用程式

發行項
08/12/2011

更新：2010 年 12 月

本逐步解說示範如何使用 WPF 設計工具建置一個簡單的 Windows Presentation Foundation (WPF) 應用程式。

在這個逐步解說中，您會執行下列工作：

建立專案。
建立配置。
將控制項加入至配置。
設定與配置相關的屬性。
建立資料來源。
連接至資料來源。
繫結控制項屬性。

完成作業後，會有一個簡單的應用程式可讓您瀏覽檔案系統。應用程式的使用者介面會以可延伸應用程式標記語言 (XAML) 加以實作。如需詳細資訊，請參閱 WPF 中的 XAML。下圖顯示應用程式的顯示方式。

FolderExplorer 樹狀檢視和清單檢視

注意事項
本逐步解說的實機操作演練版本 (執行於 Visual Studio 2010 內部) 可從下列位置取得：WPF 簡易應用程式逐步解說實機操作演練 (英文)。

必要條件

您需要下列元件才能完成此逐步解說：

Visual Studio 2010。

建立專案

第一步就是建立應用程式的專案。

若要建立專案

在 Visual Basic 或 Visual C# 中，建立名為 FolderExplorer 的新 WPF 應用程式專案。如需詳細資訊，請參閱 HOW TO：建立新的 WPF 應用程式專案。

MainWindow.xaml 隨即在 WPF 設計工具中開啟。
在 [設計] 檢視中選取視窗。如需詳細資訊，請參閱HOW TO：在設計介面上選取並移動項目。
在 [屬性] 視窗中，將 Title 屬性的值設定為 Folder Explorer。

建立配置

配置會定義控制項在應用程式的主視窗中如何排列。下列步驟示範如何建構配置項目，其中包含應用程式的控制項。

若要建立配置

選取視窗上的根 Grid 控制項。
將第二個資料列加入至方格。如需詳細資訊，請參閱 HOW TO：在方格中加入資料列和資料行。
將第二個資料行加入至方格。

將控制項加入至配置

定義了配置後，您可以使用控制項填入配置。

若要將控制項加入至配置

從 [工具箱] 中，將 TreeView 控制項拖曳至方格的第一個儲存格。
從 [工具箱] 中，將 ListView 控制項拖曳至方格中佔用第一個資料列及第二個資料行位置的儲存格中。
從 [工具箱] 中，將 ListView 控制項拖曳至方格中佔用第二個資料列及第二個資料行位置的儲存格中。

設定與配置相關的屬性

下列步驟示範如何設定控制項上與配置相關的屬性。當您設定每一個控制項上的屬性時，配置就會越來越像最終的應用程式。

若要設定與配置相關的屬性

選取 TreeView 控制項。
在 [屬性] 視窗中，設定下列屬性，如下所示。

屬性

值

Grid.ColumnSpan

1

Grid.RowSpan

2

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

TreeView 控制項會重新調整大小，以放入第一個方格資料行中，並跨越兩個方格資料列。
同時選取兩個 ListView 控制項。
在 [屬性] 視窗中，設定下列屬性，如下所示。

屬性

值

Grid.ColumnSpan

1

Grid.RowSpan

1

Height

Auto

HorizontalAlignment

Stretch

Margin

0,0,0,0

VerticalAlignment

Stretch

Width

Auto

ListView 控制項會重新調整大小，以放入個別的方格儲存格中。
開啟 [文件大綱] 視窗。如需詳細資訊，請參閱巡覽 WPF 文件的項目階層架構。
展開方格的 [ColumnDefinitions] 節點。
選取第一個 [ColumnDefinition] 項目。
在 [屬性] 視窗中，將 Width 屬性設定為 *。
在 [文件大綱] 視窗中，選取第二個 [ColumnDefinition]。
在 [屬性] 視窗中，將 Width 屬性設定為 2*。

資料行會調整大小，第一個資料行佔視窗寬度的三分之一，而第二個資料行佔三分之二。
在 [文件大綱] 視窗中，展開方格的 [RowDefinitions] 節點。
選取第一個 [RowDefinition] 項目。
在 [屬性] 視窗中，將 Height 屬性設定為 *。
在 [文件大綱] 視窗中，選取第二個 [RowDefinition]。
在 [屬性] 視窗中，將 Height 屬性設定為 *。

資料列會調整大小，佔視窗高度一半。
建置並執行方案。
調整視窗大小，看看 TreeView 和 ListView 控制項如何動態調整大小。

屬性	值
Grid.ColumnSpan	1
Grid.RowSpan	2
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

屬性	值
Grid.ColumnSpan	1
Grid.RowSpan	1
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

建立資料來源

FolderExplorer 應用程式的資料來源，是一個名為 Folder 的類別。這個類別提供一個簡單的檔案系統模型。每一個 Folder 執行個體都有一個 SubFolders 和一個 Files 集合。

建立資料來源

將名為 Folder 的新類別加入至 FolderExplorer 專案。如需詳細資訊，請參閱 HOW TO：加入新專案項目。

以下列程式碼取代 Folder 原始程式碼檔案的內容。

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

連接資料來源

WPF 控制項是透過資料繫結連接至資料來源。下列程序示範如何宣告和繫結至 ObjectDataProvider。

若要連接至資料來源

在 WPF 設計工具中開啟 MainWindow.xaml。
在 [XAML] 檢視中，將下列 XAML 和其他 xmlns 對應，插入至 <Window> 標記中。如需詳細資訊，請參閱 HOW TO：將命名空間匯入 XAML。
```
xmlns:my="clr-namespace:FolderExplorer"
```

將下列 XAML 插入至開頭 <Window> 標記之後，及開頭 <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>

以下列 XAML 取代 <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>

繫結控制項屬性

您可以將控制項的屬性繫結至另一個可自動執行屬性更新的控制項。

若要繫結控制項屬性

在 [XAML] 檢視中，以下列 XAML 取代兩個 <ListView> 標記。

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

建置並執行方案。
展開 [資料夾] 項目，查看 C: 磁碟機中的資料夾。
您可以嘗試按一下子資料夾，觀察兩個 ListView 控制項的內容。

子資料夾會顯示在上面的 ListView 控制項中，檔案則顯示在下面的 ListView 控制項中。

後續步驟

目前，FolderExplorer 應用程式是使用預設的樣式加以顯示。您可以套用自己的樣式來變更應用程式的外觀和行為。
Visual Studio 也提供許多工具，以偵錯您的 WPF 應用程式。如需詳細資訊，請參閱逐步解說：在設計階段偵錯 WPF 自訂控制項。

請參閱

變更記錄

日期	記錄	原因
2010 年 12 月	加入 WPF 簡易應用程式逐步解說實機操作演練 (英文) 連結。	資訊加強。

2010 年 12 月

加入 WPF 簡易應用程式逐步解說實機操作演練 (英文) 連結。

資訊加強。

共用方式為

逐步解說：使用 WPF 設計工具建置簡單的 WPF 應用程式

必要條件

建立專案

若要建立專案

建立配置

若要建立配置

將控制項加入至配置

若要將控制項加入至配置

設定與配置相關的屬性

若要設定與配置相關的屬性

建立資料來源

建立資料來源

連接資料來源

若要連接至資料來源

繫結控制項屬性

若要繫結控制項屬性

後續步驟

請參閱

工作

概念

其他資源

變更記錄

其他資源