Popover

浮层表面，可带箭头，也可不带任何表面，即 Avalonia 的 Flyout。

示例可交互

Popover — Avalonia UIKit

Live demo unavailable

<Panel MinWidth="320" MinHeight="200">
  <Button Classes="outline" Content="Open popover" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button.Flyout>
      <Flyout Placement="BottomEdgeAlignedLeft" PlacementConstraintAdjustment="SlideX, SlideY" FlyoutPresenterClasses="arrow">
        <StackPanel Spacing="4" Width="240">
          <TextBlock Text="Dimensions" FontWeight="SemiBold" />
          <TextBlock Text="Set the dimensions for the layer." Foreground="{DynamicResource UIKit.MutedForeground}" TextWrapping="Wrap" />
        </StackPanel>
      </Flyout>
    </Button.Flyout>
  </Button>
</Panel>

用法

主题覆盖 Flyout 与 FlyoutPresenter：使用主题圆角半径的浮层背景、1px 描边与阴影、约 12px 的内边距，以及与触发元素之间 4px 的间隙（无论浮出层从哪一侧打开）。浮层会滑动以保持在屏幕内，而不是翻转到另一侧，因此请为每个浮出层设置 PlacementConstraintAdjustment="SlideX, SlideY"。间隙由主题添加，因此 HorizontalOffset 或 VerticalOffset 会在其基础上继续移动浮层。浮层就地打开，没有动画。

FlyoutPresenterClasses 决定外观：arrow 会在朝向触发元素的方向添加一个 6px 的箭头（间隙会因其深度而增大），而 plain 不绘制表面与内边距，只显示内容。

示例

八种方位；每个浮层都会滑动以留在屏幕内，而不会翻转。

方位可交互

Live demo unavailable

<Panel MinWidth="640" MinHeight="300">
  <Grid ColumnDefinitions="Auto,Auto,Auto" RowDefinitions="Auto,Auto,Auto" ColumnSpacing="8" RowSpacing="8"
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Classes="outline" Content="Top start" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="TopEdgeAlignedLeft" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Column="1" Classes="outline" Content="Top" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="Top" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Column="2" Classes="outline" Content="Top end" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="TopEdgeAlignedRight" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Row="1" Classes="outline" Content="Left" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="Left" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Row="1" Grid.Column="2" Classes="outline" Content="Right" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="Right" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Row="2" Classes="outline" Content="Bottom start" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="BottomEdgeAlignedLeft" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Row="2" Grid.Column="1" Classes="outline" Content="Bottom" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="Bottom" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
    <Button Grid.Row="2" Grid.Column="2" Classes="outline" Content="Bottom end" HorizontalAlignment="Stretch">
      <Button.Flyout>
        <Flyout Placement="BottomEdgeAlignedRight" PlacementConstraintAdjustment="SlideX, SlideY" Content="Popover content" />
      </Button.Flyout>
    </Button>
  </Grid>
</Panel>

plain 只绘制内容；此处的 Alert 自带表面。

Plain可交互

Live demo unavailable

<Panel MinWidth="360" MinHeight="180">
  <Button Classes="outline" Content="Open plain popover" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button.Flyout>
      <Flyout Placement="BottomEdgeAlignedLeft" PlacementConstraintAdjustment="SlideX, SlideY" FlyoutPresenterClasses="plain">
        <uikit:Alert Classes="info" Title="No surface" Content="A plain popover draws only its content." Width="300" />
      </Flyout>
    </Button.Flyout>
  </Button>
</Panel>

Popover

#用法

#示例

用法

示例