設計 WPF 應用程式的使用者介面

發行項
08/21/2008

更新：2007 年 11 月

您可以依照為 Windows Form 應用程式設計使用者介面的方式，為 Windows Presentation Foundation (WPF) 應用程式設計使用者介面。您將會從 [工具箱] 中將控制項拖曳至使用者介面。WPF 應用程式的整合式開發環境 (IDE) 則是有所不同。除了具有 [屬性] 視窗和 [工具箱] 之外，WPF IDE 另外具有 XAML 編輯器。「XAML」是可延伸的應用程式標記語言，可以用來建立使用者介面。下圖顯示 XAML 編輯器的位置。如需詳細資訊，請參閱逐步解說：在 WPF 設計工具中編輯 XAML。

XAML 編輯器

XAML 視窗

就像能在 Windows Form 開發中以手動撰寫程式碼的方式建立控制項，您也可以使用 XAML 標記來建立控制項。在多數情況下，您並不會撰寫 XAML 建立控制項，因為從 [工具箱] 拖曳控制項，並讓 Visual C# Express 版產生 XAML 會容易得多。然後，您就可以修改 XAML 標記以變更控制項的屬性 (Attribute)，例如 [Height] 或 [Text]。例如，下列 XAML 標記類似於您按兩下 [Button] 控制項將它加入 WPF 視窗時所產生的標記。

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

根據預設，您可以修改的屬性 (例如寬度與高度) 都會以紅色的字型色彩出現。如下列範例所示，您可以在 XAML 標記中直接變更其值。

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

若要建立 WPF 應用程式

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

新的 WPF 專案隨即建立。名為 [Window1] 的新視窗便會出現，而且在 Visual C# Express 版 IDE 的 XAML 編輯器中可以看到它的 XAML 標記。
按一下 [Window1] 予以選取。
在 XAML 檢視中，將 Window 項目的 Title 屬性 (Attribute) 變更為 WPF Application。

[Window1 ] 標題列中的文字會變更為 [WPF 應用程式]。

將控制項加入至 WPF 視窗

您可以將控制項從 [工具箱] 拖曳至 WPF 視窗而予以加入。如需詳細資訊，請參閱常見的 WPF 控制項。

若要將控制項加入至 WPF 視窗

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

HorizontalAlignment 屬性

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

屬性

值

VerticalAlignment

Top

Width

75

Height

26
在 XAML 編輯器中，將 TextBox 項目的 Width 屬性變更為 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 執行應用程式。包含您所加入之文字方塊與按鈕的視窗便會出現。

請注意，儘管您可以按一下按鈕並在文字方塊中輸入，但這樣做卻不會產生任何作用。您必須將事件處理常式加入至控制項，然後撰寫程式碼，指示電腦在按一下按鈕時所應進行的動作。如需詳細資訊，請參閱 HOW TO：建立 WPF 控制項的事件處理常式。