WPF基础学习笔记整理 （四） 布局

• 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>

显示效果：