跳到主要内容

SplitButton 分裂按钮

SplitButton 作为 Button 的扩展，具有可以单独按下的主要和次要部分。主要部分的行为与普通的 Button 相同，而次要部分会打开一个 Flyout，其中包含额外的操作。

这是否是正确的控件？​

SplitButton 应该只由类似的操作组成。从根本上讲，此控件用于将常用操作分组，其中一个操作明显优先于其他操作。最常见的操作应该作为默认操作显示在 SplitButton 的主要部分中。较不常见的操作应添加到 Flyout 中，在按下次要（下拉）部分时显示。

信息

用户选择的操作应在按下主要部分或 Flyout 中的次要操作时立即调用。所有按下的操作，无论是主要还是次要的，都是立即生效的。

常见属性​

属性描述
Content在主要部分显示的内容
Flyout次要部分被点击时显示的 Flyout
Command主按钮点击时要调用的命令

伪类​

伪类描述
:pressed当通过键盘输入（例如空格或回车）按下整个 SplitButton 时设置。在这种状态下，不区分主要部分还是次要部分。
:flyout-open当 Flyout 打开时设置。

API 参考​

SplitButton

源代码​

SplitButton.cs

示例代码​

基本示例​

<SplitButton Content="内容" >
    <SplitButton.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuItem Header="项目1">
                <MenuItem Header="子项1" />
                <MenuItem Header="子项2" />
                <MenuItem Header="子项3" />
            </MenuItem>
            <MenuItem Header="项目2"
                      InputGesture="Ctrl+A" />
            <MenuItem Header="项目3" />
        </MenuFlyout>
    </SplitButton.Flyout>
</SplitButton>

SplitButton (Flyout closed)

SplitButton（Flyout已打开）

颜色选择示例​

SplitButton 的一个常见用例是在编辑器中为文本着色。按下 SplitButton 的主要部分将将当前颜色应用于所选文本。按下次要部分将打开 Flyout，允许指定并应用另一种颜色。再次注意，当在 Flyout 中指定另一种颜色时，所选文本的颜色将立即更改，并且当前颜色也将更新。

<!-- 我们已定义以下 DataTemplate -->
<DataTemplate DataType="Color">
  <Border CornerRadius="4" Width="20" Height="20" BorderBrush="Gray" BorderThickness="1" >
    <Border.Background>
      <SolidColorBrush Color="{Binding}" />
    </Border.Background>
  </Border>
</DataTemplate>
<!-- SelectedColor、ChangeColorCommand 和 AvailableColors 是我们 ViewModel 的属性 -->
<SplitButton Content="{Binding SelectedColor}" 
             Command="{Binding ChangeColorCommand}">
  <SplitButton.Flyout>
    <Flyout Placement="Bottom">
      <ListBox ItemsSource="{Binding AvailableColors}" 
               SelectedItem="{Binding SelectedColor}" 
               Height="200" Width="200" >
        <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
            <WrapPanel />
          </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
      </ListBox>
    </Flyout>
  </SplitButton.Flyout>
</SplitButton>

用于颜色选择的 SplitButton 示例

导出按钮示例​

SplitButton 的另一个常见用例可能是导出按钮。按下主要部分时，将使用默认设置导出数据。但是，如果按下次要部分，可以指定其他导出选项，例如‘导出为 PNG’、‘导出为 JPG’等。

<SplitButton Content="导出为PDF"
             Command="{Binding ExportCommand}"
             CommandParameter=".pdf">
    <SplitButton.Flyout>
        <MenuFlyout Placement="RightEdgeAlignedTop">
            <MenuItem Header="导出为PNG"
                      Command="{Binding ExportCommand}"
                      CommandParameter=".png" />
            <MenuItem Header="导出为JPG"
                      Command="{Binding ExportCommand}"
                      CommandParameter=".jpg" />
        </MenuFlyout>
    </SplitButton.Flyout>
</SplitButton>

带有不同导出选项的 SplitButton 示例