《WPF窗口布局面板》
一、 布局面板类型
1. 泊靠式面板
特点:内部元素可以选择泊靠的方向(上下左右)
2. 栈式面板
特点:可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺。
3. 自动折行面板
内部元素在排满一行后能够自动折行
4. Grid(网格布局)
特点:可以定义任意数量的行和列,非常灵活。行的高度和列的宽度可以使用绝对值、相对比例或自动调整或设置自己纵横跨多少行的方式进行精确设定,并可以设置最大和最小值
5. 其它面板
其它面板有:画布等等
二、 各面板的代码
<Window x:Class="布局面板.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:布局面板"
mc:Ignorable="d"
Title="布局面板" Height="650" Width="825">
<Grid>
<!--泊靠式面板-->
<DockPanel Width="400" Height="400" HorizontalAlignment="Left">
<!--靠左-->
<Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
<!--靠上-->
<Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
<!--靠右-->
<Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
<!--靠下-->
<Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
<!--填满剩余的空间-->
<Button Content="泊靠式面板"></Button>
<!--不填满剩余的空间-->
<Button DockPanel.Dock="Bottom" Content="ButtonTop"></Button>
</DockPanel>
<!--栈式面板:内容成行列排布,Orientationk决定排布方式-->
<StackPanel Width="314" Height="400" HorizontalAlignment="Right" Orientation="Vertical" VerticalAlignment="Stretch">
<GroupBox Header="垂直型栈式面板" Height="100">
<StackPanel Orientation="Vertical">
<Button Content="垂直型栈式面板"/>
<Button Content="垂直型栈式面板"/>
<Button Content="垂直型栈式面板"/>
<Button Content="超出则被截断"/>
<Button Content="超出则被截断"/>
</StackPanel>
</GroupBox>
<GroupBox Header="水平型栈式面板" Height="Auto">
<StackPanel Orientation="Horizontal">
<Button Content="水平型栈式面板"/>
<Button Content="水平型栈式面板"/>
<Button Content="水平型栈式面板"/>
<Button Content="超出内容"/>
</StackPanel>
</GroupBox>
</StackPanel>
<!--自动折行面板-->
<!--垂直方向折行-->
<WrapPanel Width="250" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Vertical">
<Button Width="100">0自动折行面板</Button>
<Button Width="100">1垂直</Button>
<Button Width="100">2方向</Button>
<Button Width="100">3内容</Button>
<Button Width="100">4超出</Button>
<Button Width="100">5超出折行</Button>
<Button Width="100">6超出折行</Button>
</WrapPanel>
<!--水平方向折行-->
<WrapPanel HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal" Width="500" Height="100">
<Button Width="100">0自动折行面板</Button>
<Button Width="100">1水平</Button>
<Button Width="100">2方向</Button>
<Button Width="100">3内容</Button>
<Button Width="100">4超出</Button>
<Button Width="100">5超出折行</Button>
<Button Width="100">6超出折行</Button>
</WrapPanel>
</Grid>
</Window>
三、 效果图
四、 总结
自己选择的路,再荒谬也要走完!