逐步解說:在 WPF 設計工具中編輯 XAML

更新:2007 年 11 月

Windows Presentation Foundation (WPF) Designer for Visual Studio 提供許多和 Visual Studio 其他語言編輯器中的相同功能給 XAML 編輯器。本主題說明如何使用例如 IntelliSense 和大綱等功能。

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

  • 建立 WPF 專案。

  • 建立資源。

  • 檢視語法反白顯示。

  • 使用標記巡覽。

  • 使用大綱。

  • 使用 IntelliSense。

  • 使用括號對稱。

  • 使用自動格式化。

注意事項:

根據您目前使用的設定或版本,您所看到的對話方塊與功能表命令可能會與 [說明] 中描述的不同。若要變更設定,請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊,請參閱 Visual Studio 設定

必要條件

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

  • Visual Studio 2008。

建立專案

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

若要建立專案

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

    Window1.xaml 會在 WPF 設計工具中開啟。

建立資源

在 WPF 應用程式中您會經常使用資源。WPF 設計工具讓使用者可在 [文件大綱] 視窗中巡覽資源區段,資源區段具有可摺疊式大綱功能。

若要建立資源

  1. Open Window1.xaml in the WPF 設計工具.

  2. 在 [XAML] 檢視中,將下列 XAML 插入至 Window1 的開頭標記之後。

    這個 XAML 會建立一個線性的漸層筆刷,包含了色彩頻譜。

    <Window.Resources>
        <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </Window.Resources>
    

語法反白顯示

The WPF 設計工具會讓 XAML 程式碼易於閱讀,方法是根據其語法來設定顏色。

若要檢視語法反白顯示

  • 在 [XAML] 檢視中,以下列文字取代預設的 <Grid> 項目。

    <Grid Name="grid1" Background="{StaticResource backgroundBrush1}">
    
    </Grid>
    

    項目、屬性和屬性值都有唯一的色彩。此外,標記延伸繫結至 Background 屬性。而且,[設計] 檢視中的方格背景會更新。

    您可以變更 XAML 項目和屬性的色彩。如需詳細資訊,請參閱 HOW TO:變更 XAML 檢視設定

標記導覽

您可以使用標記導覽,在標記之間移動。也可以使用 [文件大綱] 檢視巡覽。如需詳細資訊,請參閱巡覽 WPF 文件的項目階層架構

若要使用標記導覽

  1. 在 [XAML] 檢視中,按一下 <Grid> 項目的開頭標記。

  2. 在 WPF 設計工具最下方,找出標記導覽。它會顯示 [方格 (grid1) 視窗/方格]。

  3. 在標記導覽中,將滑鼠指標移至 [視窗] 項目上。

    隨即出現 Window1 的呈現縮圖。

  4. 在標記導覽中,按一下 [視窗] 超連結。

    Window1 的開頭標記就會在 [XAML] 檢視中反白顯示。

  5. 在 [XAML] 檢視中,按一下 <Window.Resources> 標記。

    標記導覽將 XAML 樹狀目錄階層顯示至 <Window.Resources> 項目。

  6. 在標記導覽中,按一下 [資源] 左邊的 [下一個選取項目] 箭號。

    <LinearGradientBrush> 項目已在 [XAML] 檢視中選取。

大綱

WPF 設計工具完全支援可摺疊式大綱功能。

若要使用大綱

  1. 在 [XAML] 檢視中,捲動至 <Window.Resources> 項目。

  2. 按一下開頭標記左邊的摺疊按鈕。

    <Window.Resources> 項目會摺疊成一行。

  3. 按一下開頭標記左邊的展開按鈕。

    <Window.Resources> 項目會展開成它原始的狀態。

IntelliSense

WPF 設計工具完全支援 IntelliSense.

若要使用 IntelliSense

  1. 在 grid1 項目中,輸入 <Gr。

    IntelliSense 清單隨即出現,並已選取 Grid 類別。

  2. 按 TAB 完成開頭標記。

  3. 輸入 .c (確定包含句點)。

    IntelliSense 清單隨即出現,並已選取 Children 屬性。

  4. 使用向下鍵捲動至 ColumnDefinitions 屬性。

  5. 按 TAB 完成標記。

    如需使用自訂型別之 Intellisense 的詳細資訊,請參閱 HOW TO:將命名空間匯入 XAML

括號對稱

您可以使用括號對稱功能,在項目中巡覽。

若要使用括號對稱

  1. 在 [XAML] 檢視中,在 <LinearGradientBrush> 開頭標記中按一下。

  2. 按下 CTRL+]。

    游標會移至開頭標記的末端。

  3. 再次按下 CTRL+]。

    游標會移至結尾標記的開頭。

  4. 刪除 <LinearGradientBrush> 項目結尾標記中的結尾角括弧 '>'。輸入 '>' 完成結尾標記。

    [XAML] 檢視會將開頭和結尾標記反白顯示。

自動格式化

您可以按下 CTRL+KD 將 XAML 格式化,然後指定自動格式化設定。如需詳細資訊,請參閱 HOW TO:變更 XAML 檢視設定

若要使用自動格式化

  1. 在 [XAML] 檢視中,選取四個 <GradientStop> 項目。

  2. 按下 SHIFT+TAB。

    四個項目宣告會移動至左邊。

  3. 按下 CTRL+KD。

    四個項目宣告就會縮排。您可能會發現 XAML 還有其他的變更。

  4. 在第一個 <GradientStop> 標記中,按一下 [Color] 屬性前的空白。按下 ENTER 鍵開始新行。

  5. 按一下 [Offset] 屬性前的空白,然後按下 ENTER 鍵開始新行。

  6. 按下 CTRL+KD。

    屬性保留在新行中。

  7. 在 [Color] 屬性前插入四格空白,然後按下 CTRL+KD。

    [Color] 屬性就不會變更位置。

請參閱

工作

HOW TO:將命名空間匯入 XAML

HOW TO:變更 XAML 檢視設定

概念

巡覽 WPF 文件的項目階層架構

其他資源

WPF 設計工具

XAML 和程式碼逐步解說