当前位置:首页 > 技术知识 > 正文内容

WPF开发教程01-布局控件(wpf 表单布局)

布局控件是用于进行控件布局的容器类控件,其内部控件按照一定规律自动排列,且在父控件改变大小时,会自动适应。常用布局控件如下:

1. 一维布局控件(StackPanel)

其内部控件按照某个维度自动排列,排列方向通过Orientation属性控制。

  • 水平方向(Orientation=Horizontal)
<StackPanel Orientation="Horizontal">
    <Label Width="50" Height="50" Background="Red" Margin="10"></Label>
    <Label Width="50" Height="50" Background="Blue" Margin="10"></Label>
    <Label Width="50" Height="50" Background="Yellow" Margin="10"></Label>
</StackPanel>
  • 垂直方向(Orientation=Vertical)
<StackPanel Orientation="Horizontal">
    <Label Width="50" Height="50" Background="Red" Margin="10"></Label>
    <Label Width="50" Height="50" Background="Blue" Margin="10"></Label>
    <Label Width="50" Height="50" Background="Yellow" Margin="10"></Label>
</StackPanel>

2. 停靠布局控件(DockPanel)

指定控件停靠区域,默认为充满,通过在子控件中指定DockPanel.Dock来确定停靠位置

<DockPanel>
    <Label DockPanel.Dock="Left" Background="Red">靠左停靠</Label>
    <Label DockPanel.Dock="Right" Background="Blue">靠右停靠</Label>
    <Label DockPanel.Dock="Top" Background="Yellow">靠上停靠</Label>
    <Label DockPanel.Dock="Bottom" Background="LemonChiffon">靠下停靠</Label>
    <Label Background="AliceBlue">充满</Label>
</DockPanel>

3. 二维布局控件(Grid)

该控件为WPF中最常用的布局控件,提供二维方向的控件布局。类似于一个EXCEL表格;控件中,通过`ColumnDefinitions`和`RowDefinitions`定义行和列信息。其内部子控件,通过Grid.Row和Grid.Column属性指定控件所在单元格,通过Grid.RowSpan和Grid.ColumnSpan属性指定控件的列跨度和行跨度(类似于EXCEL中的合并单元格)

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <!--指定列宽度为100像素-->
        <ColumnDefinition Width="100"></ColumnDefinition>
        <!--表示列宽度自适应内容-->
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <!--未指定时,默认为*,表示按照剩余宽度分配,这里表示本列占据剩余宽度的1/3,下面2*列占据2/3-->
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition Width="2*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Background="Yellow">Label1</Label>
    <Label Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Background="Red">Label2</Label>
    <Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Background="AntiqueWhite">Label3</Label>
</Grid>

相关文章

验证码,除了 12306,我还没有服过谁

为了防止暴力注册或爬虫爬取等机器请求,需要验证操作者是人还是机器,便有了验证码这个设计。本文作者主要介绍了如何使用 Axure 来设计一个动态的图形验证码,一起来学习一下吧。在软件设计中,为了防止暴力...

登录注册产品需求自检清单,你都写全了没?

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。自己挖的坑一定要让别人给填好!一、登录(从PC端到移动端)移动端的登录沿袭了很多PC端的经验,但也有其独特的演变,我收...

Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法

以下几小教程使用的是Axure的动态面板来实现,内容简单,适合菜鸟查阅,老鸟可飘过,顺便帮忙点个赞哈/偷笑。一.伸缩/隐藏导航栏例如:鼠标移动到一级导航上,二级导航会下拉方式显示1.打开Axure,拖...

伪装成抖音国际版Tiktok的短信蠕虫

概述近期监测到一款仿冒Tiktok的短信蠕虫,该短信蠕虫最明显的特点就是针对Android系统版本高于6.0以上的设备,由于Android版本的更新迭代,现在大部分设备已经更新到较高的版本,通过不完全...

Android之自定义ListView(一)(android 自定义view绘制流程)

PS:自定义View是Android中高手进阶的路线.因此我也打算一步一步的学习.看了鸿洋和郭霖这两位大牛的博客,决定一步一步的学习,循序渐进.学习内容:1.自定义View实现ListView的Ite...

Xamarin.Android使用教程:列表视图和适配器(2)

昨天我们已经一起学习了第1部分,这是探索Xamarin.Android的列表视图和适配器的的第2部分。在今天的文章中我们将探讨列表视图项排列使用BaseAdapter,还有自定义布局。让我们深入到代码...