From dc367f353b930d7b1010494cc058cbb47a23c6d6 Mon Sep 17 00:00:00 2001
From: Rashmi Thakur <rashmithakur@microsoft.com>
Date: Wed, 26 Aug 2026 19:31:43 +0530
Subject: [PATCH] Enable AppBarButton label font size customization

Add an AppBarButtonLabelFontSize lightweight resource to the standard and optimized styles, and cover overriding it in the existing common styles API test.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 controls/dev/CommonStyles/APITests/CommonStylesTests.cs    | 7 +++++--
 controls/dev/CommonStyles/AppBarButton_themeresources.xaml | 5 ++++-
 .../CommonStyles/AppBarButton_themeresources_perf2026.xaml | 5 ++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/controls/dev/CommonStyles/APITests/CommonStylesTests.cs b/controls/dev/CommonStyles/APITests/CommonStylesTests.cs
index dbd4ff52ec..4af21f0785 100644
--- a/controls/dev/CommonStyles/APITests/CommonStylesTests.cs
+++ b/controls/dev/CommonStyles/APITests/CommonStylesTests.cs
@@ -373,6 +373,7 @@ public void VerifyAppBarButtonLightweightStyling()
                     @"<StackPanel xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
                         xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'> 
                             <StackPanel.Resources>
+                                <x:Double x:Key='AppBarButtonLabelFontSize'>18</x:Double>
                                 <Visibility x:Key='AppBarButtonHasFlyoutChevronVisibility'>Collapsed</Visibility>
                                 <SolidColorBrush x:Key='AppBarButtonSubItemChevronForeground' Color='Red' />
                                 <x:String x:Key='AppBarButtonFlyoutGlyph'>&#xE972;</x:String>
@@ -382,9 +383,9 @@ public void VerifyAppBarButtonLightweightStyling()
                                 <x:Double x:Key='AppBarButtonSecondarySubItemChevronFontSize'>14</x:Double>
                                 <Thickness x:Key='AppBarButtonSecondarySubItemChevronMargin'>-25,20,12,0</Thickness>
                             </StackPanel.Resources>
-                            <AppBarButton x:Name='TestAppBarButton'/>
+                            <AppBarButton x:Name='TestAppBarButton' Label='Test label'/>
                       </StackPanel>");
-
+                appBarButton = (AppBarButton)root.FindName("TestAppBarButton");
                 appBarButton = (AppBarButton)root.FindName("TestAppBarButton");
                 appBarButton.Loaded += (sender, args) => { appBarButtonLoadedEvent.Set(); };
                 Content = root;
@@ -399,7 +400,9 @@ public void VerifyAppBarButtonLightweightStyling()
                 Panel subItemChevronPanel = (Panel)GetVisualChildByName(appBarButton, "SubItemChevronPanel");
                 FontIcon subItemChevron = (FontIcon)GetVisualChildByName(appBarButton, "SubItemChevron");
                 FontIcon overflowSubItemChevron = (FontIcon)GetVisualChildByName(appBarButton, "OverflowSubItemChevron");
+                TextBlock textLabel = (TextBlock)GetVisualChildByName(appBarButton, "TextLabel");
 
+                Verify.AreEqual(18.0, textLabel.FontSize);
                 Verify.AreEqual((Visibility)root.Resources["AppBarButtonHasFlyoutChevronVisibility"], subItemChevronPanel.Visibility);
 
                 Verify.AreEqual((string)root.Resources["AppBarButtonFlyoutGlyph"], subItemChevron.Glyph);
diff --git a/controls/dev/CommonStyles/AppBarButton_themeresources.xaml b/controls/dev/CommonStyles/AppBarButton_themeresources.xaml
index 60bcf2af4d..83055262b5 100644
--- a/controls/dev/CommonStyles/AppBarButton_themeresources.xaml
+++ b/controls/dev/CommonStyles/AppBarButton_themeresources.xaml
@@ -30,6 +30,7 @@
       <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="AppBarButtonLabelFontSize">12</x:Double>
       <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>
