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>
效果