WPF布局控件

一、 Grid

a. 单元格的宽度可以设置三类值

绝对值：double数值加单位后缀

比例值：double数值加一个星号*

自动值:  auto,高度将有内部的控件的高度和宽度决定。

b. Grid可接受的宽度和高度的单位

1in=96px

1cm=(96/2.54)px

1pt=(96/72) px

c. 示例

view sourceprint?

<code>01</code>

<code>&lt;Window x:Class=</code><code>"DeepXAML.MainWindow"</code>

<code>02</code>

<code>        </code><code>xmlns=</code><code>"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</code>

<code>03</code>

<code>        </code><code>xmlns:x=</code><code>"http://schemas.microsoft.com/winfx/2006/xaml"</code>

<code>04</code>

<code>        </code><code>xmlns:local=</code><code>"clr-namespace:DeepXAML"</code>       

<code>05</code>

<code>        </code><code>Title=</code><code>"MainWindow"</code> <code>Height=</code><code>"250"</code> <code>Width=</code><code>"450"</code><code>&gt;</code>

<code>06</code>

<code>    </code><code>&lt;Window.Resources&gt;</code>

<code>07</code>

<code>      </code><code>&lt;Style TargetType=</code><code>"Button"</code><code>&gt;</code>

<code>08</code>

<code>            </code><code>&lt;Setter Property=</code><code>"Margin"</code> <code>Value=</code><code>"5"</code><code>&gt;&lt;/Setter&gt;</code>

<code>09</code>

<code>        </code><code>&lt;/Style&gt;</code>

<code>10</code>

<code>    </code><code>&lt;/Window.Resources&gt;    </code>

<code>11</code>

<code>    </code><code>&lt;Grid ShowGridLines=</code><code>"True"</code> <code>&gt;</code>

<code>12</code>

<code>        </code><code>&lt;Grid.RowDefinitions&gt;</code>

<code>13</code>

<code>            </code><code>&lt;RowDefinition Height=</code><code>"50"</code><code>&gt;&lt;/RowDefinition&gt;</code>

<code>14</code>

<code>            </code><code>&lt;RowDefinition Height=</code><code>"20"</code><code>&gt;&lt;/RowDefinition&gt;</code>

<code>15</code>

<code>            </code><code>&lt;RowDefinition Height=</code><code>"2*"</code><code>&gt;&lt;/RowDefinition&gt;</code>

<code>16</code>

<code>            </code><code>&lt;RowDefinition Height=</code><code>"*"</code><code>&gt;&lt;/RowDefinition&gt;</code>

<code>17</code>

<code>            </code><code>&lt;RowDefinition&gt;&lt;/RowDefinition&gt;            </code>

<code>18</code>

<code>        </code><code>&lt;/Grid.RowDefinitions&gt;</code>

<code>19</code>

<code>        </code><code>&lt;Button Grid.Row=</code><code>"0"</code><code>&gt;50&lt;/Button&gt;</code>

<code>20</code>

<code>        </code><code>&lt;Button Grid.Row=</code><code>"1"</code><code>&gt;20&lt;/Button&gt;</code>

<code>21</code>

<code>        </code><code>&lt;Button Grid.Row=</code><code>"2"</code><code>&gt;2*&lt;/Button&gt;</code>

<code>22</code>

<code>        </code><code>&lt;Button Grid.Row=</code><code>"3"</code><code>&gt;*&lt;/Button&gt;</code>

<code>23</code>

<code>        </code><code>&lt;Button Grid.Row=</code><code>"4"</code><code>&gt;&lt;/Button&gt;</code>

<code>24</code>

<code>    </code><code>&lt;/Grid&gt;</code>

<code>25</code>

<code>&lt;/Window&gt;</code>

如果没有设置height,实际上这个height默认被设置为1*, 这里说一下星号(*),解析器会把左右比例值加起来作为分母，把每个比例值做为分子，乘以未被占用的像素数，这样就算出每一个具体的值。

我们假设总高为200，那么上面的2*=(2/(2+1+1))*(200-70)=(1/2)*130=65

另外可以像HTML表格一样使用RowSpan和ColumnSpan

2. StackPanel

控件从左向右或者从上向下排列控件，有一个Orientation枚举，还可以使用HorizontalAlignment和VerticalAlignment来进行对齐。

3. Canvas

使用横纵坐标绝对点定位，很好理解，使用Canvas.Left, Canvas.Top来定位

4. DockPanel

DockPanel使用Dock属性来定位，DockPanel.Dock枚举可取值Left, Top, Right, Bottom四个值，下一个元素会使用剩下方向的全部空间，所以控件摆放顺序会影响布局。Dock布局的一个好处是缩放不会改变相对位置。

<code>        </code><code>&lt;DockPanel &gt;</code>

<code>            </code><code>&lt;Button DockPanel.Dock=</code><code>"Top"</code><code>&gt;Top&lt;/Button&gt;</code>

<code>            </code><code>&lt;Button DockPanel.Dock=</code><code>"Left"</code> <code>Background=</code><code>"Yellow"</code><code>&gt;Left&lt;/Button&gt;</code>

<code>            </code><code>&lt;Button DockPanel.Dock=</code><code>"Left"</code> <code>Background=</code><code>"LemonChiffon"</code><code>&gt;Left&lt;/Button&gt;</code>

<code>            </code><code>&lt;Button DockPanel.Dock=</code><code>"Right"</code><code>&gt;Right&lt;/Button&gt;</code>

<code>            </code><code>&lt;Button DockPanel.Dock=</code><code>"Left"</code><code>&gt;Left&lt;/Button&gt;</code>

<code>            </code><code>&lt;Rectangle Fill=</code><code>"Crimson"</code><code>&gt;&lt;/Rectangle&gt;</code>

<code>        </code><code>&lt;/DockPanel&gt;</code>

5. WrapPanel

这个和StatckPanel类似，就是排不下的控件会新起一行或者一列