1、布局容器Grid、StackPanel、GroupBox、DockPanel、WrapPanel

Grid——网格布局，其中控件或容器需指定位置

StackPanel——堆叠面板，其中的控件水平布局、竖直布局

DockPanel——停靠面板，内部控件或容器可以放置在上、下、左、右

WrapPanel——可以看作是具有自动换行功能的StackPanel容器。窗体太小时，其末尾的控件会自动换行。像Java中的流布局

布局原则：先整体规划（Grid），再局部规划（Grid、StackPanel等）

如下图，Grid有5行3列，具体布局、控件查看文档大纲

xaml代码

<Window x:Class="DemoWPF61.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:DemoWPF61"

        mc:Ignorable="d"

        Title="MainWindow" Height="240" Width="350">

    <Grid >

        <!--行定义，5行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="20"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="30"/>

            <!--剩余高度-->

            <RowDefinition Height="*"/>

            <RowDefinition Height="30"/>

        </Grid.RowDefinitions>

        <!--列定义，3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"/>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="100"/>

        </Grid.ColumnDefinitions>

        <!--网格的2,3两列放置StackPanel-->

        <Grid Grid.Column="1" Grid.ColumnSpan="2">

            <!--水平布局，右对齐-->

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

                <!--方式1-->

                <Button Content="夕西行" Margin="5,0,0,0"/>

                <!--方式2-->

                <Button Margin="5,0,5,0">我的博客</Button>

            </StackPanel>

        </Grid>

        <!--网格的1列2行放置Image，默认居中对齐-->

        <Grid Grid.Column="0" Grid.Row="1">

            <Image Source="C:/Users/Jv/Desktop/lena512.tiff"/>

        </Grid>

        <!--网格的1~3列放置StackPanel-->

        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2">

            <!--水平布局，默认左对齐-->

            <StackPanel Orientation="Horizontal">

                <Button Margin="5,0,0,0">园子</Button>

                <Button Margin="5,0,0,0">新闻</Button>

                <Button Margin="5,0,0,0">博问</Button>

            </StackPanel>

        </Grid>

        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3">

            <!--左右居中，上下居中-->

            <Label Content="第4行，占三列" HorizontalAlignment="Center" VerticalAlignment="Center"/>

        </Grid>

        <Grid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="4">

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

                <Button Margin="5,0,0,0">关于我们</Button>

                <Button Margin="5,0,0,0">联系我们</Button>

                <Button Margin="5,0,0,0">广告服务</Button>

                <Button Margin="5,0,0,0">人才服务</Button>

                <Button Margin="5,0,0,0">版权</Button>

            </StackPanel>

        </Grid>

    </Grid>

</Window>

【GroupBox】GroupBox内只能有一个元素，可用StackPanel承载多个控件

布局、控件如图所示

<Window x:Class="DemoWPF61.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:DemoWPF61"

        mc:Ignorable="d"

        Title="MainWindow" Height="190" Width="200">

    <!--StackPanel纵向布局，纵向对齐方式：底对齐-->

    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" >

        <!--GroupBox内只能有一个元素，StackPanel来承载更多的控件-->

        <GroupBox Header="网站分类">

            <!--StackPanel内，纵向布局-->

            <StackPanel Orientation="Vertical">

                <Button Content=".NET技术(16)"/>

                <Button Content="编程语言(13)"/>

            </StackPanel>

        </GroupBox>

        <GroupBox Header="链接">

            <StackPanel Orientation="Vertical">

                <Button Content="反馈和建议"/>

                <Button Content="官方博客"/>

            </StackPanel>

        </GroupBox>

    </StackPanel>

</Window>

【DockPanel】

<Window x:Class="DemoWPF61.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:DemoWPF61"

        mc:Ignorable="d"

        Title="MainWindow" Height="150" Width="230">

    <DockPanel>

        <StackPanel DockPanel.Dock="Top" >

            <Label Content="StackPanel停靠在DockPanel的上边"/>

        </StackPanel>

        <StackPanel DockPanel.Dock="Bottom" Height="20">

        </StackPanel>

        <StackPanel DockPanel.Dock="Left" Width="30">

        </StackPanel>

        <StackPanel DockPanel.Dock="Right" Width="30"/>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

            <Label Content=" 中间地带，是我的天下" />

        </StackPanel>

    </DockPanel>

</Window>

【WrapPanel】可以看作是具有自动换行功能的StackPanel容器。默认从左到右排列。

左图最后一个Button的高度会变成最小尺寸。Orientation="Vertical"得到右图（默认水平布局）

<Window x:Class="DemoWPF61.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:DemoWPF61"

        mc:Ignorable="d"

        Title="MainWindow" Height="150" Width="209.199">

    <WrapPanel Margin="3">

        <Button Content="Top" VerticalAlignment="Top"/>

        <Button Content="Bottom" VerticalAlignment="Bottom"/>

        <Button Content="靠我撑大" MinHeight="40"/>

        <Button Content="Center" VerticalAlignment="Center"/>

        <Button Content="无对齐方式"/>

    </WrapPanel>

</Window>

巴特西

1、布局容器Grid、StackPanel、GroupBox、DockPanel、WrapPanel

最新文章

热门文章