border

边框控件用边框和背景装饰一个（单个）子控件。它还可用于显示圆角。

属性

属性	描述
Background	背景颜色。
BorderBrush	边框颜色。
BorderThickness	边框线粗细（整数）。
CornerRadius	所有四个角的半径（一个值），或指定为列表，2个值Top Bottom，4个值TopLeft TopRight BottomRight BottomLeft
BoxShadow	定义阴影

案例

<StackPanel>
    <Border Background="Gainsboro"
          BorderBrush="Black"
          BorderThickness="2"
          CornerRadius="3"
          Padding="10" Margin="10">
      <TextBlock>Box 1</TextBlock>
    </Border>
    <Border Background="Gainsboro"
            BorderBrush="Black"
            BorderThickness="2"
            CornerRadius="3"
            Padding="10" Margin="10">
      <TextBlock>Box 2</TextBlock>
    </Border>
  </StackPanel>

您可以通过设置边框的框阴影属性来定义边框的阴影。您可以使用以下命令指定单个长方体阴影：

• 一个可选的inset关键字——这将在边框内绘制阴影——通常不太有用！
• 两个、三个或四个长度值
• 颜色值

属性	描述
inset	如果未指定（默认），则假定阴影为阴影（好像框高出内容）。 inset 关键字的存在会将阴影更改为框架内部（好像内容被压在框内）。 插入阴影绘制在边框内（即使是透明边框），并且位于背景上方但位于任何内容下方
offset-x	指定水平距离。负值表示阴影位于元素左侧。
offset-y	指定垂直距离。负值表示阴影位于元素上方。
blur-radius	该值越大，模糊效果越大，因此阴影变得更大、更亮。不允许使用负值。如果未指定，则使用默认值（零），阴影边缘清晰。
spread-radius	正值将导致阴影扩大并变大，负值将导致阴影缩小。如果未指定，它将为0（阴影将与元素大小相同）。
color	使用颜色名称（如红色）或#前缀和十六进制颜色值的阴影颜色。例如：#dadada

canvas

画布控件在指定位置（以坐标表示）显示其子控件。
每个子控件的位置定义为画布内容区域边缘与子边距区域外边缘之间的两个距离。例如，这可能是画布左上角的孩子的左上角，如下所示：

属性

属性	描述
Canvas.Left	附加到子控件-给出画布内容区域的左内边缘到子控件的左外边缘（边距区域）之间的距离
Canvas.Top	附加到子控件-给出画布内容区域的内上边缘到子控件（边距区域）的外上边缘之间的距离。
Canvas.Right	附加到子控件-给出画布内容区域的右内边缘到子控件的右外边缘（边距区域）之间的距离。
Canvas.Bottom	附加到子控件-给出画布内容区域的内底边缘到子控件（边距区域）的外底边缘之间的距离。
Canvas.ZIndex	附加到子控件-这可以覆盖默认的绘图顺序,默认情况下，每个子项的z索引为零。但是，画布支持canvas。ZIndex附加属性，您可以设置任何子控件。这将覆盖绘图顺序（最后绘制的数字最高），因此可能会改变子控件的重叠方式。
Opacity	无论您如何定义绘图顺序，都会尊重子控件的不透明度。这意味着，当子控件元素重叠时，重叠区域中显示的内容可能会在顶部控件的不透明度值小于1的情况下混合。

<Canvas Background="AliceBlue" Margin="20">
      <Rectangle Fill="Red" Height="100" Width="100" Margin="10"/>
      <Rectangle Fill="Blue" Height="100" Width="100" Opacity="0.5"
                Canvas.Left="50" Canvas.Top="20"/>
      <Rectangle Fill="Green" Height="100" Width="100" 
                Canvas.Left="60" Margin="40" Canvas.Top="40"/>
      <Rectangle Fill="Orange" Height="100" Width="100" 
                Canvas.Right="70" Canvas.Bottom="60"/>
   </Canvas>

