WPF中的布局

在WPF应用程序界面设计中，合理的布局，可以方便用户的使用。

WPF作为专业的界面技术，布局功能是它的核心技术之一。

下面是WPF中XAML常用的几种布局元素。

    Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。

代码：

<Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="1*"/>

            <RowDefinition Height="1*"/>

            <RowDefinition Height="1*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="1*"/>

            <ColumnDefinition Width="1*"/>

            <ColumnDefinition Width="1*"/>

        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="1">第一行，第二列</Button>

        <Button Grid.Row="1" Grid.Column="0">第二行，第一列</Button>

        <Button Grid.Row="1" Grid.Column="2">第二行，第三列</Button>

        <Button Grid.Row="2" Grid.Column="1">第三行，第二列</Button>

</Grid>

界面：

Grid的特点：可以定义任意数量的行和列，非常灵活。内部元素可以设置自己所在的行和列

 

StackPanel：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。

代码：

        <StackPanel x:Name="stackpanel"  Orientation="Vertical" >

            <Button Content="第三个"></Button>

            <Button Content="第四个"></Button>

            <Button Content="第三个"></Button>

            <Button Content="第四个"></Button>

        </StackPanel>

界面：Orientation="Vertical"（垂直）         Orientation=" Horizontal"（水平）

 

StackPanel的特点：每个元素各占一行或者一列，Orientation属性指定排列方式：Vertical(垂直)【默认】、Horizontal(水平)

Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位。

代码：

<Canvas ClipToBounds="False">

        <TextBox Width="100" BorderBrush="Blue" Height="25"/>

        <TextBox Canvas.Left="205" Canvas.Top="108" Width="100" BorderBrush="Green"></TextBox>

        <Button  Canvas.Right="10" Canvas.Bottom="10" Content="按钮"></Button>

        <Button Height="175" Canvas.Right="10" Canvas.Bottom="10" Content="按钮" Canvas.Left="312" Canvas.Top="220" RenderTransformOrigin="0.464,0.5"></Button>

</Canvas>

界面：如果将ClipToBounds属性设为true，在设计界面将会对子元素的超出部分进行裁剪

Canvas的特点：一经设计，基本上不用再有改动，艺术性较强的布局。

WrapPanel：自动折行面板。内部元素在排满一行后能够自动折行。

代码：

        <WrapPanel Orientation="Horizontal" ItemWidth="100" Background="#FF99B4D1" >

            <Button Width="100">按钮1</Button>

            <Button Width="100">按钮1</Button>

            <Button Width="100">按钮1</Button>

            <Button Width="100">按钮1</Button>

            <Button Width="100">按钮1</Button>

            <Button Width="100">按钮1</Button>

        </WrapPanel>

界面：Orientation="Horizontal"（元素是从左向右排列的，然后自上至下自动换行）

       Orientation="Vertical"（元素是从上向下排列的，然后从左至右自动换行）

 

DockPanel：泊靠式面板。内部元素可以选择泊靠的方向（上下左右），指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。

代码：

     <DockPanel LastChildFill="True" >

        <Button DockPanel.Dock="Top">第一个向上</Button>

        <Button DockPanel.Dock="Left">第二个向左</Button>

        <Button DockPanel.Dock="Bottom">第三个向下</Button>

        <Button DockPanel.Dock="Right">第四个向右</Button>

        <Button Background="Red"></Button>

</DockPanel>

界面：无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间

可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。