Kbd

A key cap for keyboard shortcuts, written in each platform's notation.

ExampleInteractive

Kbd — Avalonia UIKit

<StackPanel Spacing="12" HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal" Spacing="6">
    <TextBlock Text="Press" VerticalAlignment="Center" />
    <uikit:Kbd Gesture="Ctrl+K" VerticalAlignment="Center" />
    <TextBlock Text="to search" VerticalAlignment="Center" />
  </StackPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <uikit:Kbd Gesture="A" />
    <uikit:Kbd Gesture="F12" />
    <uikit:Kbd Gesture="Tab" />
    <uikit:Kbd Gesture="Space" />
    <uikit:Kbd Gesture="PageDown" />
    <uikit:Kbd Gesture="Ctrl+Shift+P" />
  </WrapPanel>
</StackPanel>

View code

#Usage

uikit:Kbd shows its Gesture (a KeyGesture, such as Ctrl+Shift+P) in muted 12px text on a key cap at least 20px wide with 4×2 padding. The text follows the running platform's notation: on macOS the modifier symbols without a separator (⌃ ⌥ ⇧ ⌘, with ⏎ and ⎋ for Enter and Escape), elsewhere the names joined by "+" (Ctrl, Alt, Shift, Win). Classes="outline" draws the cap on the background with a 1px border.

#Examples

outline on single keys and on a chord.

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <uikit:Kbd Classes="outline" Gesture="A" />
  <uikit:Kbd Classes="outline" Gesture="F12" />
  <uikit:Kbd Classes="outline" Gesture="Enter" />
  <uikit:Kbd Classes="outline" Gesture="Ctrl+K" />
</WrapPanel>

View code

#Not covered

• Finding the keys bound to a command; write the key names.