修改ZIndex

<Rectangle Fill="Blue" Height="100" Width="100" Opacity="0.5"
                Canvas.Left="50" Canvas.Top="20" ZIndex="2"/>

DockPanel

沿指定边（上、下、左、右）排列子控件，其中一个边填充任何剩余空间。
DockPanel控件沿着指定的“对接边缘”（顶部、底部、左侧和右侧）排列其子控件，最后一个子控件填充任何剩余空间。停靠面板可以保持子控件的尺寸与停靠边缘平行，以便子控件填充沿停靠边缘的所有可用空间。
例如，如果子控件上的停靠边被定义为“top”，并且它定义了高度，但没有宽度，它将绘制如下：

您必须定义垂直于对接边的子控件尺寸，否则它将不会显示。

您可以选择定义与对接边平行的尺寸。在这种情况下，子对象将根据对齐设置沿相同方向绘制。例如，具有定义宽度的子对象停靠在顶部边缘，将遵守其水平对齐属性（默认中心）。

子控件按照XAML中定义的顺序停靠。当Avalonia UI调整子控件的大小时，会考虑之前绘制的任何控件的存在。这意味着永远不会有任何重叠。

定义的最后一个子控件将填充任何剩余空间。

您必须始终定义最后一个子控件（没有停靠属性），否则停靠计算将无法正确执行。这意味着底座面板至少需要两个子控件。

属性

属性	描述
DockPanel.Dock.Left	附加在子控件上-将其停靠在左侧。
DockPanel.Dock.Top	附加在子控件上-将其停靠在顶部。
DockPanel.Dock.Right	附加在子控件上-将其停靠在右侧。
DockPanel.Dock.Bottom	附加在子控件上-将其停靠在底部。

<DockPanel Width="300" Height="300">
        <Rectangle Fill="Red" Height="100" DockPanel.Dock="Top"/>
        <Rectangle Fill="Blue" Width="100" DockPanel.Dock="Left" />
        <Rectangle Fill="Green" Height="100" DockPanel.Dock="Bottom"/>
        <Rectangle Fill="Orange" Width="100" DockPanel.Dock="Right" Opacity="0.5"/>
        <Rectangle Fill="Gray" />
</DockPanel>

Expander

Expander控件有一个标题区域（始终可见）和一个可折叠的内容部分，可以包含一个子控件。

属性

属性	描述
Expander.Header	定义标题区域中显示的内容。

<Expander VerticalAlignment="Top">
    <Expander.Header>
        Hidden Search
    </Expander.Header>
    <Grid RowDefinitions="*,*" ColumnDefinitions="150,*">
        <TextBlock Grid.Row="0" Grid.Column="0"
                   VerticalAlignment="Center">
            Search
        </TextBlock>
        <TextBox Grid.Row="0" Grid.Column="1"
                 Watermark="Search text" Width="200" />
        <TextBlock Grid.Row="1" Grid.Column="0"
                   VerticalAlignment="Center">
            Case sensitive?
        </TextBlock>
        <CheckBox Grid.Row="1" Grid.Column="1" />
    </Grid>
</Expander>

Grid

Grid控件可用于在列和行中排列子控件。您可以为Grid定义绝对、比例和自动调整大小的行和列几何图形。
Grid中的每个子控件都可以使用列和行坐标定位在Grid单元格中。这些都是从零开始的，并且都有零默认值。
如果将多个子控件放置在同一单元格中，它们将按照XAML中显示的顺序绘制在该单元格中。这是除Panel之外实施层堆叠的另一种策略。

如果省略Grid的子控件的列和行坐标，则它们都将绘制在左上角（列=0，行=0）。

也可以使子控件在行或列中跨越多个单元格，或同时跨越这两个单元格。

属性

