- WPF使用的是容器(container)进行布局;
- WPF窗口(Window类型)只能包含单个元素,故为了放置多个元素并增强界面效果,引入了容器;
- WPF布局容器都派生自System.Windows.Controls.Panel抽象类;
图1 Panel类及其子类的继承关系图
1. StackPanel示例
XAML代码:
<Window x:Class="LayoutTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="190" Width="300"> <Grid> <GroupBox Header="What's your occupation?" BorderBrush="Black" Margin="5"> <StackPanel Margin="5" Orientation="Vertical"> <CheckBox Content="A. Teacher"/> <CheckBox Content="B. Policeman"/> <CheckBox Content="C. Lawyer"/> <CheckBox Content="D. Engineer"/> <CheckBox Content="E. Businessman"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="Clear" Width="60" Margin="5"/> <Button Content="Confirm" Width="60" Margin="5"/> </StackPanel> </StackPanel> </GroupBox> </Grid> </Window>
显示效果:
2. Grid示例
XAML代码 :
<Window x:Class="LayoutTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="80"/> <ColumnDefinition Width="4"/> <ColumnDefinition Width="80"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="4"/> <RowDefinition Height="*"/> <RowDefinition Height="4"/> <RowDefinition Height="25"/> </Grid.RowDefinitions> <TextBlock Text="Make your choice:" Grid.Column ="0" Grid.Row="0" VerticalAlignment="Center"/> <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"> <ComboBoxItem>A</ComboBoxItem> <ComboBoxItem>B</ComboBoxItem> <ComboBoxItem>C</ComboBoxItem> <ComboBoxItem>D</ComboBoxItem> </ComboBox> <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/> <Button Content="Submit" Grid.Column="2" Grid.Row="4"/> <Button Content="Clear" Grid.Column="4" Grid.Row="4"/> </Grid> </Window>
显示效果:
3、Canvas示例
XAML代码:
<Window x:Class="LayoutTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="140" Width="300"> <Canvas> <TextBlock Text="User Name:" Canvas.Left="10" Canvas.Top="12" Height="16" Width="70"/> <TextBox Height="23" Width="180" BorderBrush="Black" Canvas.Left="86" Canvas.Top="9"/> <TextBlock Text="Password:" Canvas.Left="10" Canvas.Top="40.72" Height="16" Width="70"/> <TextBox Height="23" Width="180" BorderBrush="Black" Canvas.Left="86" Canvas.Top="38"/> <Button Content="Confirm" Width="80" Height="22" Canvas.Left="100" Canvas.Top="67"/> <Button Content="Clear" Width="80" Height="22" Canvas.Left="186" Canvas.Top="67"/> </Canvas> </Window>
显示效果:
4、DockPanel示例
XAML代码:
<Window x:Class="LayoutTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="400"> <Grid> <DockPanel LastChildFill="True"> <TextBox DockPanel.Dock="Top" Width="400" Height="25" BorderBrush="Red">Top</TextBox> <TextBox DockPanel.Dock="Bottom" Width="400" Height="25" BorderBrush="Red">Bottom</TextBox> <TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Red">Left</TextBox> <TextBox DockPanel.Dock="Right" BorderBrush="Red">Right</TextBox> </DockPanel> </Grid> </Window>
显示效果:
5、WrapPanel示例
XAML代码:
<Window x:Class="LayoutTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="400"> <WrapPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Center"> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> <Button Width="50" Height="50" Content="OK"/> </WrapPanel> </Window>
显示效果:
6、GridSplitter示例
XAML代码:
<Window x:Class="LayoutTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="400"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBox Grid.ColumnSpan="3" BorderBrush="Black"/> <TextBox Grid.Row="1" BorderBrush="Black"/> <GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="5" Background="Red" ShowsPreview="True"/> <TextBox Grid.Row="1" Grid.Column="2" BorderBrush="Black"/> </Grid> </Window>
显示效果: