Separator

边框色的 1px 线条，可水平、垂直或虚线。

示例可交互

Separator — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="12" Width="320" HorizontalAlignment="Left">
  <StackPanel Spacing="4">
    <TextBlock Text="Avalonia UIKit" FontWeight="Medium" />
    <TextBlock Text="Themes and controls for Avalonia." Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <Separator />
  <StackPanel Orientation="Horizontal" Spacing="12" Height="20">
    <TextBlock Text="Blog" VerticalAlignment="Center" />
    <Separator Classes="vertical" />
    <TextBlock Text="Docs" VerticalAlignment="Center" />
    <Separator Classes="vertical" />
    <TextBlock Text="Source" VerticalAlignment="Center" />
  </StackPanel>
</StackPanel>

用法

主题覆盖 Separator：边框色的 1px 线条，居中绘制在一个没有厚度的盒子上，因此它跨在相邻元素的分界处而不占用空间。垂直分隔线会拉伸到所在行的高度（演示中为 StackPanel 指定了高度）。样式类：vertical、dashed（4px 实线段加 2px 间隙）；两者可以组合。

示例

实线与虚线，水平与垂直。

变体可交互

Live demo unavailable

<StackPanel Spacing="16" Width="240" HorizontalAlignment="Left">
  <Separator />
  <Separator Classes="dashed" />
  <StackPanel Orientation="Horizontal" Spacing="16" Height="32">
    <TextBlock Text="Solid" VerticalAlignment="Center" />
    <Separator Classes="vertical" />
    <TextBlock Text="Dashed" VerticalAlignment="Center" />
    <Separator Classes="vertical dashed" />
    <TextBlock Text="Vertical" VerticalAlignment="Center" />
  </StackPanel>
</StackPanel>

uikit:Separators.Label 把 12px 的弱化文字放到线条上，并覆盖页面背景：水平线放在末端，垂直线放在中间。带标签的分隔线高度（垂直时为宽度）与标签一致。

标签可交互

Live demo unavailable

<StackPanel Spacing="16" Width="320" HorizontalAlignment="Left">
  <Separator uikit:Separators.Label="With Label" />
  <Separator Classes="dashed" uikit:Separators.Label="Dashed With Label" />
  <StackPanel Orientation="Horizontal" Spacing="16" Height="80">
    <Separator Classes="vertical" uikit:Separators.Label="Solid" />
    <Separator Classes="vertical dashed" uikit:Separators.Label="Dashed" />
  </StackPanel>
</StackPanel>

Separator

#用法

#示例

用法

示例