属性	描述
ColumnDefinitions	描述Grid中列宽度的尺寸定义。
RowDefinitions	描述Grid中行高度的大小定义。
ShowGridLines	显示单元格之间的网格线（虚线）。
Grid.Column	将控件布置到指定的从零开始的列中。
Grid.Row	将控件布局到指定的从零开始的行中。
Grid.ColumnSpan	将控件跨1列或多列。
Grid.RowSpan	将控件跨1行或多行。
Grid.IsSharedSizeScope	将控件定义为 SharedSizeGroup 的包含范围

绝对尺寸定义

绝对大小定义以列表格式写成整数。例如：

ColumnDefinitions="200, 200, 300"

使用完全扩展的XAML，这与以下内容相同：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="200"></ColumnDefinition>
       <ColumnDefinition Width="200"></ColumnDefinition>
       <ColumnDefinition Width="300"></ColumnDefinition>
   </Grid.ColumnDefinitions>
</Grid>

比例尺寸定义

比例大小定义用星号表示可用网格空间的比例。例如，要创建两个宽度相同的列，然后创建宽度两倍的列：

ColumnDefinitions="*, *, 2*"

使用完全扩展的XAML，这与以下内容相同：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"></ColumnDefinition>
       <ColumnDefinition Width="*"></ColumnDefinition>
       <ColumnDefinition Width="2*"></ColumnDefinition>
   </Grid.ColumnDefinitions>
</Grid>

尺寸定义不支持百分比。克服这一问题的一个技巧是创建一个所有比例值总和为 100 的定义，例如对于 3 列，使用<GridColumnDefinitions="25*, 25*, 50*">，分别占据剩余可用宽度的 25%、25% 和 50% 。

自动尺寸定义

若要将行或列的大小自动调整为其中最大的子控件，请使用代码“Auto”。例如:

RowDefinitions="Auto, Auto, Auto"

使用完全扩展的XAML，这与以下内容相同：

<Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"></RowDefinition>
       <RowDefinition Height="Auto"></RowDefinition>
       <RowDefinition Height="Auto"></RowDefinition>
   </Grid.RowDefinitions>
</Grid>

如果子控件有自己显式设置的尺寸，则在绘制时将遵循这些尺寸。这意味着如果它大于它的网格单元格，它将重叠相邻的单元格。

混合尺寸定义

您可以在相同大小的定义序列中混合上述任何一种。例如:

ColumnDefinitions="200, *, 2*"

使用完全扩展的XAML，这与以下内容相同：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="200"></ColumnDefinition>
       <ColumnDefinition Width="*"></ColumnDefinition>
       <ColumnDefinition Width="2*"></ColumnDefinition>
   </Grid.ColumnDefinitions>
</Grid>

绘图规则

在计算大小时，在计算完绝对值和自动值后，将使任何比例列适合剩余的空间。
自动大小的计算是使用子控件的页边距布局区域的外部进行的。
子控件按照在XAML中出现的顺序绘制在其指定的网格单元格中。该规则既控制了两个子控件被分配到相同单元格时发生的情况，也控制了子控件比分配的单元格大时如何重叠。
当子控件具有自己的尺寸并且小于其分配的单元格时，将根据其水平和垂直对齐属性(默认情况下都是居中)在单元格中对齐。

这个例子显示了:

• 如何使用列和行定义的缩短语法。
• 如何混合绝对和比例列宽度。
• 如何为子控件分配单元格。
• 如何跨行和列。

一个具有3行和3列的网格的例子(1固定宽度)，(2按比例抓取其余部分)是:

<Grid ColumnDefinitions="100,1.5*,4*" RowDefinitions="Auto,Auto,Auto"  Margin="4">
  <TextBlock Text="Col0Row0:" Grid.Row="0" Grid.Column="0"/>
  <TextBlock Text="Col0Row1:" Grid.Row="1" Grid.Column="0"/>
  <TextBlock Text="Col0Row2:" Grid.Row="2" Grid.Column="0"/>
  <CheckBox Content="Col2Row0" Grid.Row="0" Grid.Column="2"/>
  <Button Content="SpansCol1-2Row1-2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
