UWP - 让SplitButton的flyout部分变小。

Question

我有一个 SplitButton 在UWP中，它的样子是这样的。

值得注意的是，我的图标和飞出的箭头之间有一个巨大的差距，因为飞出的部分是... SplitButton 对我来说太宽了。

我想实现的是像这样的东西（来自OneNote），其中飞出部分要小得多。

这在UWP中是如何实现的 SplitButton?

编辑：我的代码

<Page
    x:Class="ComboBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ComboBox"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
            <x:Double x:Key="SplitButtonSecondaryButtonSize">14</x:Double>
            <Style x:Key="SplitButtonStyle" TargetType="SplitButton">
                <Setter Property="Background" Value="{ThemeResource SplitButtonBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" />
                <Setter Property="BorderBrush" Value="{ThemeResource SplitButtonBorderBrush}" />
                <Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontWeight" Value="Normal" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="UseSystemFocusVisuals" Value="True" />
                <Setter Property="FocusVisualMargin" Value="-3" />
                <Setter Property="IsTabStop" Value="True" />
                <Setter Property="Padding" Value="{ThemeResource ButtonPadding}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="SplitButton">
                            <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">

                                <Grid.Resources>
                                    <!-- Override the style of the inner buttons so that they don't affect background/foreground/border colors -->
                                    <Style TargetType="Button">
                                        <Setter Property="Background" Value="Transparent" />
                                        <Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" />
                                        <Setter Property="BorderBrush" Value="Transparent" />
                                        <Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" />
                                        <Setter Property="HorizontalAlignment" Value="Left" />
                                        <Setter Property="VerticalAlignment" Value="Center" />
                                        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                                        <Setter Property="FontWeight" Value="Normal" />
                                        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                                        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                                        <Setter Property="FocusVisualMargin" Value="-3" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Button">
                                                    <Grid x:Name="RootGrid" Background="Transparent">

                                                        <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroup x:Name="CommonStates">
                                                                <VisualState x:Name="Normal" />

                                                                <VisualState x:Name="Disabled">
                                                                    <VisualState.Setters>
                                                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SplitButtonForegroundDisabled}" />
                                                                    </VisualState.Setters>
                                                                </VisualState>
                                                            </VisualStateGroup>
                                                        </VisualStateManager.VisualStateGroups>

                                                        <ContentPresenter x:Name="ContentPresenter"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Content="{TemplateBinding Content}"
                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Padding="{TemplateBinding Padding}"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            AutomationProperties.AccessibilityView="Raw" />
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />

                                        <VisualState x:Name="FlyoutOpen">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="TouchPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PrimaryPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPointerOver}" />
                                                <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPointerOver}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPointerOver}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PrimaryPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                                <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="SecondaryPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPointerOver}" />
                                                <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPointerOver}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPointerOver}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="SecondaryPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                                <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="Checked">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="CheckedFlyoutOpen">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="CheckedTouchPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="CheckedPrimaryPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}" />
                                                <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="CheckedPrimaryPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                                <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="CheckedSecondaryPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}" />
                                                <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="CheckedSecondaryPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                                <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                                <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                                <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                                <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                                <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                                <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="SecondaryButtonPlacementStates">
                                        <VisualState x:Name="SecondaryButtonRight" />

                                        <VisualState x:Name="SecondaryButtonSpan">
                                            <VisualState.Setters>
                                                <Setter Target="SecondaryButton.(Grid.Column)" Value="0" />
                                                <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="FirstColumn" Width="*" MinWidth="{ThemeResource SplitButtonPrimaryButtonSize}" />
                                    <ColumnDefinition x:Name="SecondColumn" Width="{ThemeResource SplitButtonSecondaryButtonSize}" />
                                </Grid.ColumnDefinitions>
                                <Grid x:Name="PrimaryBackgroundGrid" />

                                <Grid x:Name="SecondaryBackgroundGrid"
                    Grid.Column="1"/>
                                <Grid x:Name="Border" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" />

                                <Button x:Name="PrimaryButton"
                    Grid.Column="0"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="Transparent"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Command="{TemplateBinding Command}"
                    CommandParameter="{TemplateBinding CommandParameter}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="{TemplateBinding Padding}"
                    IsTabStop="False"
                    AutomationProperties.AccessibilityView="Raw"/>

                                <Button x:Name="SecondaryButton"
                    Grid.Column="1"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="Transparent"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="0,0,2,0"
                    IsTabStop="False"
                    AutomationProperties.AccessibilityView="Raw">
                                    <Button.Content>
                                        <TextBlock
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="6"
                            Text="&#xE70D;"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Right"
                            AutomationProperties.AccessibilityView="Raw"/>
                                    </Button.Content>
                                </Button>

                            </Grid>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </Page.Resources>

    <Grid>
        <SplitButton x:Name="textColorButton" Style="{StaticResource SplitButtonStyle}" Height="29">
            <SplitButton.Content>
                <StackPanel Width="20" Height="25">
                    <TextBlock FontSize="14" HorizontalAlignment="Center">A</TextBlock>
                    <Rectangle x:Name="currentSelectedColorRectangle" Width="15" Height="3" Fill="Black" Margin="0,-1,0,0"></Rectangle>
                </StackPanel>
            </SplitButton.Content>

            <SplitButton.Flyout>
                <Flyout x:Name="textColorButtonFlyout" Placement="Bottom">

                </Flyout>
            </SplitButton.Flyout>
        </SplitButton>
    </Grid>
