WPF佈局

時間 2019-12-09

標籤 wpf 佈局简体版

原文原文鏈接

WPF 佈局原理：工具

　　WPF窗口，也是Window類，是一個內容控件，派生出自ContentControl佈局

佈局容器：spa

面板功能	說明
StackPanel	使用水平或者垂直堆疊的方式放置元素，簡單有用，適用於小範圍佈局
WarpPanel	當方向水平時，從左到右佈局，當寬度不夠時，從新開一個行從左到右佈局，垂直同理
DockPanel	使子元素依賴於特定邊緣，很靈活的佈局控件
Grid	Grid是WPF中最好用的佈局控件，相似一個不可見的HTML表格，將子元素放置於特定的行列
UniformGrid	將子元素放置在一個不可見的表格中，可是強制全部的表格具備相同的尺寸
Canvas	使用固定座標來絕對定位子元素

一：使用stackPanel佈局　　orm

<StackPanel>
<Button>按鈕1</Button>
<Button>按鈕2</Button>
<Button>按鈕3</Button>
<Button>按鈕4</Button>
<Button>按鈕</Button>blog

</StackPanel>開發

哈哈如今看起來挺醜的吧it

默認狀況下 Stackpanel 從上到下排列控件，控件高度與其內容高度相匹配。io

Stackpanel屬性:Orientation 取值: Horizontal (從左到右) Vertical (從上到下) table

Stackpanel內元素屬性：HorizontalAlignment 枚舉屬性獲取或設置在父元素中構成此元素時應用於此元素的水平對齊特徵.ast

　　　　　　　　　　　 VerticalAlignment 枚舉屬性獲取或者設置在父元素中構成此元素時應用於此元素的垂直對齊特徵。

仍是舉例子說吧俗話說No picture Say a J8 因此上圖：

StackPanel 佈局屬性: stackpanle 提供了一些設定子元素在父元素中的呈現方式的屬性。使用這些屬性開發人員能夠控制子元素在stackpanel中的佈局方式，除了上面的對齊屬性外，還具備以下的佈局屬性：

屬性名稱	屬性說明
Margin	能夠在子元素四周增長空白，Margin是 System.Windows.thickness結構的屬性，也能夠只定義一個值，則上下左右都具備一樣的值。
MinWidth和MinHeight	設置元素最小尺寸，若是元素大於容器大小，則會被剪裁
MaxWith和MaxHeight	設置元素的最大尺寸，若是元素大於容器大小，則會被剪裁
Width和Height	設置固定的元素大小這個屬性會覆蓋HorizontalAligment 和 VerticalAligment屬性的設置

例：

固然這個佈局也能夠在程序裏修改：
　　 btn5.Margin = new Thickness(80);

　　　或者

　　 btn5.Margin = new Thickness(5,5,5,5);

在調整頁面大小時，可使用最大化和最小化尺寸來鎖定控件在的正確大小範圍哦。

二使用WarpPanel 和 DockPanel

1.WarpPanel 改控件根據Orientation 屬性，在垂直放控件或者在行中放置控件方面，WarpPanel 和 Stack相似。除了疊放外還爲包含的控件提供了換行支持所以若是在WarpPanel中紡入超過其容器寬度的內容時，這些控件被換行顯示爲造成換行的效果。

上代碼:

<WrapPanel>
        <Button Height="60">按鈕一</Button>
        <Button VerticalAlignment="Top">按鈕二</Button>
        <Button VerticalAlignment="Center">按鈕三</Button>
        <Button VerticalAlignment="Center">按鈕四</Button>
        <Button VerticalAlignment="Bottom">按鈕五</Button>
    </WrapPanel>

2.DockPanel DockPanel提供停靠支持以便讓工具欄或者用戶但願停靠在面板的一側容易定位。

DockPanel 控件提供了附加屬性Dock 這是一個枚舉類型控制要停靠的容器邊緣

Left 　　
Top
Right
Bottom

    <DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top">上</Button>
        <Button DockPanel.Dock="Left">左</Button>
        <Button DockPanel.Dock="Right">右</Button>
        <Button DockPanel.Dock="Bottom" Height="60">下</Button>
        <Button>剩餘空間</Button>
    </DockPanel>

LastChildFill="True"
這個是默認設置  不管DockPanel最後一個子元素設置的停靠值是什麼  該子元素都
始終填充滿剩餘的空間 若是是False  則須要對最後一個元素設置停靠方向

　　　若是設置爲

 LastChildFill="Flase"  上圖：

若是想要讓左側佔滿整個高度須要改變左在XAML中的定義順序。開發人員也能夠經過調節Margin，HorizontalAligment,VerticalAligment等屬性來控制元素的顯示方式上圖：

<DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top">上</Button>
        <Button DockPanel.Dock="Top" HorizontalAlignment="Center">上</Button>
        <Button DockPanel.Dock="Top" HorizontalAlignment="Left">上</Button>
        <Button DockPanel.Dock="Left">左</Button>
        <Button DockPanel.Dock="Right">右</Button>
        <Button DockPanel.Dock="Bottom" Height="60">下</Button>
        <Button>剩餘空間</Button>
    </DockPanel>

怎麼樣簡單吧!! 接下來練習一下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。