合肥程式設計師群：49313181。 合肥實名程式設計師群：128131462 (不願透露姓名和資訊者勿加入)
q q:408365330 e-mail:[email protected]
所有介面程式開發都是從布局開始，好的布局讓人善心悅目。對於windows 開發人員設計使用者介面的方法，wpf有重大的改進。wpf布局系統使用基於流布局標準。wpf使用xaml這種基於xml格式的文件定義去布局和做介面。它很好的使設計人員和coder分開。這裡給大家推薦一款很好的wpf設計人員使用的工具expression blend。這個可以設計出非常漂亮的wpf介面。功能當然比vs自帶強大很多。
wpf布局和之前的winform布局相比已經是一門藝術（個人見解）。做好了可以適應各種解析度裝置並且看起來更加好看，做不好就是奇醜無比。：）。而且wpf不學布局，我們很難開始編碼。嘗試下就知道差距有多大。
在wpf中布局是一門比較專業的學問。和winform有著很大的區別。wpf中使用最為廣泛的就是grid。grid控制面板是wpf種最強大的布局容器。grid將元素分割到不可見的行列網格中。當然單元格中可以去放其它布局元素。在grid布局的時候有這樣乙個原則就是沒個單元格乙個元素。
新建乙個wpf專案。
自動新增的**如下：
<這個很容易看出在window節點下預設生成了grid節點。首先我們需要定義行和列，在這裡我們定義兩行兩列。window
x:class
="wpfgrid.mainwindow"
xmlns
=""xmlns:x
=""title
="mainwindow"
height
="350"
width
="525"
>
<
grid
>
grid
>
window
>
<分別定義了rowdefinitions和columndefinitions。這樣就會出現如圖所示，我們可以將元素放置到相應的單元格中。grid
dockpanel.dock
="left"
horizontalalignment
="stretch"
verticalalignment
="stretch"
showgridlines
="true"
>
<
grid.rowdefinitions
>
<
rowdefinition
>
rowdefinition
>
<
rowdefinition
>
rowdefinition
>
grid.rowdefinitions
>
<
grid.columndefinitions
>
<
columndefinition
width
="206*"
>
columndefinition
>
<
columndefinition
width
="845*"
>
columndefinition
>
grid.columndefinitions
>
grid
>
那怎麼將元素放入相應的單元格呢？可以通過grid.row和grid.column來設定元素所在行和列來設定單元格。這裡我們不考慮布局的合理性。在做邊第一列的兩行上面放置乙個樹控制項（我們這裡很多控制項是dev控制項，dev控制項就不做過多介紹。只介紹wpf自帶控制項）這樣grid中的布局**就如下：
<我們很容易看到treelist控制項中有grid.row="0"，也就是讓它在第一行。grid.column="0"。樹被放在了第一行，第一列。但是其中有乙個很重要的屬性別忘了。我們這裡跨行了，那麼grid.rowspan=「2」就指明我們跨兩行。verticalalignment="stretch" horizontalalignment="stretch"這兩個屬性就是元素的橫向布局和縱向布局都是平鋪滿。參照執行下圖：grid
dockpanel.dock
="left"
horizontalalignment
="stretch"
verticalalignment
="stretch"
showgridlines
="true"
>
<
grid.rowdefinitions
>
<
rowdefinition
/>
<
rowdefinition
/>
grid.rowdefinitions
>
<
grid.columndefinitions
>
<
columndefinition
width
="206*"
/>
<
columndefinition
width
="845*"
/>
grid.columndefinitions
>
<
dxg:treelistcontrol
grid.row
="0"
autopopulatecolumns
="true"
grid.rowspan
="2"
verticalalignment
="stretch"
horizontalalignment
="stretch"
>
<
dxg:treelistcontrol.columns
>
<
dxg:treelistcolumn
/>
<
dxg:treelistcolumn
/>
<
dxg:treelistcolumn
/>
<
dxg:treelistcolumn
/>
<
dxg:treelistcolumn
/>
dxg:treelistcontrol.columns
>
<
dxg:treelistcontrol.view
>
<
dxg:treelistview
showtotalsummary
="true"
/>
dxg:treelistcontrol.view
>
dxg:treelistcontrol
>
grid
>
之前我設定了grid的屬性showgridlines="true".就是讓grid有邊框這樣便於我們理解。grid有hight屬性和width屬性。上面**中rowdefinition 的height屬性我沒做設定，預設的是上下等分。也就是兩行一樣高。其實height有幾種設定。可以給乙個固定值，例如height="60",也可以是這樣的形式height="*",在本例子用我們可以將第一行設定成height="60",第二行設定成height="*".因為只有兩行，這樣有乙個好處就是我們明確了第一行的高度，第二行就可以行分配剩下的作為高度。這樣不需要人為去計算沒一行的高度，我們將剩下的都作為一行就行了。columndefinition的width也有同樣的設定方式。同樣grid有乙個很好的屬性。學過html的可能很好理解。乙個margin屬性，設定元素的外邊距，panding設定布局元素的內邊距，是不是很熟悉。
跨越行我們已經用過rowspan它的值是跨越的行數。列也有同樣的設定方式。
對於grid的基本應學會了。grid一般用來做整體的布局，細微的布局和調整可能是其它元素，這有點類似於html早前的table布局（現在div+css較多）。
學到這裡我們可以用grid做基本的布局了。
遲到的 WPF 學習 布局
布局是 wpf 很重頭的一部分內容，這一部分梳理和記錄關於布局章節的知識點。1.wpf 使用一種基於流 flow based 的概念來處理布局邏輯，將傳統的基於 座標 的思想盡力的捨棄掉，而是用相對和智慧型的方式，它使得開發人員可以建立與顯示解析度和視窗大小無關的 在不同顯示裝置上可以進行縮放調整的...
WPF學習筆記02 布局
wpf視窗只能包含單個元素。如果要放置多個元素，需要放置乙個容器，然後在容器中新增元素。前兩個是為了使得wpf程式更加靈活，在不同的裝置上能靈活適應，能處理動態內容。總的目標都是為了建立更好更靈活的使用者介面。簡單地在單行或單列中以堆疊方式放置其子元素。預設按照自上而下地順序排列元素。通過設定ori...
WPF之路 WPF布局系統
0，什麼是布局 這是乙個很簡單的問題。簡單來說，就是把一些控制項有條理的擺放在介面上合適的位置，顯然擺的亂七八糟不能算布局。在wpf中，這個條理與winform中略有不同，讓我們看個很簡單的介面 這樣子的介面大家在熟悉不過了。依圖所示，wpf先用藍線 假設的線 將介面劃分為上下兩部分，然後再有紅線劃...