</Grid>

在这里，在绝对宽度100被减去之后(对于列0)，列1将得到剩余宽度的1.5部分，列2将得到剩余宽度的4部分。
绘制按钮以填充从单元格(第1列，第1行)加上一列(向右)和一行向下的跨度。结果是这样的:

GridSplitter

GridSplitter控件允许用户在运行时调整网格中的列或行大小。分割器绘制为列或行(可以指定大小)，并具有用户可以在运行时操作的手柄。

属性

属性	描述
Background	分割条的背景颜色。
Grid.Column	附加用于给出拆分器的(列)位置。
Grid.Row	附加用于给出拆分器的(行)位置。
ResizeDirection	分离器的运动方向。

为了提供任何有意义的移动，分离器的移动方向必须与其位置定义相同。也就是说:对于列拆分器指定ResizeDirection=“Columns”，对于行拆分器指定ResizeDirection=“Rows”。

这是一个列拆分器:

<Grid ColumnDefinitions="*, 4, *">
    <Rectangle Grid.Column="0" Fill="Blue"/>
    <GridSplitter Grid.Column="1" Background="Black" ResizeDirection="Columns"/>
    <Rectangle Grid.Column="2" Fill="Red"/>
</Grid>

这是一个行拆分器:

<Grid RowDefinitions="*, 4, *">
    <Rectangle Grid.Row="0" Fill="Blue"/>
    <GridSplitter Grid.Row="1" Background="Black" ResizeDirection="Rows"/>
    <Rectangle Grid.Row="2" Fill="Red"/>
</Grid>

Panel

面板是最基本的控件，可以包含多个子控件。子控件根据其水平和垂直对齐属性绘制，并按照它们在XAML中出现的顺序绘制。如果子控件占用相同的空间，则它们将重叠。
这个例子使用50%的不透明度来演示子控件重叠。
不透明

<Panel Height="300" Width="300">
    <Rectangle Fill="Red" Height="100" VerticalAlignment="Top"/>
    <Rectangle Fill="Blue" Width="100" HorizontalAlignment="Right" />
    <Rectangle Fill="Green"  Height="100" VerticalAlignment="Bottom"/>
    <Rectangle Fill="Orange" Width="100" HorizontalAlignment="Left"/>
</Panel>

增加透明度

<Panel Height="300" Width="300">
    <Rectangle Fill="Red" Height="100" VerticalAlignment="Top"/>
    <Rectangle Fill="Blue" Opacity="0.5" Width="100" HorizontalAlignment="Right" />
    <Rectangle Fill="Green" Opacity="0.5" Height="100" VerticalAlignment="Bottom"/>
    <Rectangle Fill="Orange" Width="100" HorizontalAlignment="Left"/>
</Panel>

其他Panel控件
还有其他更有用的面板，可以更好地控制其子控件的位置:

• Stack Panel
• Dock Panel
• Relative Panel
• Wrap Panel

如果您对在面板中定位子控件有特定要求，则可以基于面板创建自己的自定义控件。

RelativePanel

RelativePanel控件允许您通过指定子控件相对于其他(兄弟)子控件或相对于面板本身的位置来安排其子控件。位置是使用面板控件的内部(内容区域)和子控件的边距区域的外边缘计算的。

子控件的默认位置是面板的左上角。
使用附加的相对位置属性来指定子控件的布局。格式是这样的:

RelativePanel.PositionProperty="NameOfSibling"

其中PositionProperty属性是相对位置属性之一，NameOfSibling属性是另一个子控件的名称属性。

将相对位置属性的值作为子控件本身的名称是错误的。这将是一个循环引用!

您可以为每个子控件指定最多四个相对位置属性-用于如何计算上、下、左和右边缘。

