Share via


逐步解說:根據絕對位置建構配置

在絕對位置中,排列子項目的方式是指定他們相對於父項目的準確位置。 例如,在面板上排列控制項的方式,是指定控制項相對於面板的左方和上方座標。 如需詳細資訊,請參閱使用絕對和動態位置進行配置

WPF Designer for Visual Studio 提供的 Canvas 面板控制項可以支援絕對位置。 您可以使用 Canvas 面板控制項,在應用程式中絕對定位項目。

重要

可能的話,最好是使用動態配置。動態配置是最具彈性的,能適應內容的變更 (例如當地語系化),並最能讓使用者掌控他們的環境。如需動態配置的範例,請參閱逐步解說:使用 WPF 設計工具建立可調整大小的應用程式逐步解說:建構動態配置

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

  • 建立 WPF 應用程式

  • Canvas 面板控制項加入到應用程式中。

  • 將控制項加入面板中。

  • 測試配置。

下圖顯示應用程式的顯示方式。

使用絕對位置進行配置

注意

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

必要條件

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

  • Visual Studio 2012 RC

建立專案

第一個程序是要建立應用程式的專案。

若要建立專案

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

    注意

    在這個逐步解說中,您將不會撰寫任何程式碼。您為專案選擇的語言是應用程式中用於程式碼後置 (Code-Behind) 頁面的語言。

    MainWindow.xaml 隨即在 WPF Designer中開啟。

  2. 在 [設計] 檢視中選取視窗。 如需詳細資訊,請參閱 HOW TO:在設計介面上選取並移動項目

  3. 在 [屬性] 視窗中,為 Window 設定下列屬性:

    屬性

    Width

    400

    Height

    200

    提示

    您也可以在 [設計] 檢視中使用調整大小控點來調整視窗的大小。

  4. (選擇性) 若要鎖定視窗的大小,請使用下列其中一個方法:

    1. 在 [屬性] 視窗中,為 Window 設定下列屬性:

      屬性

      ResizeMode

      NoResize

    2. 在 [屬性] 視窗中,為 Window 設定下列屬性:

      屬性

      MinWidth

      400

      MinHeight

      200

      MaxWidth

      400

      MaxHeight

      200

  5. 在 [檔案] 功能表上,按一下 [全部儲存]。

加入面板控制項

根據預設,新的 WPF 應用程式包含具有 Grid 面板的 Window。 若要根據絕對位置建立配置,必須使用 Canvas 面板。 在這個程序中,您會移除預設 Grid 並加入 Canvas

若要加入面板控制項

  1. 在 [設計] 檢視中選取方格。

  2. 按 DELETE 鍵刪除 Grid

  3. 從 [工具箱] 的 [控制項] 群組中,將 Canvas 控制項拖曳到 Window

  4. 在 [屬性] 視窗中,將 Canvas 的 Height 屬性設定為 Auto。

    Canvas 會縮放至填入 Window 的高度。

  5. 在 [屬性] 視窗中,將 Canvas 的 Width 屬性設定為 Auto。

    Canvas 會縮放至填入 Window 的寬度。

  6. 在 [檔案] 功能表上,按一下 [全部儲存]。

將控制項加入面板中

接下來,您會將控制項加入面板中,並使用 CanvasLeftTop 附加屬性以絕對定位控制項。

若要將控制項加入面板中

  1. 從 [工具箱] 的 [通用] 群組中,將 Label 控制項拖曳到 Canvas

  2. 在 [屬性] 視窗中,為 Label 設定下列屬性:

    屬性

    內容

    姓名:

    Canvas.Left

    20

    Canvas.Top

    20

    Width

    120

    Height

    23

  3. 從 [工具箱] 的 [通用] 群組中,將 Label 控制項拖曳到 Canvas

  4. 在 [屬性] 視窗中,為 Label 設定下列屬性:

    屬性

    內容

    Password:

    Canvas.Left

    20

    Canvas.Top

    60

    Width

    120

    Height

    23

  5. 從 [工具箱] 的 [通用] 群組中,將 TextBox 控制項拖曳到 Canvas

  6. 在 [屬性] 視窗中,為 TextBox 設定下列屬性:

    屬性

    Canvas.Left

    160

    Canvas.Top

    20

    Width

    200

    Height

    23

  7. 從 [工具箱] 的 [通用] 群組中,將 TextBox 控制項拖曳到 Canvas

  8. 在 [屬性] 視窗中,為 TextBox 設定下列屬性:

    屬性

    Canvas.Left

    160

    Canvas.Top

    60

    Width

    200

    Height

    23

  9. 從 [工具箱] 的 [通用] 群組中,將 Button 控制項拖曳到 Canvas

  10. 在 [屬性] 視窗中,為 Button 設定下列屬性:

    屬性

    內容

    OK

    Canvas.Left

    196

    Canvas.Top

    120

    Width

    75

    Height

    23

  11. 從 [工具箱] 的 [通用] 群組中,將 Button 控制項拖曳到 Canvas

  12. 在 [屬性] 視窗中,為 Button 設定下列屬性:

    屬性

    內容

    Cancel

    Canvas.Left

    283

    Canvas.Top

    120

    Width

    75

    Height

    23

  13. 在 [檔案] 功能表上,按一下 [全部儲存]。

測試配置

最後,您會執行應用程式並確認控制項有遵守絕對位置。

若要測試配置

  1. (選擇性) 如果您在先前步驟中鎖定視窗的大小,則必須解除鎖定才能執行這個程序。 在 [屬性] 視窗中,為 Window 設定下列屬性:

    屬性

    MinWidth

    0

    MinHeight

    0

    MaxWidth

    Infinity

    MaxHeight

    Infinity

    ResizeMode

    CanResize

  2. 按一下 [偵錯] 功能表上的 [開始偵錯]。

    應用程式會啟動且視窗會出現。

  3. 調整視窗的大小。

    控制項會遵守絕對位置,且不會變更大小或位置。

  4. 關閉視窗。

整合在一起

下面是已完成的 MainWindow.xaml 檔案:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

請參閱

工作

HOW TO:根據絕對位置建構配置

概念

WPF 設計工具中的對齊方式

版面配置

WPF 和 Silverlight 設計工具概觀

其他資源

配置逐步解說