UWP Changing style of AppBarButton breaks the dynamic overflow's automatic styling
<p>Trying to use the new IsDynamicOverflowEnabled property on the CommandBar and I've run into a styling issue with the Overflow. Issue is as follows, when the AppBarButton's Style is not overridden and drops off to the Overflow area, the highlight of the AppBarButton stretches across the entire width of the Popup and its hover/hit detection is also the entire width of the Popup.</p>

<p>When it's Style is overridden the highlight only covers the area of the text (in this case home) and its hover/hit detection are only over this area, even if the overriding Style is exactly the same as the one in the generic.xaml.</p>

<p>I notice when inspecting the properties at Runtime that the ones that aren't being overridden are being applied another style from the TargetType - FrameworkElement.</p>

<p>From looking through the generic.xaml, the only place I can see this sort of change to a style is in the CommandBarOverflowPresenter (see below)</p>

<pre><code>&lt;CommandBarOverflowPresenter.ItemContainerStyle&gt;
  &lt;Style TargetType="FrameworkElement"&gt;
    &lt;Setter Property="HorizontalAlignment" Value="Stretch" /&gt;
    &lt;Setter Property="Width" Value="NaN" /&gt;
  &lt;/Style&gt;
&lt;/CommandBarOverflowPresenter.ItemContainerStyle&gt;
</code></pre>

<p>To remove all of the other noise from the app I'm working on, I created a new project with just a CommandBar on the main page and the necessary buttons and text needed to replicate my issue. Below is the mainpage.xaml:</p>

