逐步解說:根據絕對位置建構配置
在絕對位置中,排列子項目的方式是指定他們相對於父項目的準確位置。 例如,在面板上排列控制項的方式,是指定控制項相對於面板的左方和上方座標。 如需詳細資訊,請參閱使用絕對和動態位置進行配置。
WPF Designer for Visual Studio 提供的 Canvas 面板控制項可以支援絕對位置。 您可以使用 Canvas 面板控制項,在應用程式中絕對定位項目。
重要
可能的話,最好是使用動態配置。動態配置是最具彈性的,能適應內容的變更 (例如當地語系化),並最能讓使用者掌控他們的環境。如需動態配置的範例,請參閱逐步解說:使用 WPF 設計工具建立可調整大小的應用程式和逐步解說:建構動態配置。
在這個逐步解說中,您會執行下列工作:
建立 WPF 應用程式
將 Canvas 面板控制項加入到應用程式中。
將控制項加入面板中。
測試配置。
下圖顯示應用程式的顯示方式。
注意
根據您目前使用的設定或版本,您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。若要變更設定,請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊,請參閱 Visual Studio 設定。
必要條件
您需要下列元件才能完成此逐步解說:
- Visual Studio 2012 RC
建立專案
第一個程序是要建立應用程式的專案。
若要建立專案
在 Visual Basic 或 Visual C# 中,建立名為 AbsoluteLayout 的新 WPF 應用程式專案。 如需詳細資訊,請參閱 HOW TO:建立新的 WPF 應用程式專案。
注意
在這個逐步解說中,您將不會撰寫任何程式碼。您為專案選擇的語言是應用程式中用於程式碼後置 (Code-Behind) 頁面的語言。
MainWindow.xaml 隨即在 WPF Designer中開啟。
在 [設計] 檢視中選取視窗。 如需詳細資訊,請參閱 HOW TO:在設計介面上選取並移動項目。
在 [屬性] 視窗中,為 Window 設定下列屬性:
屬性
值
Width
400
Height
200
提示
您也可以在 [設計] 檢視中使用調整大小控點來調整視窗的大小。
(選擇性) 若要鎖定視窗的大小,請使用下列其中一個方法:
在 [檔案] 功能表上,按一下 [全部儲存]。
加入面板控制項
根據預設,新的 WPF 應用程式包含具有 Grid 面板的 Window。 若要根據絕對位置建立配置,必須使用 Canvas 面板。 在這個程序中,您會移除預設 Grid 並加入 Canvas。
若要加入面板控制項
在 [設計] 檢視中選取方格。
按 DELETE 鍵刪除 Grid。
在 [屬性] 視窗中,將 Canvas 的 Height 屬性設定為 Auto。
在 [屬性] 視窗中,將 Canvas 的 Width 屬性設定為 Auto。
在 [檔案] 功能表上,按一下 [全部儲存]。
將控制項加入面板中
接下來,您會將控制項加入面板中,並使用 Canvas 的 Left 和 Top 附加屬性以絕對定位控制項。
若要將控制項加入面板中
在 [屬性] 視窗中,為 Label 設定下列屬性:
屬性
值
內容
姓名:
Canvas.Left
20
Canvas.Top
20
Width
120
Height
23
在 [屬性] 視窗中,為 Label 設定下列屬性:
屬性
值
內容
Password:
Canvas.Left
20
Canvas.Top
60
Width
120
Height
23
在 [屬性] 視窗中,為 TextBox 設定下列屬性:
屬性
值
Canvas.Left
160
Canvas.Top
20
Width
200
Height
23
在 [屬性] 視窗中,為 TextBox 設定下列屬性:
屬性
值
Canvas.Left
160
Canvas.Top
60
Width
200
Height
23
在 [屬性] 視窗中,為 Button 設定下列屬性:
屬性
值
內容
OK
Canvas.Left
196
Canvas.Top
120
Width
75
Height
23
在 [屬性] 視窗中,為 Button 設定下列屬性:
屬性
值
內容
Cancel
Canvas.Left
283
Canvas.Top
120
Width
75
Height
23
在 [檔案] 功能表上,按一下 [全部儲存]。
測試配置
最後,您會執行應用程式並確認控制項有遵守絕對位置。
若要測試配置
(選擇性) 如果您在先前步驟中鎖定視窗的大小,則必須解除鎖定才能執行這個程序。 在 [屬性] 視窗中,為 Window 設定下列屬性:
屬性
值
MinWidth
0
MinHeight
0
MaxWidth
Infinity
MaxHeight
Infinity
ResizeMode
CanResize
按一下 [偵錯] 功能表上的 [開始偵錯]。
應用程式會啟動且視窗會出現。
調整視窗的大小。
控制項會遵守絕對位置,且不會變更大小或位置。
關閉視窗。
整合在一起
下面是已完成的 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>