VS-WPF窗口布局

    xiaoxiao2025-05-23  37

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

    三、 效果图

    四、 总结

    自己选择的路,再荒谬也要走完!

    最新回复(0)