設計 WPF 應用程式的使用者介面 (Visual Basic)

發行項
08/21/2008

更新：2007 年 11 月

在本課程中，您將學習如何建立 WPF 應用程式，以及如何將控制項加入至使用者介面。

設計 Windows Presentation Foundation (WPF) 應用程式就像設計 Windows Form 應用程式，您要將控制項加入至設計介面中。但還是有些不同之處。除了有設計工具、[屬性] 視窗和 [工具箱] 外，還有個視窗內含 XAML。「XAML」是 Extensible Application Markup Language (可延伸應用程式標記語言) 的縮寫。這是一種用來建立使用者介面的標記語言。下圖顯示 XAML 編輯器的預設位置。如需詳細資訊，請參閱逐步解說：在 WPF 設計工具中編輯 XAML。

XAML 編輯器

XAML 視窗

當您建立一個傳統的 Windows Form 應用程式時，可以將控制項從 [工具箱] 拖曳至 Windows Form，或者如果您想要，也可以撰寫程式碼建立控制項。當您將控制項拖曳至表單時，程式碼就會自動建立。同樣的，當您建立 WPF 應用程式時，可以撰寫 XAML 標記以建立控制項，或者，您也可以將控制項拖曳至 WPF 視窗。

XAML 標記會組織到以階層式格式顯示的項目中。這些項目會以角括弧括住，而且通常會有開頭項目和結尾項目。例如，簡單的 Button 項目顯示如下：<Button></Button>。您通常可以藉由定義屬性 (例如其位置、高度和寬度) 來描述項目的外觀。項目的屬性 (Attribute) 類似於物件的屬性 (Property)，因為它們都是用來描述實際外觀或狀態。屬性會出現在開頭項目的左邊括弧和右邊括弧內，括弧內包含屬性名稱、指派符號 (=) 和引號中括住的屬性值。例如，您可以指定 Button 項目的高度，如下所示：<Button Height="23"></Button>。

將 WPF 控制項從 [工具箱] 拖曳至設計工具時，Visual Basic Express 版會自動產生控制項的 XAML 標記。例如，當您按兩下 System.Windows.Controls.Button 控制項以加入至 WPF 視窗時，會產生看起來很像下列所示的 XAML 標記。

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

請注意，Button 項目的 Height 屬性已設定為 "23"，而且其 HorizontalAlignment 項目設定為 "Left"。此外，還有一些用來描述項目的其他屬性。您可以直接在 XAML 標記中變更值，就可變更這些屬性。(根據預設，這些屬性 (Attribute) 會顯示為紅色字型)。您也可以使用 [屬性] 視窗，變更控制項的屬性。

試試看！

若要建立 WPF 應用程式

在 [檔案] 功能表上，按一下 [新增專案]。
在 [新增專案] 對話方塊中，按一下 [範本] 窗格中的 [WPF 應用程式]。
在 [名稱] 方塊中，輸入 WPFWindow，然後按下 [確定]。

新的 Windows Presentation Foundation 專案已建立。名為 [Window1] 的新視窗隨即出現。而且在 Visual Basic 整合式開發環境 (IDE) 的 XAML 編輯器中可以看到它的 XAML 標記，如下所示：
```
<Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
按一下以選取 [Window1]。
在 XAML 編輯器中，將 Window 項目的 Title 屬性從 Window1 變更為 WPF Application。

XAML 標記隨即變成如下所示：
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
[Window1] 標題列中的文字會變更為 [WPF 應用程式]。

試著變更該視窗的其他屬性，例如 Width 和 Height。當您準備就緒時，再繼續進行下一個程序。

將控制項加入至 WPF 視窗

在這個程序中，您要將控制項加入至應用程式。按一下 [工具箱] (通常是在 Visual Basic IDE 的左邊) 中的控制項，然後將控制項拖曳至 WPF 視窗，即可達到上述目的。您將設定控制項的某些屬性，然後調整 XAML 標記以變更控制項的文字和大小。

若要將控制項加入 WPF 視窗

從 [工具箱] 將 [TextBox] 控制項拖曳至 WPF 視窗的右上角。
選取 [TextBox] 控制項。
在 [屬性] 視窗中，按一下 [HorizontalAlignment] 屬性的第一個箭號 (向左)，如下圖所示。

HorizontalAlignment 屬性

這樣會將 TextBox 從 WPF 視窗的右邊移到左邊。
設定 TextBox 的下列屬性。

屬性

值

VerticalAlignment

Top

Width

75

Height

26
在 XAML 編輯器中，將 TextBox 項目的 Width 屬性 (Attribute) 變更為 140，並將 Margin 項目變更為 30, 56, 0, 0，如下列範例所示。
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
TextBox 的寬度和位置都會在您輸入新值後變更。
將 [Button] 控制項加入 WPF 視窗內的 [TextBox] 旁邊。
將開頭和結尾 Button 標記 (Tag) 中間的文字，從 Button 變更為 Submit，如下列範例所示。
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
在輸入新值之後，按鈕上的文字就會變更。
請按 F5 執行應用程式。內含您剛才加入的文字方塊與按鈕的視窗隨即出現。請注意，您可以按一下按鈕並在文字方塊中輸入。您必須將事件處理常式加入控制項，然後撰寫程式碼指示電腦在按一下按鈕時要執行的動作。