@@ -65,6 +66,7 @@
       <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="AppBarButtonLabelFontSize">12</x:Double>
       <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>
@@ -100,6 +102,7 @@
       <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="AppBarButtonLabelFontSize">12</x:Double>
       <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>
@@ -366,7 +369,7 @@
               <Viewbox x:Name="ContentViewbox" Height="{ThemeResource AppBarButtonContentHeight}" Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}" HorizontalAlignment="Stretch" AutomationProperties.AccessibilityView="Raw">
                 <ContentPresenter x:Name="Content" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" />
               </Viewbox>
-              <TextBlock x:Name="TextLabel" Grid.Row="1" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Margin="{ThemeResource AppBarButtonTextLabelMargin}" AutomationProperties.AccessibilityView="Raw" />
+              <TextBlock x:Name="TextLabel" Grid.Row="1" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="{ThemeResource AppBarButtonLabelFontSize}" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Margin="{ThemeResource AppBarButtonTextLabelMargin}" AutomationProperties.AccessibilityView="Raw" />
               <TextBlock x:Name="OverflowTextLabel" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="{ThemeResource ControlContentThemeFontSize}" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left" TextTrimming="Clip" TextWrapping="NoWrap" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="12,0,12,0" Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" />
               <TextBlock x:Name="KeyboardAcceleratorTextLabel" Grid.Column="1" Style="{ThemeResource CaptionTextBlockStyle}" Text="{TemplateBinding KeyboardAcceleratorTextOverride}" MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}" Margin="24,0,12,0" Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}" HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" />
               <Grid x:Name="SubItemChevronPanel" Grid.Column="2" Visibility="Collapsed">
diff --git a/controls/dev/CommonStyles/AppBarButton_themeresources_perf2026.xaml b/controls/dev/CommonStyles/AppBarButton_themeresources_perf2026.xaml
index c132a7bfd7..4449f5016a 100644
--- a/controls/dev/CommonStyles/AppBarButton_themeresources_perf2026.xaml
+++ b/controls/dev/CommonStyles/AppBarButton_themeresources_perf2026.xaml
@@ -30,6 +30,7 @@
       <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="AppBarButtonLabelFontSize">12</x:Double>
       <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>
@@ -65,6 +66,7 @@
       <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="AppBarButtonLabelFontSize">12</x:Double>
       <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>
@@ -100,6 +102,7 @@
       <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="AppBarButtonLabelFontSize">12</x:Double>
       <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>
@@ -344,7 +347,7 @@
               <Viewbox x:Name="ContentViewbox" Height="{ThemeResource AppBarButtonContentHeight}" Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}" HorizontalAlignment="Stretch" AutomationProperties.AccessibilityView="Raw">
                 <ContentPresenter x:Name="Content" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" />
               </Viewbox>
-              <TextBlock x:Name="TextLabel" Grid.Row="1" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Margin="{ThemeResource AppBarButtonTextLabelMargin}" AutomationProperties.AccessibilityView="Raw" />
+              <TextBlock x:Name="TextLabel" Grid.Row="1" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="{ThemeResource AppBarButtonLabelFontSize}" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Center" TextWrapping="Wrap" Margin="{ThemeResource AppBarButtonTextLabelMargin}" AutomationProperties.AccessibilityView="Raw" />
               <TextBlock x:Name="OverflowTextLabel" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" FontSize="{ThemeResource ControlContentThemeFontSize}" FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left" TextTrimming="Clip" TextWrapping="NoWrap" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="12,0,12,0" Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" />
               <TextBlock x:Name="KeyboardAcceleratorTextLabel" Grid.Column="1" Style="{ThemeResource CaptionTextBlockStyle}" Text="{TemplateBinding KeyboardAcceleratorTextOverride}" MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}" Margin="24,0,12,0" Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}" HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" />
               <Grid x:Name="SubItemChevronPanel" Grid.Column="2" Visibility="Collapsed">