</Page>

Answer 1

UWP - 让SplitButton的flyout部分变小。

当然，你可以编辑默认的SplitButton风格，修改 SplitButtonSecondaryButtonSize 和它的内容字体大小。请参考以下完整的样式。

<x:Double x:Key="SplitButtonSecondaryButtonSize">14</x:Double>
<Style x:Key="SplitButtonStyle" TargetType="SplitButton">
    <Setter Property="Background" Value="{ThemeResource SplitButtonBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource SplitButtonBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="Padding" Value="{ThemeResource ButtonPadding}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="SplitButton">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">

                    <Grid.Resources>
                        <!-- Override the style of the inner buttons so that they don't affect background/foreground/border colors -->
                        <Style TargetType="Button">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" />
                            <Setter Property="BorderBrush" Value="Transparent" />
                            <Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" />
                            <Setter Property="HorizontalAlignment" Value="Left" />
                            <Setter Property="VerticalAlignment" Value="Center" />
                            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                            <Setter Property="FontWeight" Value="Normal" />
                            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                            <Setter Property="FocusVisualMargin" Value="-3" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Button">
                                        <Grid x:Name="RootGrid" Background="Transparent">

                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal" />

                                                    <VisualState x:Name="Disabled">
                                                        <VisualState.Setters>
                                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SplitButtonForegroundDisabled}" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>

                                            <ContentPresenter x:Name="ContentPresenter"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Content="{TemplateBinding Content}"
                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Padding="{TemplateBinding Padding}"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            AutomationProperties.AccessibilityView="Raw" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="FlyoutOpen">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="TouchPressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="PrimaryPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPointerOver}" />
                                    <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPointerOver}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPointerOver}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="PrimaryPressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                    <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="SecondaryPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPointerOver}" />
                                    <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPointerOver}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="SecondaryPressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" />
                                    <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="CheckedFlyoutOpen">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="CheckedTouchPressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="CheckedPrimaryPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}" />
                                    <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="CheckedPrimaryPressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                    <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="CheckedSecondaryPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}" />
                                    <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="CheckedSecondaryPressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="Transparent" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" />
                                    <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" />
                                    <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" />
                                    <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" />
                                    <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" />
                                    <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SecondaryButtonPlacementStates">
                            <VisualState x:Name="SecondaryButtonRight" />

                            <VisualState x:Name="SecondaryButtonSpan">
                                <VisualState.Setters>
                                    <Setter Target="SecondaryButton.(Grid.Column)" Value="0" />
                                    <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="FirstColumn" Width="*" MinWidth="{ThemeResource SplitButtonPrimaryButtonSize}" />
                        <ColumnDefinition x:Name="SecondColumn" Width="{ThemeResource SplitButtonSecondaryButtonSize}" />
                    </Grid.ColumnDefinitions>
                    <Grid x:Name="PrimaryBackgroundGrid" />

                    <Grid x:Name="SecondaryBackgroundGrid"
                    Grid.Column="1"/>
                    <Grid x:Name="Border" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" />

                    <Button x:Name="PrimaryButton"
                    Grid.Column="0"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="Transparent"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Command="{TemplateBinding Command}"
                    CommandParameter="{TemplateBinding CommandParameter}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="{TemplateBinding Padding}"
                    IsTabStop="False"
                    AutomationProperties.AccessibilityView="Raw"/>

                    <Button x:Name="SecondaryButton"
                    Grid.Column="1"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="Transparent"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="0,0,2,0"
                    IsTabStop="False"
                    AutomationProperties.AccessibilityView="Raw">
                        <Button.Content>
                            <TextBlock
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="6"
                            Text="&#xE70D;"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Right"
                            AutomationProperties.AccessibilityView="Raw"/>
                        </Button.Content>
                    </Button>

                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用方法

<SplitButton Content="Click" Style="{StaticResource SplitButtonStyle}" >
    <SplitButton.Flyout>
        <Flyout Placement="Bottom">
            <!-- flyout content -->
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>