Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Hover Card

New control

A card that opens next to its content on hover, after a delay, on the popover surface.

ExampleInteractive
Hover Card — Avalonia UIKit
Hover Card demo
<Panel MinWidth="360" MinHeight="180">
  <StackPanel Spacing="8" HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:HoverCard>
      <TextBlock Text="@avaloniaui" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <StackPanel Spacing="8" Width="260">
          <StackPanel Orientation="Horizontal" Spacing="12">
            <uikit:Avatar UserName="Avalonia UI" />
            <StackPanel VerticalAlignment="Center">
              <TextBlock Text="Avalonia UI" FontWeight="SemiBold" />
              <TextBlock Text="@avaloniaui" Foreground="{DynamicResource UIKit.MutedForeground}" />
            </StackPanel>
          </StackPanel>
          <TextBlock Text="The cross-platform UI framework for .NET." TextWrapping="Wrap" />
        </StackPanel>
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <TextBlock Text="Hover the name to open the card." Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
</Panel>

Usage

uikit:HoverCard wraps the trigger as its content; HoverCard.Card is what opens. The card has the popover surface (the background, ring and shadow, 12px of padding, 4px from the trigger) and, like the popover, slides to stay on screen instead of flipping. Entering the trigger schedules the open and leaving it schedules the close; the card keeps itself open while the pointer is on it.

PropertyMeaning
CardThe card's content.
PlacementWhere the card opens, a PlacementMode; Bottom by default.
OpenDelayHow long the pointer rests on the trigger before the card opens; 600ms.
CloseDelayHow long the card stays after the pointer leaves the trigger and the card; 300ms.
IsOpenWhether the card is open.

Examples

Placement on each card: top, bottom, aligned to the trigger's left edge, and right.

PlacementsInteractive
Hover Card demo: Placements
<Panel MinWidth="520" MinHeight="220">
  <StackPanel Orientation="Horizontal" Spacing="32" HorizontalAlignment="Center" VerticalAlignment="Center">
    <uikit:HoverCard Placement="Top">
      <TextBlock Text="Top" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Opens above the trigger" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <uikit:HoverCard Placement="Bottom">
      <TextBlock Text="Bottom" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Opens below the trigger" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <uikit:HoverCard Placement="BottomEdgeAlignedLeft">
      <TextBlock Text="Bottom start" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Aligned to the trigger's left edge" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <uikit:HoverCard Placement="Right">
      <TextBlock Text="Right" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Opens to the right" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
  </StackPanel>
</Panel>

Not covered

  • Opening on tap.
  • Turning the surface off.