title: UWP - Make flyout part of SplitButton smaller
body: <p>I have a <code>SplitButton</code> in UWP, which looks like this:
  <a href="https://i.stack.imgur.com/srdym.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/srdym.png" alt="own SplitButton"></a></p>
  
  <p>It's noteable that there is a huge gap between my icon and the arrow for the flyout, since the flyout part of the <code>SplitButton</code> is too wide for me. </p>
  
  <p>What i want to achieve is something like this (from OneNote), where the flyout part is much smaller: <a href="https://i.stack.imgur.com/e6BzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e6BzX.png" alt="enter image description here"></a></p>
  
  <p>How is this possible with UWP <code>SplitButton</code>?</p>
  
  <p><strong>Edit: My code</strong></p>
  
  <pre><code>&lt;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}"&gt;
  
      &lt;Page.Resources&gt;
              &lt;x:Double x:Key="SplitButtonSecondaryButtonSize"&gt;14&lt;/x:Double&gt;
              &lt;Style x:Key="SplitButtonStyle" TargetType="SplitButton"&gt;
                  &lt;Setter Property="Background" Value="{ThemeResource SplitButtonBackground}" /&gt;
                  &lt;Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" /&gt;
                  &lt;Setter Property="BorderBrush" Value="{ThemeResource SplitButtonBorderBrush}" /&gt;
                  &lt;Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" /&gt;
                  &lt;Setter Property="HorizontalAlignment" Value="Left" /&gt;
                  &lt;Setter Property="VerticalAlignment" Value="Center" /&gt;
                  &lt;Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /&gt;
                  &lt;Setter Property="FontWeight" Value="Normal" /&gt;
                  &lt;Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /&gt;
                  &lt;Setter Property="UseSystemFocusVisuals" Value="True" /&gt;
                  &lt;Setter Property="FocusVisualMargin" Value="-3" /&gt;
                  &lt;Setter Property="IsTabStop" Value="True" /&gt;
                  &lt;Setter Property="Padding" Value="{ThemeResource ButtonPadding}" /&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="SplitButton"&gt;
                              &lt;Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"&gt;
  
                                  &lt;Grid.Resources&gt;
                                      &lt;!-- Override the style of the inner buttons so that they don't affect background/foreground/border colors --&gt;
                                      &lt;Style TargetType="Button"&gt;
                                          &lt;Setter Property="Background" Value="Transparent" /&gt;
                                          &lt;Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" /&gt;
                                          &lt;Setter Property="BorderBrush" Value="Transparent" /&gt;
                                          &lt;Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" /&gt;
                                          &lt;Setter Property="HorizontalAlignment" Value="Left" /&gt;
                                          &lt;Setter Property="VerticalAlignment" Value="Center" /&gt;
                                          &lt;Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /&gt;
                                          &lt;Setter Property="FontWeight" Value="Normal" /&gt;
                                          &lt;Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /&gt;
                                          &lt;Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" /&gt;
                                          &lt;Setter Property="FocusVisualMargin" Value="-3" /&gt;
                                          &lt;Setter Property="Template"&gt;
                                              &lt;Setter.Value&gt;
                                                  &lt;ControlTemplate TargetType="Button"&gt;
                                                      &lt;Grid x:Name="RootGrid" Background="Transparent"&gt;
  
                                                          &lt;VisualStateManager.VisualStateGroups&gt;
                                                              &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                                                  &lt;VisualState x:Name="Normal" /&gt;
  
                                                                  &lt;VisualState x:Name="Disabled"&gt;
                                                                      &lt;VisualState.Setters&gt;
                                                                          &lt;Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SplitButtonForegroundDisabled}" /&gt;
                                                                      &lt;/VisualState.Setters&gt;
                                                                  &lt;/VisualState&gt;
                                                              &lt;/VisualStateGroup&gt;
                                                          &lt;/VisualStateManager.VisualStateGroups&gt;
  
                                                          &lt;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" /&gt;
                                                      &lt;/Grid&gt;
                                                  &lt;/ControlTemplate&gt;
                                              &lt;/Setter.Value&gt;
                                          &lt;/Setter&gt;
                                      &lt;/Style&gt;
                                  &lt;/Grid.Resources&gt;
  
                                  &lt;VisualStateManager.VisualStateGroups&gt;
                                      &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                          &lt;VisualState x:Name="Normal" /&gt;
  
                                          &lt;VisualState x:Name="FlyoutOpen"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="TouchPressed"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="PrimaryPointerOver"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPointerOver}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPointerOver}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPointerOver}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="PrimaryPressed"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="SecondaryPointerOver"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPointerOver}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPointerOver}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPointerOver}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="SecondaryPressed"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackground}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundPressed}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="Checked"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="CheckedFlyoutOpen"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="CheckedTouchPressed"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="CheckedPrimaryPointerOver"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="CheckedPrimaryPressed"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="CheckedSecondaryPointerOver"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                          &lt;VisualState x:Name="CheckedSecondaryPressed"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="RootGrid.Background" Value="Transparent" /&gt;
                                                  &lt;Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}" /&gt;
                                                  &lt;Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}" /&gt;
                                                  &lt;Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}" /&gt;
                                                  &lt;Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                      &lt;/VisualStateGroup&gt;
  
                                      &lt;VisualStateGroup x:Name="SecondaryButtonPlacementStates"&gt;
                                          &lt;VisualState x:Name="SecondaryButtonRight" /&gt;
  
                                          &lt;VisualState x:Name="SecondaryButtonSpan"&gt;
                                              &lt;VisualState.Setters&gt;
                                                  &lt;Setter Target="SecondaryButton.(Grid.Column)" Value="0" /&gt;
                                                  &lt;Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" /&gt;
                                              &lt;/VisualState.Setters&gt;
                                          &lt;/VisualState&gt;
  
                                      &lt;/VisualStateGroup&gt;
  
                                  &lt;/VisualStateManager.VisualStateGroups&gt;
  
                                  &lt;Grid.ColumnDefinitions&gt;
                                      &lt;ColumnDefinition x:Name="FirstColumn" Width="*" MinWidth="{ThemeResource SplitButtonPrimaryButtonSize}" /&gt;
                                      &lt;ColumnDefinition x:Name="SecondColumn" Width="{ThemeResource SplitButtonSecondaryButtonSize}" /&gt;
                                  &lt;/Grid.ColumnDefinitions&gt;
                                  &lt;Grid x:Name="PrimaryBackgroundGrid" /&gt;
  
                                  &lt;Grid x:Name="SecondaryBackgroundGrid"
                      Grid.Column="1"/&gt;
                                  &lt;Grid x:Name="Border" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" /&gt;
  
                                  &lt;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"/&gt;
  
                                  &lt;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"&gt;
                                      &lt;Button.Content&gt;
                                          &lt;TextBlock
                              FontFamily="Segoe MDL2 Assets"
                              FontSize="6"
                              Text="&amp;#xE70D;"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Right"
                              AutomationProperties.AccessibilityView="Raw"/&gt;
                                      &lt;/Button.Content&gt;
                                  &lt;/Button&gt;
  
                              &lt;/Grid&gt;
  
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style&gt;
      &lt;/Page.Resources&gt;
  
      &lt;Grid&gt;
          &lt;SplitButton x:Name="textColorButton" Style="{StaticResource SplitButtonStyle}" Height="29"&gt;
              &lt;SplitButton.Content&gt;
                  &lt;StackPanel Width="20" Height="25"&gt;
                      &lt;TextBlock FontSize="14" HorizontalAlignment="Center"&gt;A&lt;/TextBlock&gt;
                      &lt;Rectangle x:Name="currentSelectedColorRectangle" Width="15" Height="3" Fill="Black" Margin="0,-1,0,0"&gt;&lt;/Rectangle&gt;
                  &lt;/StackPanel&gt;
              &lt;/SplitButton.Content&gt;
  
              &lt;SplitButton.Flyout&gt;
                  &lt;Flyout x:Name="textColorButtonFlyout" Placement="Bottom"&gt;
  
                  &lt;/Flyout&gt;
              &lt;/SplitButton.Flyout&gt;
          &lt;/SplitButton&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>