<pre><code>&lt;Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"&gt;

  &lt;Page.Resources&gt;
    &lt;Style x:Key="Style" TargetType="AppBarButton"&gt;
      &lt;Setter Property="Background"
              Value="{ThemeResource AppBarButtonBackground}" /&gt;
      &lt;Setter Property="Foreground"
              Value="{ThemeResource AppBarButtonForeground}" /&gt;
      &lt;Setter Property="BorderBrush"
              Value="{ThemeResource AppBarButtonBorderBrush}" /&gt;
      &lt;Setter Property="HorizontalAlignment"
              Value="Left" /&gt;
      &lt;Setter Property="VerticalAlignment"
              Value="Top" /&gt;
      &lt;Setter Property="FontFamily"
              Value="{ThemeResource ContentControlThemeFontFamily}" /&gt;
      &lt;Setter Property="FontWeight"
              Value="Normal" /&gt;
      &lt;Setter Property="Width"
              Value="68" /&gt;
      &lt;Setter Property="UseSystemFocusVisuals"
              Value="True" /&gt;
      &lt;Setter Property="AllowFocusOnInteraction"
              Value="False" /&gt;
      &lt;Setter Property="Template"&gt;
        &lt;Setter.Value&gt;
          &lt;ControlTemplate TargetType="AppBarButton"&gt;
            &lt;Grid x:Name="Root"
                  MinWidth="{TemplateBinding MinWidth}"
                  MaxWidth="{TemplateBinding MaxWidth}"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"&gt;
              &lt;Grid.Resources&gt;
                &lt;Style x:Name="LabelOnRightStyle"
                       TargetType="AppBarButton"&gt;
                  &lt;Setter Property="Width"
                          Value="NaN" /&gt;
                &lt;/Style&gt;
              &lt;/Grid.Resources&gt;
              &lt;VisualStateManager.VisualStateGroups&gt;
                &lt;VisualStateGroup x:Name="ApplicationViewStates"&gt;
                  &lt;VisualState x:Name="FullSize" /&gt;
                  &lt;VisualState x:Name="Compact"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Visibility"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Collapsed" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="LabelOnRight"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Margin"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="12,14,0,14" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                     Storyboard.TargetProperty="MinHeight"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarThemeCompactHeight}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="(Grid.Row)"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="0" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="(Grid.Column)"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="1" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="TextAlignment"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Left" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Margin"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="8,15,12,17" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="LabelCollapsed"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                     Storyboard.TargetProperty="MinHeight"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarThemeCompactHeight}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Visibility"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Collapsed" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="Overflow"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                     Storyboard.TargetProperty="Visibility"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Collapsed" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Visibility"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Visible" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="OverflowWithToggleButtons"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                     Storyboard.TargetProperty="Visibility"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Collapsed" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Visibility"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Visible" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Margin"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="38,0,12,0" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                &lt;/VisualStateGroup&gt;
                &lt;VisualStateGroup x:Name="CommonStates"&gt;
                  &lt;VisualState x:Name="Normal"&gt;
                    &lt;Storyboard&gt;
                      &lt;PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="PointerOver"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="Background"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBackgroundPointerOver}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="BorderBrush"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPointerOver}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPointerOver}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPointerOver}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="Pressed"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="Background"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBackgroundPressed}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="BorderBrush"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBorderBrushPressed}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPressed}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPressed}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPressed}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" /&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="Disabled"&gt;
                    &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="Background"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBackgroundDisabled}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="BorderBrush"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBorderBrushDisabled}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundDisabled}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundDisabled}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Foreground"&gt;
                        &lt;DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundDisabled}" /&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                    &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                &lt;/VisualStateGroup&gt;
                &lt;VisualStateGroup x:Name="InputModeStates"&gt;
                  &lt;VisualState x:Name="InputModeDefault" /&gt;
                  &lt;VisualState x:Name="TouchInputMode"&gt;
                    &lt;VisualState.Setters&gt;
                      &lt;Setter Target="OverflowTextLabel.Padding"
                              Value="0,11,0,13" /&gt;
                    &lt;/VisualState.Setters&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="GameControllerInputMode"&gt;
                    &lt;VisualState.Setters&gt;
                      &lt;Setter Target="OverflowTextLabel.Padding"
                              Value="0,11,0,13" /&gt;
                    &lt;/VisualState.Setters&gt;
                  &lt;/VisualState&gt;
                &lt;/VisualStateGroup&gt;
              &lt;/VisualStateManager.VisualStateGroups&gt;
              &lt;Grid x:Name="ContentRoot"
                    MinHeight="{ThemeResource AppBarThemeMinHeight}"&gt;
                &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="Auto" /&gt;
                &lt;/Grid.ColumnDefinitions&gt;
                &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto" /&gt;
                  &lt;RowDefinition Height="Auto" /&gt;
                &lt;/Grid.RowDefinitions&gt;
                &lt;ContentPresenter x:Name="Content"
                                  Height="20"
                                  Margin="0,14,0,4"
                                  Content="{TemplateBinding Icon}"
                                  Foreground="{TemplateBinding Foreground}"
                                  HorizontalAlignment="Stretch"
                                  AutomationProperties.AccessibilityView="Raw" /&gt;
                &lt;TextBlock x:Name="TextLabel"
                           Grid.Row="1"
                           Text="{TemplateBinding Label}"
                           Foreground="{TemplateBinding Foreground}"
                           FontSize="12"
                           FontFamily="{TemplateBinding FontFamily}"
                           TextAlignment="Center"
                           TextWrapping="Wrap"
                           Margin="2,0,2,6" /&gt;
              &lt;/Grid&gt;
              &lt;TextBlock x:Name="OverflowTextLabel"
                         Text="{TemplateBinding Label}"
                         Foreground="{TemplateBinding Foreground}"
                         FontSize="15"
                         FontFamily="{TemplateBinding FontFamily}"
                         TextAlignment="Left"
                         TextTrimming="Clip"
                         TextWrapping="NoWrap"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
                         Margin="12,0,12,0"
                         Padding="0,5,0,7"
                         Visibility="Collapsed" /&gt;
            &lt;/Grid&gt;
          &lt;/ControlTemplate&gt;
        &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
    &lt;/Style&gt;
  &lt;/Page.Resources&gt;

  &lt;Page.TopAppBar&gt;
    &lt;CommandBar IsDynamicOverflowEnabled="True"&gt;
      &lt;CommandBar.Content&gt;
        &lt;TextBlock Text="Text to force the buttons to drop off at some point when the screen is resized" /&gt;
      &lt;/CommandBar.Content&gt;
      &lt;CommandBar.PrimaryCommands&gt;
        &lt;AppBarButton Label="Edit"
                      Icon="Edit" /&gt;
        &lt;AppBarButton Label="People"
                      Icon="People" /&gt;
        &lt;AppBarButton Label="Really long text should should make overflow wider"
                      Icon="Highlight" /&gt;
        &lt;AppBarButton Label="Home"
                      Icon="Home"
                      Style="{StaticResource Style}" /&gt;
      &lt;/CommandBar.PrimaryCommands&gt;
    &lt;/CommandBar&gt;
  &lt;/Page.TopAppBar&gt;
&lt;/Page&gt;
</code></pre>

<p>As you can see I have 1 CommandBar, 1 TextBlock in the content of the CommandBar and 4 AppBarButtons in the CommandBar's PrimaryCommands. Only 1 of the AppBarButtons Styles is overridden (the Home one) and the Style which it is overridden with is grabbed directly from the generic.xaml from this location - C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic</p>

<p>Why does this happen? And is there any known workarounds?  </p>