为同一子控件两次定义相同的相对位置属性是错误的。

指定不同但可能相互冲突的相对位置属性并不是错误，尽管您可能会发现结果难以理解。
如果多个子控件最终处于相同的计算位置，则按照它们在XAML中出现的顺序绘制它们，并且可能重叠或掩盖另一个子控件。

这意味着您必须为子控件提供一个名称，并在任何相对位置属性值中使用正确的名称。如果您弄错了，控件将采用默认的(左上角)位置，并且可能重叠或掩盖另一个。

属性

属性	描述
AlignTopWithPanel	bool。将子控件的上边缘与面板的上边缘对齐。
AlignBottomWithPanel	bool 附加到子控件以使子控件的下边缘与面板的下边缘对齐。
AlignLeftWithPanel	附加到子控件以使子控件的左边缘与面板的左边缘对齐。
AlignRightWithPanel	附加到子控件以使子控件的右边缘与面板的右边缘对齐。
AlignHorizontalCenterWithPanel	bool 附加到子控件以使子控件的水平中心与面板的水平中心对齐。
AlignVerticalCenterWithPanel	bool 附加到子控件以使子控件的垂直中心与面板的垂直中心对齐。
AlignTopWith	附加到子控件以使其上边缘与已命名的兄弟控件的上边缘对齐。
AlignBottomWith	附加到子控件以使其底边与已命名的兄弟控件的底边对齐。
AlignLeftWith	附加到子控件以使其左边缘与已命名的兄弟控件的左边缘对齐。
AlignRightWith	附加到子控件以使其右边缘与已命名的兄弟控件的右边缘对齐。
AlignHorizontalCenterWith	附加到子控件以使其水平中心与已命名的兄弟控件的水平中心对齐。
AlignVerticalCenterWith	附加到子控件以使其垂直中心与已命名的兄弟控件的垂直中心对齐。
Above	附加到子控件以使其下边缘与已命名的兄弟控件的上边缘对齐。
Below	附加到子控件以使其上边缘与已命名的兄弟控件的下边缘对齐。
LeftOf	附加到子控件以使其右边缘与已命名的兄弟控件的左边缘对齐。
RightOf	附加到子控件以使其左边缘与已命名的兄弟控件的右边缘对齐。

这个XAML展示了如何以不同的方式安排一些子控件:

<Border BorderBrush="DarkGray" BorderThickness="1" Width="300" Height="300">
    <RelativePanel >
        <Rectangle x:Name="RedRect" Fill="Red" Height="50" Width="50"/>
        <Rectangle x:Name="BlueRect" Fill="Blue" Opacity="0.5" Height="50" Width="150"
                RelativePanel.RightOf="RedRect" />
        <Rectangle x:Name="GreenRect" Fill="Green" Height="100"
                RelativePanel.Below="RedRect"
                RelativePanel.AlignLeftWith="RedRect"
                RelativePanel.AlignRightWith="BlueRect"/>
        <Rectangle Fill="Orange"
                RelativePanel.Below="GreenRect"
                RelativePanel.AlignLeftWith="BlueRect"
                RelativePanel.AlignRightWithPanel="True"
                RelativePanel.AlignBottomWithPanel="True"/>
    </RelativePanel>
</Border>

以下是关于上述例子的一些注意事项:

• 给出了红色矩形的大小(50x50)，但没有给出相对位置。因此，它被放置在默认位置(左上角)。
• 蓝色矩形的不透明度为50%，以表明它没有重叠。
• 这个绿色矩形有一个高度(100)，但没有宽度。它的左边与红色矩形对齐，它的右边与蓝色矩形对齐，这计算了它的宽度。
• 橙色矩形没有给定大小。它的左侧与蓝色矩形对齐。它的右侧和底部边缘与面板的边缘对齐。因此，它的大小是由对齐决定的，如果面板本身调整大小，它将调整大小。

