c# - UWP - 使 SplitButton 的弹出部分更小
问题描述
我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=""
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>
解决方案
UWP - 使 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=""
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>
推荐阅读
- sql-server - 在连接表的任一侧启用级联删除
- apache-kafka - Kafka 巡航控制 - NumValidWindows: (0/0) (NaN%), NumValidPartitions: 0/844 (0.000%)
- c - C structure and malloc function
- amazon-web-services - 满足条件时以编程方式向 CloudWatch 发出警报
- hangouts-chat - 是否有在 Google(环聊)聊天中指定多行代码片段的语法?
- python - 计算正则表达式中的完整字符串或字符串子集
- c# - 是否可以将 HttpModule 添加到 ASP Classic 应用程序?
- reporters - 使用 ReporteR 从 R 导出表格,其中单元格根据值着色
- c# - 实体框架 SQLite 外键适用于保存但不读取
- asp.net - 从登录页面的文本字段获取数据时,如何在 Asp.net mvc 中为 HttpGet Api 编写一个 Url