WPF布局

WPF布局

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015 

作者： 李杨

撰写时间：2020-12-17

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

布局：StackPanel面板

在应用程序界设计中，合理的元素布局是很重要的，它可以方便用户使用，并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel)，来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话，还可以创建自定义的布局元素。

面板Panel：

WPF用于布局的面板主要有六个：

StackPanel(栈面板)、WrapPanel（环绕面板）。DockPanel（停靠面板）、Canvas（画布）、Grid（网格面板）和UniformGrid(均布网格)。

StackPanel：栈面板

栈面板,可以将元素排列成一行或者一列，其特点是：每个元素各占一行或者一列，Orientation属性指定排列方式：Vertical(垂直)【默认】、Horizontal(水平)，默认情况下，水平排列时，每个元素都与面板一样高；垂直排列时，每个元素都与面板一样宽。如果包含的元素超过了面板空间，它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

垂直运行效果和水平效果（如图：代码来源于老师）

 

布局：WrapPanel面板

WrapPanel：环绕面板

     WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。

     Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。

    ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

    ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

Orientation属性的值设置为 Horizontal示例效果图如下2图所示，图1是窗体宽度较小时候的效果，图2是窗体宽度拉大以后的效果

（如图1：代码来源于老师）       

                        图2

XAML代码：

<Window x:Class="WpfDemo.MainWindow"

 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4         Title="WrapPanel面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">

 5     <WrapPanel Orientation="Horizontal">

 6         <Button Width="100">按钮1</Button>

 7         <Button Width="100">按钮2</Button>

 8         <Button Width="100">按钮3</Button>

 9         <Button Width="100">按钮4</Button>

10         <Button Width="100">按钮5</Button>

11         <Button Width="100">按钮6</Button>

12     </WrapPanel>   

13 </Window>