【桌面開發】WPF設置控件大小和位置(涉及屬性Margin、HorizontalAlignment、VerticalAlignment、Width、height)

一、WPF和WinForm

大體上來說(注意,只能大體上類比)
1、WPF中的HorizontalAlignment 和 VerticalAligment相當於winForm中的Dock;
2、WPF中的Margin相當於winForm中的Location(x,y)和Anchor;
3、WPF中的Padding在winForm中的Padding(winForm基礎控件有Padding,一些控件如webbrowser沒有Padding);
4、WPF中的HorizontalContentAlignment 和 VerticalContentAligment相當於winForm中TextAlign、ImageAlign或自定義控件設置位置。

二、Grid

2.1 Grid中各個屬性

Grid中,子控件的HorizontalAlignment/VerticalAlignment屬性有效

默認HorizontalAlignment 爲 stretch ,margin 默認爲 0,0,0,0

在這裏插入圖片描述

2.2 控件width=auto

第一種情況: width=auto(auto也是有值,第一種和第二種是一樣的)

HorizontalAlignment取left,margin-right無效,button大小受width、height控制,button位置受margin-left控制;下圖中,右邊爲開鎖表示marign-right無效。
在這裏插入圖片描述
HorizontalAlignment取right,margin-left無效,button大小受width、height控制,button位置受margin-right控制;下圖中,左邊爲開鎖表示 margin-left 無效。

在這裏插入圖片描述

HorizontalAlignment取center,margin-left和margin-right均無效但是保存間隔差,button大小受width、height控制,button位置受父容器大小、margin-left與margin-right間隔差控制;下圖中,左右兩邊爲開鎖,表示margin-left 和 margin-right 均失效,當兩個都失效時,會保留間隔差。

在這裏插入圖片描述

HorizontalAlignment取stretch,margin-left和margin-right均有效但是width、height無效;button大小受margin-right - margin-left控制,button位置受margin-left控制;下圖中,左右兩邊爲閉鎖,表示margin-left 和 margin-right 均有效,當兩個都有效時,拉伸控制大小。

在這裏插入圖片描述

2.3 控件width=50

第二種情況: width=50 (auto也是有值,第一種和第二種是一樣的)

HorizontalAlignment取left,margin-right無效,button大小受width、height控制,button位置受margin-left控制;下圖中,右邊爲開鎖表示marign-right無效。

在這裏插入圖片描述
HorizontalAlignment取right,margin-left無效,button大小受width、height控制,button位置受margin-right控制;下圖中,右邊爲開鎖表示marign-left無效。

在這裏插入圖片描述

HorizontalAlignment取center,margin-left和margin-right均無效但是保存間隔差,button大小受width、height控制,button位置受父容器大小、margin-left與margin-right間隔差控制;下圖中,左右兩邊爲開鎖,表示margin-left 和 margin-right 均失效,當兩個都失效時,會保留間隔差。
在這裏插入圖片描述

HorizontalAlignment取stretch,margin-left和margin-right均無效但保存間隔差;button大小受width height控制,button位置受父容器大小和 margin-left 與 margin-right 間隔差控制;下圖中,左右兩邊爲閉鎖,表示margin-left 和 margin-right 均有效,當兩個都有效時,拉伸控制大小,但是width優先級高。

在這裏插入圖片描述

若設置爲width=auto height =auto,馬上,margin-left和margin-right均有效但是width、height無效;button大小受margin-right - margin-left控制,button位置受margin-left控制;下圖中,左右兩邊爲閉鎖,表示margin-left 和 margin-right 均有效,當兩個都有效時,拉伸控制大小。

在這裏插入圖片描述

2.4 Grid中控件大小位置設置小技巧(涉及width/height、Margin、HorizontalAlignment、VerticalAlignment)

1、若width有具體值,一定按該值設置大小,最高優先級;
然後關於設置位置,HorizontalAlignment 爲 left ,使用marign-left 設置位置;
HorizontalAlignment 爲 right,使用marign-right設置位置;
HorizontalAlignment 爲 center 或 stretch,使用margin-left 與 marign-right間隔差、父容器大小設置位置;

2、若width是auto值,除stretch外,均自動大小
HorizontalAlignment 爲 left ,使用marign-left 設置位置;
HorizontalAlignment 爲 right,使用marign-right設置位置;
HorizontalAlignment 爲 center ,使用margin-left 與 marign-right間隔差、父容器大小設置位置;
HorizontalAlignment 爲 stretch,使用margin-left 設置位置,margin.right - margin.left 設置大小;

3、width自動和具體值只有stretch不同,其他三種left right center相同。

4、看圖標:left左邊閉鎖,右邊開鎖;right左邊開鎖,右邊閉鎖;center兩邊開鎖;stretch兩邊閉鎖。

2.5 注意:Grid中,margin只是子控件對父容器,同一級別子控件對子控件是無效的。

Grid中,margin只是子控件對父容器,同一級別子控件對子控件是無效的。
在這裏插入圖片描述

三、StackPanel

3.1 StackPanel中各個屬性

A、當其Orientation屬性等於Horizontal時,其子控件的HorizontalAlignment屬性無效,全部按控件間的margin-left margin-right來,控件間margin互相影響,VerticalAlignment屬性有效,效果和最常見的Grid一樣。
B、當其Orientation屬性等於Vertical時,其子控件的HorizontalAlignment屬性有效,效果和最常見的Grid一樣,VerticalAlignment屬性無效,全部按控件間的margin-top margin-bottom來,控件間margin互相影響,一樣的,不演示了。

3.2 StackPanel中Orientation=“Horizontal”

3.2.1 width=“auto” height=“auto”

verticalAligment爲stretch,上下閉鎖,都有效。
在這裏插入圖片描述
VerticalAlignment=“top”

在這裏插入圖片描述

VerticalAlignment=“bottom”
在這裏插入圖片描述

VerticalAlignment=“center”
在這裏插入圖片描述

3.2.1 width=50 height=30

width = 50 height = 30

VerticalAlignment=“stretch” ( VerticalAlignment=“center” 也一樣,都是間隔差 )

在這裏插入圖片描述
VerticalAlignment=“top” VerticalAlignment=“bottom”
在這裏插入圖片描述

四、Canvas

其子控件的HorizontalAlignment/VerticalAlignment屬性無效,但是marign還是有效的,全部按margin.top margin.left canvas.top canvas.left 對控件座標定位

當width/height爲auto時,使用auto設置大小;當width/height爲具體值時,使用具體值設置大小。

至於位置,用marign.left margin.top canvas.left canvas.top來設置。

margin.bottom和marign.right無用。

margin間不會相互影響,canvas.top canvas.left也不會相互影響,僅對父容器Canvas負責。

在這裏插入圖片描述

注意,在Canvas中,不要將Margin設置爲負數。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章