WPF布局控件 - 爱码网

一、 Grid

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

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

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

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

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

1in=96px

1cm=(96/2.54)px

1pt=(96/72) px

c. 示例

01

<Window x:Class="DeepXAML.MainWindow"

02

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

03

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

04

        xmlns:local="clr-namespace:DeepXAML"       

05

        Title="MainWindow" Height="250" Width="450"> 

06

    <Window.Resources> 

07

      <Style TargetType="Button"> 

08

            <Setter Property="Margin" Value="5"></Setter> 

09

        </Style> 

10

    </Window.Resources>     

11

    <Grid ShowGridLines="True" > 

12

        <Grid.RowDefinitions> 

13

            <RowDefinition Height="50"></RowDefinition> 

14

            <RowDefinition Height="20"></RowDefinition> 

15

            <RowDefinition Height="2*"></RowDefinition> 

16

            <RowDefinition Height="*"></RowDefinition> 

17

            <RowDefinition></RowDefinition>             

18

        </Grid.RowDefinitions> 

19

        <Button Grid.Row="0">50</Button> 

20

        <Button Grid.Row="1">20</Button> 

21

        <Button Grid.Row="2">2*</Button> 

22

        <Button Grid.Row="3">*</Button> 

23

        <Button Grid.Row="4"></Button> 

24

    </Grid> 

25
</Window>

如果没有设置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布局的一个好处是缩放不会改变相对位置。

01

<Window x:Class="DeepXAML.MainWindow"

02

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

03

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

04

        xmlns:local="clr-namespace:DeepXAML"       

05

        Title="MainWindow" Height="250" Width="450"> 

06

    <Window.Resources> 

07

      <Style TargetType="Button"> 

08

            <Setter Property="Margin" Value="5"></Setter> 

09

        </Style> 

10

    </Window.Resources>     

11

    <Grid ShowGridLines="True" > 

12

        <DockPanel > 

13

            <Button DockPanel.Dock="Top">Top</Button> 

14

            <Button DockPanel.Dock="Left" Background="Yellow">Left</Button> 

15

            <Button DockPanel.Dock="Left" Background="LemonChiffon">Left</Button> 

16

            <Button DockPanel.Dock="Top">Top</Button> 

17

            <Button DockPanel.Dock="Right">Right</Button> 

18

            <Button DockPanel.Dock="Left">Left</Button> 

19

            <Rectangle Fill="Crimson"></Rectangle> 

20

        </DockPanel> 

21

    </Grid> 

22
</Window>

5. WrapPanel

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