Skip to content

Commit

Permalink
Add OverflowGlyph, OverflowFontSize, and OverflowMargin resources to …
Browse files Browse the repository at this point in the history 
…allow for customizations of the glyph in both places seperately. (#6831)

Expose the chevron margin as a resource to enable cusomtization.

Apply chevron foreground color in pointer VSM.
  • Loading branch information
@StephenLPeters
StephenLPeters authored Mar 16, 2022
1 parent 0e14e8b commit 664933b
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 2 deletions.
38 changes: 37 additions & 1 deletion dev/CommonStyles/AppBarButton_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,11 @@
<StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
<x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
<x:String x:Key="AppBarButtonOverflowFlyoutGlyph">&#xE974;</x:String>
<x:Double x:Key="AppBarButtonSubItemChevronFontSize">8</x:Double>
<x:Double x:Key="AppBarButtonSecondarySubItemChevronFontSize">12</x:Double>
<Thickness x:Key="AppBarButtonSubItemChevronMargin">-23,20,12,0</Thickness>
<Thickness x:Key="AppBarButtonSecondarySubItemChevronMargin">0,0,16,0</Thickness>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<StaticResource x:Key="AppBarButtonBackground" ResourceKey="SystemControlTransparentBrush" />
Expand Down Expand Up @@ -65,7 +69,11 @@
<StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
<x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
<x:String x:Key="AppBarButtonOverflowFlyoutGlyph">&#xE974;</x:String>
<x:Double x:Key="AppBarButtonSubItemChevronFontSize">8</x:Double>
<x:Double x:Key="AppBarButtonSecondarySubItemChevronFontSize">12</x:Double>
<Thickness x:Key="AppBarButtonSubItemChevronMargin">-23,20,12,0</Thickness>
<Thickness x:Key="AppBarButtonSecondarySubItemChevronMargin">0,0,16,0</Thickness>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<StaticResource x:Key="AppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
Expand Down Expand Up @@ -95,7 +103,11 @@
<StaticResource x:Key="AppBarButtonSubItemChevronForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
<x:String x:Key="AppBarButtonFlyoutGlyph">&#xE974;</x:String>
<x:String x:Key="AppBarButtonOverflowFlyoutGlyph">&#xE974;</x:String>
<x:Double x:Key="AppBarButtonSubItemChevronFontSize">8</x:Double>
<x:Double x:Key="AppBarButtonSecondarySubItemChevronFontSize">12</x:Double>
<Thickness x:Key="AppBarButtonSubItemChevronMargin">-23,20,12,0</Thickness>
<Thickness x:Key="AppBarButtonSecondarySubItemChevronMargin">0,0,16,0</Thickness>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Expand Down Expand Up @@ -255,6 +267,7 @@
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
<contract6Present:Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
Expand All @@ -266,6 +279,7 @@
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
<contract6Present:Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
</VisualState.Setters>
</VisualState>
Expand All @@ -277,10 +291,18 @@
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundDisabled}" />
<contract6Present:Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowNormal"/>
<VisualState x:Name="OverflowNormal">
<VisualState.Setters>
<Setter Target="SubItemChevron.Glyph" Value="{ThemeResource AppBarButtonOverflowFlyoutGlyph}"/>
<Setter Target="SubItemChevron.Margin" Value="{ThemeResource AppBarButtonSecondarySubItemChevronMargin}"/>
<Setter Target="SubItemChevron.VerticalAlignment" Value="Center"/>
<Setter Target="SubItemChevron.FontSize" Value="{ThemeResource AppBarButtonSecondarySubItemChevronFontSize}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowPointerOver">
<VisualState.Setters>
<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
Expand All @@ -290,6 +312,11 @@
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<contract6Present:Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
<Setter Target="SubItemChevron.Glyph" Value="{ThemeResource AppBarButtonOverflowFlyoutGlyph}"/>
<Setter Target="SubItemChevron.Margin" Value="{ThemeResource AppBarButtonSecondarySubItemChevronMargin}"/>
<Setter Target="SubItemChevron.VerticalAlignment" Value="Center"/>
<Setter Target="SubItemChevron.FontSize" Value="{ThemeResource AppBarButtonSecondarySubItemChevronFontSize}"/>
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowPressed">
Expand All @@ -301,6 +328,11 @@
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<contract6Present:Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
<Setter Target="SubItemChevron.Glyph" Value="{ThemeResource AppBarButtonOverflowFlyoutGlyph}"/>
<Setter Target="SubItemChevron.Margin" Value="{ThemeResource AppBarButtonSecondarySubItemChevronMargin}"/>
<Setter Target="SubItemChevron.VerticalAlignment" Value="Center"/>
<Setter Target="SubItemChevron.FontSize" Value="{ThemeResource AppBarButtonSecondarySubItemChevronFontSize}"/>
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowSubMenuOpened">
Expand All @@ -312,6 +344,10 @@
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
<contract6Present:Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundSubMenuOpened}" />
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundSubMenuOpened}" />
<Setter Target="SubItemChevron.Glyph" Value="{ThemeResource AppBarButtonOverflowFlyoutGlyph}"/>
<Setter Target="SubItemChevron.Margin" Value="{ThemeResource AppBarButtonSecondarySubItemChevronMargin}"/>
<Setter Target="SubItemChevron.VerticalAlignment" Value="Center"/>
<Setter Target="SubItemChevron.FontSize" Value="{ThemeResource AppBarButtonSecondarySubItemChevronFontSize}"/>
</VisualState.Setters>
</VisualState>

Expand Down
26 changes: 25 additions & 1 deletion dev/CommonStyles/TestUI/CommandBarPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,17 @@
<AppBarButton Icon="Save" Label="Save" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Add" Label="Add">
<AppBarButton.Resources>
<Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
</AppBarButton.Resources>
<AppBarButton.Flyout>
<controls:CommandBarFlyout Placement="Right">
<AppBarButton Icon="Play" />
<AppBarButton Icon="People" />
</controls:CommandBarFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarToggleButton Icon="Add" Label="Toggle" />
Expand Down Expand Up @@ -240,6 +250,20 @@
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add">
<AppBarButton.Resources>
<Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
</AppBarButton.Resources>
<AppBarButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Item 1"/>
<MenuFlyoutItem Text="Item 2"/>
<MenuFlyoutItem Text="Item 3"/>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</StackPanel>

Expand Down

0 comments on commit 664933b

Please sign in to comment.