正文
WPF基础学习笔记整理 （四） 布局
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
- WPF使用的是容器（container）进行布局；
- WPF窗口（Window类型）只能包含单个元素，故为了放置多个元素并增强界面效果，引入了容器；
- WPF布局容器都派生自System.Windows.Controls.Panel抽象类；
图1Panel类及其子类的继承关系图
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>
显示效果：
