Dropdown Button

一个带箭头半边、用于打开菜单的按钮，即 Avalonia 的 SplitButton；或者一个带箭头的按钮，即 DropDownButton。

示例可交互

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>

用法

主题覆盖 SplitButton。操作半边是 Content，由 Click 或 Command 触发；箭头半边打开 Flyout，通常是 MenuFlyout。菜单在右边缘下方展开：请为浮出层设置 Placement="BottomEdgeAlignedRight"；主题会在按钮下方补上 4px 的间隙。

样式类与 Button 相同：颜色 primary、secondary、danger、warning、success、info、ghost、link 与 text，修饰 outline 与 selected，以及尺寸 xsmall、small 与 large。菜单打开期间，箭头半边保持按下外观。Avalonia 把 SplitButton 当作一个 Tab 停靠点；焦点环显示在操作半边。

如果只需要一个打开菜单的按钮，请使用 DropDownButton：即在内容之后带箭头的 Button。它接受 Button 的全部样式类；无论处于何种状态，箭头都保持按钮正常文字颜色 75% 的透明度。请为其 MenuFlyout 设置 Placement="BottomEdgeAlignedLeft"；菜单打开期间，按钮显示选中外观。

uikit:Buttons.IsLoading 让操作半边像 Button 一样进入加载状态：该半边淡出，在指针悬停时保持外观，其图标旋转，并忽略点击、Enter 与空格，而箭头半边仍可打开菜单。uikit:Buttons.TakesFocusOnPointer="False" 会在任一半边被按下时让焦点留在原处。

示例

主要的颜色，实心与描边，以及一个禁用示例。该演示把一个 MenuFlyout 保存在面板的资源中，并通过 Flyout="{StaticResource SaveMenu}" 共享它。

变体可交互

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>

四种尺寸会同时缩放两个半边与箭头。

尺寸可交互

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 的几种颜色、一个小尺寸和一个禁用示例，它们都打开同一个菜单。

DropDownButton可交互

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>

操作半边处于加载状态；箭头半边仍可打开菜单。

加载中可交互

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

#用法

#示例

用法

示例