ScrollViewer

ScrollViewer控件的内容可以大于其内容区域，并且可以提供滚动条将隐藏的内容移动到视图中。
ScrollViewer不能包含在具有无限高度或宽度(取决于滚动方向)的控件中，例如StackPanel。为了避免它，你可以设置固定的高度/宽度或MaxHeight/MaxWidth或选择另一个容器面板。

属性	描述
AllowAutoHide	bool，默认值为true。设置滚动条在指针未悬停或没有焦点时是否自动隐藏。
ScrollViewer.IsScrollChainingEnabled	bool，默认值为true。附于内部控制

滚动链

如果您有一个本身可以滚动的控件（见下面的列表）嵌套在滚动查看器中，并且用户在控件上达到了限制，则此属性设置外部滚动查看器是否应继续滚动。您可以使用内部控件上的附加属性启用或禁用此行为，格式如下：

ScrollViewer.IsScrollChainingEnabled=[true|false]

此附加属性在以下控件上可用：

• Scroll Viewer
• Data Grid
• List Box
• Text Box
• Tree View

此示例创建了一个大于其内部边框的堆栈面板。滚动查看器会自动创建垂直滚动条。

<Border Background="AliceBlue" Width="300" Height="300">
    <ScrollViewer>
        <StackPanel>
            <TextBlock FontSize="22" Height="100" Background="LightBlue">Block 1</TextBlock>
            <TextBlock FontSize="22" Height="100">Block 2</TextBlock>
            <TextBlock FontSize="22" Height="100" Background="LightBlue">Block 3</TextBlock>
            <TextBlock FontSize="22" Height="100">Block 4</TextBlock>
            <TextBlock FontSize="22" Height="100" Background="LightBlue">Block 5</TextBlock>
        </StackPanel>
    </ScrollViewer>
</Border>

SplitView

SplitView展示了一个由两部分组成的容器：主内容区和侧窗格。主内容区始终可见。窗格可以展开和折叠。折叠的窗格可以完全隐藏，也可以稍微打开——例如，有足够的空间容纳一些图标按钮。

属性

属性	描述
PanePlacement	设置窗格的位置（左侧或右侧）。
IsPaneOpen	布尔值，默认值为true。窗格是否处于打开状态？
DisplayMode	控制窗格在打开和关闭状态下的绘制方式
OpenPaneLength	定义窗格打开时的宽度。
CompactPaneLength	定义窗格关闭且显示模式紧凑时的宽度。

显示模式属性控制窗格在打开和关闭状态下的绘制方式。有四种选择：

Overlay

窗格在打开之前完全隐藏。打开时，窗格会覆盖内容区域。

Inline

窗格始终可见，宽度固定，不会覆盖内容区域。窗格和内容区域划分了可用的屏幕空间，但如果容器更改了宽度，则是内容区域调整了大小。

Compact Overlay

在此模式下，窗格的狭窄部分始终可见，其宽度刚好足以显示图标。默认的关闭窗格宽度为48px，可以使用CompactPaneLength属性值进行修改。如果打开窗格，它将覆盖内容区域。

Compact Inline

在此模式下，窗格的狭窄部分始终可见，其宽度刚好足以显示图标。默认的关闭窗格宽度为48px，可以使用CompactPaneLength属性值进行修改。如果打开窗格，它将减小内容区域的大小。

<SplitView IsPaneOpen="True"
       DisplayMode="Inline"
       OpenPaneLength="300">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                FontSize="24"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                FontSize="24"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

控件看起来像这样，在Windows上运行：

紧凑型显示模式

您可以将MVVM模式与拆分视图控件和紧凑显示模式设置之一一起使用，以实现“工具窗格”风格的UI。窗格关闭时，窗格上有足够的空间显示打开窗格的图标按钮。

StackPanel

StackPanel通过水平或垂直堆叠来排列它的子控件。堆栈面板通常用于在页面上安排UI的一小部分。

