Dropdown Button

A button with a caret half that opens a menu, as Avalonia's SplitButton; or a button with a caret, as DropDownButton.

ExampleInteractive

Dropdown Button — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="150">
  <SplitButton Content="Save" HorizontalAlignment="Left" VerticalAlignment="Top">
    <SplitButton.Flyout>
      <MenuFlyout Placement="BottomEdgeAlignedRight">
        <MenuItem Header="Save As..." />
        <MenuItem Header="Save All" />
        <Separator />
        <MenuItem Header="Export" />
      </MenuFlyout>
    </SplitButton.Flyout>
  </SplitButton>
</Panel>

Usage

The theme covers SplitButton. The action half is the Content, run by Click or Command; the caret half opens the Flyout, normally a MenuFlyout. The menu opens under the right edge: give the flyout Placement="BottomEdgeAlignedRight"; the theme adds the 4px gap below the button.

The classes are the Button's: the colors primary, secondary, danger, warning, success, info, ghost, link and text, the modifiers outline and selected, and the sizes xsmall, small and large. While the menu is open the caret half keeps the pressed look. Avalonia focuses a SplitButton as one tab stop; its ring shows on the action half.

For one button that opens the menu, use DropDownButton: the Button with a caret after its content. It takes all of the Button's classes; the caret keeps the button's normal text color at 75% in every state. Give its MenuFlyout Placement="BottomEdgeAlignedLeft"; while the menu is open the button shows the selected look.

uikit:Buttons.IsLoading loads the action half as it loads a Button: the half fades, keeps its look under the pointer, spins its icon and ignores clicks, Enter and Space, while the caret half still opens the menu. uikit:Buttons.TakesFocusOnPointer="False" keeps the focus where it was when either half is pressed.

Examples

The main colors, plain and outlined, and a disabled one. The demo keeps one MenuFlyout in the panel's resources and shares it through Flyout="{StaticResource SaveMenu}".

VariantsInteractive

Live demo unavailable

<Panel MinHeight="160">
  <Panel.Resources>
    <MenuFlyout x:Key="SaveMenu" Placement="BottomEdgeAlignedRight">
      <MenuItem Header="Save As..." />
      <MenuItem Header="Save All" />
    </MenuFlyout>
  </Panel.Resources>
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <SplitButton Content="Default" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="primary" Content="Primary" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="secondary" Content="Secondary" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="danger" Content="Danger" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="ghost" Content="Ghost" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="outline" Content="Outline" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="primary outline" Content="Primary outline" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Content="Disabled" IsEnabled="False" Flyout="{StaticResource SaveMenu}" />
  </WrapPanel>
</Panel>

The four sizes scale both halves and the caret.

SizesInteractive

Live demo unavailable

<Panel MinHeight="130">
  <Panel.Resources>
    <MenuFlyout x:Key="SaveMenu" Placement="BottomEdgeAlignedRight">
      <MenuItem Header="Save As..." />
      <MenuItem Header="Save All" />
    </MenuFlyout>
  </Panel.Resources>
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <SplitButton Classes="xsmall" Content="Extra small" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="small" Content="Small" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Content="Medium" Flyout="{StaticResource SaveMenu}" />
    <SplitButton Classes="large" Content="Large" Flyout="{StaticResource SaveMenu}" />
  </WrapPanel>
</Panel>

DropDownButton in a few colors, a small one and a disabled one, all opening the same menu.

DropDownButtonInteractive

Live demo unavailable

<Panel MinHeight="160">
  <Panel.Resources>
    <MenuFlyout x:Key="FileMenu" Placement="BottomEdgeAlignedLeft">
      <MenuItem Header="New File" />
      <MenuItem Header="Open..." />
      <Separator />
      <MenuItem Header="Close" />
    </MenuFlyout>
  </Panel.Resources>
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <DropDownButton Content="Default" Flyout="{StaticResource FileMenu}" />
    <DropDownButton Classes="primary" Content="Primary" Flyout="{StaticResource FileMenu}" />
    <DropDownButton Classes="outline" Content="Outline" Flyout="{StaticResource FileMenu}" />
    <DropDownButton Classes="ghost" Content="Ghost" Flyout="{StaticResource FileMenu}" />
    <DropDownButton Classes="small" Content="Small" Flyout="{StaticResource FileMenu}" />
    <DropDownButton Content="Disabled" IsEnabled="False" Flyout="{StaticResource FileMenu}" />
  </WrapPanel>
</Panel>

A loading action half; the caret half still opens the menu.

LoadingInteractive

Live demo unavailable

<Panel MinHeight="150">
  <SplitButton Classes="primary" uikit:Buttons.IsLoading="True" HorizontalAlignment="Left" VerticalAlignment="Top">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
      <TextBlock Text="Deploy" VerticalAlignment="Center" />
    </StackPanel>
    <SplitButton.Flyout>
      <MenuFlyout Placement="BottomEdgeAlignedRight">
        <MenuItem Header="Cancel deploy" />
        <MenuItem Header="View logs" />
      </MenuFlyout>
    </SplitButton.Flyout>
  </SplitButton>
</Panel>

Dropdown Button

#Usage

#Examples

Usage

Examples