Grid的列宽与 行高 可采用固定、自动、按比例三种方式定义。

固定长度：值为一个确定的数字
自动长度：值为Auto，实际作用就是取实际控件所需的最小值
比例长度： 表示占用剩余的全部宽度；两行都是 ，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3

二、StackPanel

StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。

<StackPanel Name="stackpanel1" Orientation="Horizontal">
    <Button Content="Button1"></Button>
    <Button Content="Button2"></Button>
    <Button Content="Button3"></Button>
</StackPanel>
<StackPanel Name="stackpanel1" Orientation="Vertical">
    <Button Content="Button1"></Button>
    <Button Content="Button2"></Button>
    <Button Content="Button3"></Button>
</StackPanel>
Orientation="Horizontal"时，设置FlowDirection属性为RightToLeft，则元素将从右向左排列。
三、WrapPanel
WrapPanel与StackPanel类似的功能, 相对于WrapPanel , 具有在有限的容器范围内, 可以自动换行, 或者换列处理。具体则取决于WrapPanel的排列方式 (Orientation)。
Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列

Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列
<WrapPanel Orientation="Horizontal">
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
</WrapPanel>
四、DockPanel
DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。
包含在DockPanel中的元素, 具备DockPanel.Dock的4个枚举值 （Top/Left/Right/Bottom） 用于设置元素的锚定位置

LastChildFill : 容器中的最后一个元素时, 默认该元素填充DockPanel所有空间, 默认值为True

DockPanel中的元素未显示添加DockPanel.Dock属性时, 系统则会默认为 DockPanel.Dock=“Left”
<DockPanel>
        <Button Content="上" DockPanel.Dock="Left"></Button>
        <Button Content="下" DockPanel.Dock="Bottom"></Button>
        <Button Content="左" DockPanel.Dock="Left"></Button>
        <Button Content="右" DockPanel.Dock="Right"></Button>
</DockPanel>
五、 UniformGrid
UniformGrid就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件。
与Grid不同的是, 该容器具备Columns/Rows 属性, 通过设置该属性, UniformGrid则具备相应的 行与列, 但是设置的Columns/Rows不允许单独的进行容器的大小设置

位于UniformGrid中的子元素, 按输入顺序排列至容器中, 直至填充容器的所有空间

未显示指定Columns/Rows, UniformGrid则为子元素动态分配Columns/Rows, 换行与换列的基 准主要基于UniformGrid的容器大小( 宽度与高度)
<UniformGrid>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
</UniformGrid>
六、Canvas
Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。
<Canvas>
        <Button Canvas.Left="50" Canvas.Top="50" Content="Button 1"></Button>
        <Button Canvas.Right="50" Canvas.Top="50" Content="Button 2"></Button>
        <Button Canvas.Left="50" Canvas.Bottom="50" Content="Button 3"></Button>
        <Button Canvas.Right="50" Canvas.Bottom="50" Content="Button 4"></Button>
</Canvas>
如果同时设置 Canvas.Left="50"Canvas.Right=“50”，则以Canvas.Left="50"为准

如果同时设置Canvas.Top=“50” Canvas.Bottom=“50”，则以Canvas.Top ="50"为准
七、ScrollViewer
ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。
属性
含义
HorizontalScrollBarVisibility
水平滚动条是否显示默认为Hidden
VerticalScrollBarVisibility
垂直滚动条是否显示 默认为Visible
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Button Content="Button" Width="800" Height="800"></Button>
</ScrollViewer>
一般我们都会设置 HorizontalScrollBarVisibility=“Auto” VerticalScrollBarVisibility=“Auto”，意思是：当内容超出可视范围时，才显示横向/纵向滚动条。
八、ViewBox
Viewbox的作用是拉伸或延展位于其中的组件，以填满可用空间。在Viewbox中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Viewbox中。然后可以将子控件放置在该控件中。
常用属性：Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间，Stretch默认值为Uniform。
属性值    含义

None    不进行拉伸，按子元素设置的长宽显示

Uniform    按原比例缩放子元素，使得一边不足，另一边恰好填充

Fill    缩放子元素，使得子元素的长变为Viewbox的长，宽变为Viewbox的宽

UniformToFill    按原比例缩放子元素，使得子元素一边恰好填充，另一边超出Viewbox的区域
    <Grid.RowDefinitions>
        <RowDefinition>        
        </RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition>    
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">
        <Button Width="100" Height="50" Content="None"></Button>
    </Viewbox>
    <Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">
        <Button Width="100" Height="50" Content="Uniform"></Button>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill">
        <Button Width="100" Height="50" Content="Fill"></Button>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
        <Button Width="100" Height="50" Content="UniformToFill"></Button>
    </Viewbox>
</Grid>
九、Border
Border 是一个装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Border中。然后可以将子控件放置在该 Panel控件中。
属性
含义
Background
背景色
BorderBrush
边框色
BorderThickness
边框宽度
CornerRadius
各个角，圆的半径
    <Border Background="YellowGreen" BorderBrush="Black" BorderThickness="0, 2, 4, 6" CornerRadius="0, 10, 20, 30"></Border>
</Grid>
  
分类：
 后端
 
标签：
 
后端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

        Java 后端开发