在堆栈面板中，如果未设置与子控件上的堆栈垂直的size属性，则子控件将拉伸以填充可用空间。例如，在水平方向中，如果未设置子控件的高度，则子控件的高度将会拉伸。

在堆栈的方向上，堆栈面板将始终展开以适合所有子控件。

属性

属性	描述
Orientation	设置堆栈的方向。从水平(horizontal)或垂直(vertical 默认)中选择。
Spacing	在子控件之间创建均匀间距。

<StackPanel Width="200">
    <Rectangle Fill="Red" Height="50"/>
    <Rectangle Fill="Blue" Height="50"/>
    <Rectangle Fill="Green" Height="100"/>
    <Rectangle Fill="Orange" Height="50"/>
</StackPanel>

<StackPanel Orientation="Horizontal" Height="50">
    <Rectangle Fill="Red" Width="50"/>
    <Rectangle Fill="Blue" Width="50"/>
    <Rectangle Fill="Green" Width="50"/>
    <Rectangle Fill="Orange" Width="50"/>
</StackPanel>

TabControl

TabControl允许您将视图细分为选项卡项。
每个选项卡项都有一个标题和一个内容区。标题按照它们在XAML中出现的顺序以条形显示。当用户单击选项卡标头时，它的内容变得可见，并被放置在选项卡控件内容区的选项卡条下方。
你可以在标题和内容区组合UI，以适应你的Avalonia UI应用程序的UI需求。

<TabControl Margin="5">
    <TabItem Header="Tab 1">
        <TextBlock Margin="5">This is tab 1 content</TextBlock>
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBlock Margin="5">This is tab 2 content</TextBlock>
    </TabItem>
    <TabItem Header="Tab 3">
        <TextBlock Margin="5">This is tab 3 content</TextBlock>
    </TabItem>
</TabControl>

UniformGrid

UniformGrid将可用空间在两个方向上均匀地划分为单元格。您可以指定使用多少个分区，这些分区在任何方向上都可以不同。
然后，您可以使用附加的行和列索引属性（从零开始）将子控件分配给创建的单元格。

属性

属性	描述
Rows	整数。设置高度中相等的行数。
Columns	整数。设置宽度中相等的列数
Grid.Column	附加到子控件以设置其列索引。
Grid.Row	附加到子控件以设置其行索引。

<UniformGrid Rows="1" Columns="3" Width="300" Height="200">
    <Rectangle Fill="navy" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="white" Grid.Column="1" Grid.Row="0"/>
    <Rectangle Fill="red" Grid.Column="2" Grid.Row="0"/>
</UniformGrid>

WrapPanel

WrapPanel使用(多个)子元素的默认排列是从左到右的顺序，同时它们适合宽度。当没有剩余空间(包括任何边距和边框)时，它开始一个新的行。

当方向属性设置为垂直时，排列从上到下，并在没有剩余高度时开始一个新列。

属性

属性	描述
Orientation	改变排列流的方向。

<WrapPanel>
        <Rectangle Fill="Navy" Width="200" Height="200" Margin="20"/>
        <Rectangle Fill="Yellow" Width="200" Height="200" Margin="20"/>
        <Rectangle Fill="Green" Width="200" Height="200" Margin="20"/>
        <Rectangle Fill="Red" Width="200" Height="200" Margin="20"/>
        <Rectangle Fill="Purple" Width="200" Height="200" Margin="20"/>
</WrapPanel>

竖向

<WrapPanel Orientation="Vertical">
        <Rectangle Fill="Navy" Width="100" Height="100" Margin="20"/>
        <Rectangle Fill="Yellow" Width="100" Height="100" Margin="20"/>
        <Rectangle Fill="Green" Width="100" Height="100" Margin="20"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="20"/>
        <Rectangle Fill="Purple" Width="100" Height="100" Margin="20"/>
</WrapPanel>