介绍WPF常用布局控件

StackPanel

将子元素排列成水平或垂直的一行,通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺。StackPanel 中的子元素超出的部分,被截取被隐藏;StackPanel 自身可以嵌套使用,嵌套在其他布局控件中,和其他布局控件结合使用。

常用属性:

Orientation:堆叠维度,Horizontal(水平方向)、Vertical(垂直方向)

FlowDirection:在该控件排序方向,LeftToRight(内容流从左到右)、RightToLeft(内容从右到左)

WrapPanel

将子元素排列成水平或垂直的一行,如果超出将换行或者换列进行显示,子元素超出部分,会被截取被隐藏。相对来说,比stack Panel使用更有扩展性。

常用属性:

Orientation:堆叠维度,Horizontal(水平方向)、Vertical(垂直方向)

FlowDirection:在该控件排序方向,LeftToRight(内容流从左到右)、RightToLeft(内容从右到左)

DockPanel

定义一个区域,从中可以按相对位置水平或垂直排列各个子元素,支持让元素简单地停靠在整个面板的某一条边上,然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

    <DockPanel LastChildFill="True">
        <Grid DockPanel.Dock="Left" Width="100" Background="Blue"></Grid>
        <Grid DockPanel.Dock="Top"  Height="20" Background="Red"></Grid>
        <Grid DockPanel.Dock="Bottom" Height="20" Background="Yellow"></Grid>
        <Grid DockPanel.Dock="Right" Width="100" Background="Green"></Grid>
        <Grid Background="DarkCyan"></Grid>
    </DockPanel>

常用属性:

LastChildFill:最后一个子元素拉伸以填充剩余的空间,则为 true;否则为 false

Dock:附加属性,Left(左部)、Top(顶部)、Right(右部)、Bottom(底部)

Grid

以表格形式布局元素,对于整个面板上的元素进行布局

 

    <!--ShowGridLines:显示网格线-->
    <Grid Margin="10,20,30,40" UseLayoutRounding="True">
        <!--定义行-->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--定义列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="&lt;第一行第一列&gt;" FontSize="25" xml:space="preserve"></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="&lt;第一行第二列&gt;" FontSize="25" xml:space="preserve"></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="2" Text="&lt;第一行第三列&gt;" FontSize="25" xml:space="preserve"></TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="0" Text="&lt;第二行第一列&gt;" FontSize="25" xml:space="preserve"></TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="&lt;第二行第二列&gt;" FontSize="25" xml:space="preserve"></TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="&lt;第二行第三列&gt;" FontSize="25" xml:space="preserve"></TextBlock>
        <GridSplitter Background="Red" Grid.RowSpan="2" Width="2" Grid.Column="0"></GridSplitter>
    </Grid>

常用属性:

SharedSizeGroup:共享尺寸组,主要用来布置两个grid中某一行或列尺寸相同

ShowGridLines:网格线

Row:附加属性,行位置,从0开始

Column:附加属性,列位置,从0开始

Canvas

Canvas面板用于使用相对于画布区域的坐标来定位子元素。

常用属性:

Left:左坐标位置

Top:顶部坐标位置

Right:右坐标位置

Bottom:底部坐标位置

ZIndex:数值越大,在容器垂直位置越置前

InkCanvas

InkCanvas,英文释义为墨水画布,它的基本属性和Canvas的属性差不多,不同之处是可以作为画板,可以通过InkCanvasEditingMode属性来学习

常用属性:

Left:左坐标位置

Top:顶部坐标位置

Right:右坐标位置

Bottom:底部坐标位置

EditingMode:None(初始化)、Ink(画笔)、GestureOnly(响应墨迹)、Select(选择)、EraseByPoint(橡皮)、EraseByStroke(清除线段)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值