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>