北屋教程网

专注编程知识分享,从入门到精通的编程学习平台

WPF开发教程01-布局控件

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

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>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言