WPF入门 #1 WPF布局基础

WPF当中有许多的布局容器控件，例如<Grid>、<StackPanel>、<WrapPanel>、<DockPanel>、<UniformGrid>。接下来分别介绍一下各个布局容器控件。

Grid

bash 复制代码

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Border Grid.Row="0" Grid.Column="0" Background="Red"/>
    <Border Grid.Row="0" Grid.Column="1" Background="Yellow"/>
    <Border Grid.Row="1" Grid.Column="0" Background="Blue"/>
    <Border Grid.Row="1" Grid.Column="1" Background="Green"/>
</Grid>

Grid中的元素还可以跨行和跨列：

StackPanel

StackPanel默认水平排列，具有 Orientation=""属性可以改变排列方向。

WrapPanel

WrapPanel默认水平排列，也具有 Orientation=""属性可以改变排列方向。

DockPanel

DockPanel具有停靠的功能，位于DockPanel中的元素，可以设置它的方向。

UniformGrid

这个容器最大的作用就是在有限的空间里面均分剩余空间。

下面对一个页面进行布局模拟练习：

bash 复制代码

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Border Background="#FFECF1"/>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Border Background="#FF7F24"/>

        <Grid Grid.Column="1" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Margin="5" Grid.Column="0" Background="#1b1c1d"/>
                <Border Margin="5" Grid.Column="1" Background="#2AC864"/>
                <Border Margin="5" Grid.Column="2" Background="#1b1c1d"/>
                <Border Margin="5" Grid.Column="3" Background="#F85A54"/>
                <Border Margin="5" Grid.Column="4" Background="#1b1c1d"/>
            </Grid>
            
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1.5*"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Margin="5" Grid.Column="0" Background="#1b1c1d"/>
                <Border Margin="5" Grid.Column="1" Background="#2AC864"/>
            </Grid>
            
            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1.5*"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Margin="5" Grid.Column="0" Background="#1b1c1d"/>
                <Border Margin="5" Grid.Column="1" Background="#F85A54"/>
            </Grid>
        </Grid>
    </Grid>
</Grid>