WPF快速入门2——WPF布局

WPF布局

WPF中常用的布局有一下几种：

Grid 网格

主要应用场合：

• UI布局大框架涉及
• 大量元素需成行或成列对齐
• UI整体尺寸改变时，元素需要保持固有宽高比例
• UI后期有较大变更或扩展

示例

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="数据发送" Height="222.408" Width="299.08">
    <Grid>
        <TextBlock Text="选择端口:" Margin="10,10,0,0" Height="20" Width="60" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <ComboBox Height="25" Width="210" VerticalAlignment="Top" Margin="0,10,10,0" HorizontalAlignment="Right"/>
        <TextBox BorderBrush="Black" Margin="10,50,10,50"/>
        <Button Content="发 送" Height="30" Width="80" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10"/>
        <Button Content="清 除" Height="30" Width="80" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,100,10"/>
        
    </Grid>
</Window>

效果：

StackPanel 栈式面板

StackPanel可以把内部元素横/纵向紧凑排列、行程栈式布局。
应用场合一般是：

• 同类元素需要紧凑排列（菜单或列表等）
• 移除其中的元素后能自动补缺

示例：

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="选择语言" Height="190" Width="300" MaxWidth="300" MaxHeight="190">
    <Grid>
        <GroupBox Header="语言" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="中文"/>
                <CheckBox Content="English"/>
                <CheckBox Content="日本語"/>
                <CheckBox Content="Le français"/>
                <CheckBox Content="Deutsch"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="确定" Width="50" Margin="10"/>
                    <Button Content="取消" Width="50" Margin="10"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>

    </Grid>
</Window>

效果如图：

DockPanel 网格

ex 1

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="选择" Height="300" Width="400" MaxWidth="400" MaxHeight="300">
    <DockPanel>
        <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Aquamarine"/>
        <TextBox DockPanel.Dock="Left" Height="65" BorderBrush="Aquamarine"/>
        <TextBox BorderBrush="BurlyWood"/>
    </DockPanel>
</Window>

效果如图：

ex2

<Window x:Class="WpfDockPanel.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:WpfDockPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="800">
    
    <DockPanel LastChildFill="True">
        <Rectangle Fill="LightGreen" DockPanel.Dock="Top" Height="100"/>
        <Rectangle Fill="LightPink" DockPanel.Dock="Left" Width="200"/>
        <Rectangle Fill="LightBlue" DockPanel.Dock="Right" Width="200"/>
        <Rectangle Fill="LightSkyBlue" DockPanel.Dock="Bottom" Height="100"/>
        <Rectangle Fill="LightGray" />
    </DockPanel>    
</Window>

WrapPanel 自动折行面板

可以自动对齐尽可能多的控件。
WrapPanel内部采用流式布局，用Orientation属性控制延伸方向，用HorizontalAlignment和VerticalAlignment属性控制控件的对齐。

示例：

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="选择" Height="150" Width="280" MaxWidth="280" MaxHeight="150">
    <WrapPanel>
        <Button Width="50" Height="50" Content="One" Background="Crimson"/>
        <Button Width="50" Height="50" Content="Two"/>
        <Button Width="50" Height="50" Content="Three" Background="LightSkyBlue"/>
        <Button Width="50" Height="50" Content="Four"/>
        <Button Width="50" Height="50" Content="Five"/>
        <Button Width="50" Height="50" Content="Six" Background="LightYellow"/>
    </WrapPanel>
</Window>

效果如图：

Canvas 画布

一般适用于：

• UI基本不变动的小型布局
• 需大量使用横纵坐标进行绝对定位的布局

示例：

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="登录" Height="150" Width="280" MaxWidth="280" MaxHeight="150">
    <Canvas>
        <TextBlock Text="账号：" Canvas.Left="15" Canvas.Top="15"/>
        <TextBox Height="25" Width="200" BorderBrush="Black" Canvas.Left="60" Canvas.Top="10"/>
        <TextBlock Text="密码：" Canvas.Left="15" Canvas.Top="45"/>
        <TextBox Height="25" Width="200" BorderBrush="Black" Canvas.Left="60" Canvas.Top="40"/>
        <Button Content="确定" Width="80" Height="20" Canvas.Left="100" Canvas.Top="90"/>
        <Button Content="取消" Width="80" Height="20" Canvas.Right="10" Canvas.Top="90"/>
    </Canvas>

</Window>

效果