欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

XAML之四布局元素

程序员文章站 2022-06-08 15:09:26
...

开发工具:Visual Studio
关键技术:XAML
作者:陈华周
撰写时间:2019年5月28日

DockPanel泊靠式面板
DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。
停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序。
在DockPanel中,指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。

默认情况下,后添加的元素只能使用剩余空间,无论对DockPanel的最后一个子元素设置任何停靠值,该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域,可以将DockPanel属性LastChildFill设置为false,还必须为最后一个子元素显式指定停靠方向。
使用场合:
DockPanel停靠容器,专门负责自适应窗口的布局。
DockPanel泊靠式面板代码:

<!--LastChildFill 最后元素不填充-->
<DockPanel LastChildFill="False">
    <Button DockPanel.Dock="Left" Content="按钮左"/>
    <Button DockPanel.Dock="Top" Content="按钮上"/>
    <Button DockPanel.Dock="Right" Content="按钮右"/>
    <Button DockPanel.Dock="Bottom" Content="按钮下"/>
    
    <Button DockPanel.Dock="Left" Content="按钮左"/>
    <Button DockPanel.Dock="Top" Content="按钮上"/>
    <Button DockPanel.Dock="Right" Content="按钮右"/>
    <Button DockPanel.Dock="Bottom" Content="按钮下"/>
StackPanel栈式面板 StackPanel就是将控件按照行或列来顺序排列,但不会换行。 通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。 默认情况下,水平排列时,每个元素都与面板一样高;垂直排列时,每个元素都与面板一样宽。如果包含的元素超过了面板空间,它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性。 特点: 每个元素各占一行或者一列。 使用场合: 同类元素需要紧凑排列(如制作菜单和列表)。 移除其中的元素后能够自动补缺的布局或者动画。 StackPanel栈式面板代码:
<!--Orientation:Horizontal(横排)/Vertical(竖排)-->
    <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
        <GroupBox Header="技术分类" Height="Auto">
            <StackPanel>
                <Button Content=".net技术(16)"/>
                <Button Content="编程技术(13)" />
                <Button Content="软件设计(3)"/>
                <Button Content="Web前端(16)"/>
                <Button Content="软件工程(26)"/>
            </StackPanel>
        </GroupBox>
        <GroupBox Header="链接" VerticalAlignment="Stretch">
            <StackPanel Orientation="Vertical">
                <Button Content="反馈和建议"/>
                <Button Content="官方博客"/>
                <Button Content="电子期刊"/>
                <Button Content="人才服务"/>
                <Button Content="博客模板"/>
            </StackPanel>
        </GroupBox>
        <!--HorizontalAlignment水平对齐-->
        <!--FlowDirection流向-->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" FlowDirection="LeftToRight">
            <Button Content="陈华周" Margin="5,0,0,0"/>
            <Button Content="我的博客" Margin="5,0,0,0"/>
            <Button Content="短消息" Margin="5,0,0,0"/>
            <Button Content="设置" Margin="5,0,0,0"/>
            <Button Content="退出" Margin="5,0,0,0"/>
        </StackPanel>
    </StackPanel>

WrapPanel自动折行面板(环绕面板)
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。

 Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行。

ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。
WrapPanel自动折行面板(环绕面板)代码:

<!--Orientation:Horizontal(横排)/Vertical(竖排)-->
    <WrapPanel Orientation="Vertical">
        <Button Width="100" Content="按钮1"/>
        <Button Width="100" Content="按钮1"/>
        <Button Width="100" Content="按钮1"/>
        <Button Width="100" Content="按钮1"/>
        <Button Width="100" Content="按钮1"/>
        <Button Width="100" Content="按钮1"/>
    </WrapPanel>

Canvas画布面板
画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。
使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元素都将出现在画布的左上角。调整位置用Left、Right、Top和Bottom四个附加属性。
如果Canvas是窗口主元素(即最外层的布局面板是Canvas),用户改变窗口大小时,Canvas也会随之变化,子元素的位置也会随之移动,以保证相对于Canvas的位置属性不变。
Canvas允许子元素的部分或全部超过其边界,默认不会裁剪子元素,同时可以使用负坐标,即溢出的内容会显示在Canvas外面,这是因为默认 ClipToBounds=”False”,因此画布不需要指定大小。如果想复制画布内容,将ClipToBounds设为true即可。
Canvas画布面板代码:

<Canvas ClipToBounds="True">
        <TextBox Width="100" BorderBrush="Blue"/>
        <TextBox Width="200" BorderBrush="Green" Canvas.Left="100" Canvas.Top="120"/>
<Button Height="30" Width="100" Content="按钮" Canvas.Right="0" Canvas.Bottom="-10"/>
</Canvas>

注意:要说明一点Canvas内的子控件不能使用两个以上的Canvas附加属性,如果同时设置Canvas.Left和Canvas.Right属性,那么后者将会被忽略。

相关标签: XAML WPF