From 23e1d6096f167d0ff4defeb3557058ff6606ca0e Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Wed, 13 May 2026 16:09:14 +0200
Subject: [PATCH 1/2] Add options flyout to Ribbon

---
 .../Ribbon/samples/RibbonCustomSample.xaml    | 11 ++-
 components/Ribbon/src/Ribbon.cs               | 72 +++++++++++++++++++
 components/Ribbon/src/RibbonStyle.xaml        | 25 +++++++
 3 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/components/Ribbon/samples/RibbonCustomSample.xaml b/components/Ribbon/samples/RibbonCustomSample.xaml
index e7d6a27bf..3277c8599 100644
--- a/components/Ribbon/samples/RibbonCustomSample.xaml
+++ b/components/Ribbon/samples/RibbonCustomSample.xaml
@@ -27,7 +27,16 @@
             </Style>
         </StackPanel.Resources>
 
-        <controls:Ribbon HorizontalAlignment="Stretch">
+        <controls:Ribbon HorizontalAlignment="Stretch"
+                         OptionsAccessKey="O"
+                         OptionsAccessibleName="Options">
+
+            <controls:Ribbon.OptionsFlyout>
+                <MenuFlyout Placement="BottomEdgeAlignedRight">
+                    <ToggleMenuFlyoutItem Text="Always show toolbar" />
+                    <MenuFlyoutItem Text="Configure" />
+                </MenuFlyout>
+            </controls:Ribbon.OptionsFlyout>
 
             <controls:RibbonCollapsibleGroup AccessKey="AB"
                                              CollapsedAccessKey="AA"
diff --git a/components/Ribbon/src/Ribbon.cs b/components/Ribbon/src/Ribbon.cs
index ba36ef79c..438c57e03 100644
--- a/components/Ribbon/src/Ribbon.cs
+++ b/components/Ribbon/src/Ribbon.cs
@@ -19,6 +19,8 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = DecrementButtonStateTemplatePart)]
 [TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = IncrementButtonStateTemplatePart)]
 [TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = BothButtonsStateTemplatePart)]
+[TemplateVisualState(GroupName = OptionsGroupNameTemplatePart, Name = OptionsVisibleStateTemplatePart)]
+[TemplateVisualState(GroupName = OptionsGroupNameTemplatePart, Name = OptionsCollapsedStateTemplatePart)]
 public sealed partial class Ribbon : Control
 {
     private const string PanelTemplatePart = "Panel";
@@ -30,6 +32,9 @@ public sealed partial class Ribbon : Control
     private const string DecrementButtonStateTemplatePart = "DecrementButton";
     private const string IncrementButtonStateTemplatePart = "IncrementButton";
     private const string BothButtonsStateTemplatePart = "BothButtons";
+    private const string OptionsGroupNameTemplatePart = "OptionsGroup";
+    private const string OptionsVisibleStateTemplatePart = "OptionsVisible";
+    private const string OptionsCollapsedStateTemplatePart = "OptionsCollapsed";
 
     private Panel? _panel;
     private ScrollViewer? _scrollViewer;
@@ -55,6 +60,60 @@ public double ScrollStep
         set => SetValue(ScrollStepProperty, value);
     }
 
+    /// <summary>
+    /// The DP to store the <see cref="OptionsFlyout"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty OptionsFlyoutProperty = DependencyProperty.Register(
+        nameof(OptionsFlyout),
+        typeof(FlyoutBase),
+        typeof(Ribbon),
+        new PropertyMetadata(null));
+
+    /// <summary>
+    /// The flyout to display when the user clicks on the ribbon options button.
+    /// </summary>
+    public FlyoutBase OptionsFlyout
+    {
+        get => (FlyoutBase)GetValue(OptionsFlyoutProperty);
+        set => SetValue(OptionsFlyoutProperty, value);
+    }
+
+    /// <summary>
+    /// The DP to store the <see cref="OptionsAccessibleName"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty OptionsAccessibleNameProperty = DependencyProperty.Register(
+        nameof(OptionsAccessibleName),
+        typeof(string),
+        typeof(Ribbon),
+        new PropertyMetadata(string.Empty, OnOptionsFlyoutPropertyChanged));
+
+    /// <summary>
+    /// The accessible name for the options button.
+    /// </summary>
+    public string OptionsAccessibleName
+    {
+        get => (string)GetValue(OptionsAccessibleNameProperty);
+        set => SetValue(OptionsAccessibleNameProperty, value);
+    }
+
+    /// <summary>
+    /// The DP to store the <see cref="OptionsAccessKey"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty OptionsAccessKeyProperty = DependencyProperty.Register(
+        nameof(OptionsAccessKey),
+        typeof(string),
+        typeof(Ribbon),
+        new PropertyMetadata(string.Empty));
+
+    /// <summary>
+    /// The access key to set on the options flyout button/
+    /// </summary>
+    public string OptionsAccessKey
+    {
+        get => (string)GetValue(OptionsAccessKeyProperty);
+        set => SetValue(OptionsAccessKeyProperty, value);
+    }
+
     public Ribbon()
     {
         DefaultStyleKey = typeof(Ribbon);
@@ -97,6 +156,8 @@ protected override void OnApplyTemplate()
             _scrollViewer.SizeChanged += OnSizeChanged;
             UpdateScrollButtonsState();
         }
+
+        UpdateOptionsFlyoutState();
     }
 
     private void OnItemsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
@@ -198,4 +259,15 @@ private void OnDecrementScrollViewer(object sender, RoutedEventArgs e)
 
     private void OnIncrementScrollViewer(object sender, RoutedEventArgs e)
         => _scrollViewer?.ChangeView(_scrollViewer.HorizontalOffset + ScrollStep, verticalOffset: null, zoomFactor: null);
+
+    private static void OnOptionsFlyoutPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var ribbon = (Ribbon)d;
+        ribbon.UpdateOptionsFlyoutState();
+    }
+
+    private void UpdateOptionsFlyoutState() => VisualStateManager.GoToState(
+        this,
+        OptionsFlyout != null ? OptionsVisibleStateTemplatePart : OptionsCollapsedStateTemplatePart,
+        useTransitions: true);
 }
diff --git a/components/Ribbon/src/RibbonStyle.xaml b/components/Ribbon/src/RibbonStyle.xaml
index 9fe9a5468..31cf64638 100644
--- a/components/Ribbon/src/RibbonStyle.xaml
+++ b/components/Ribbon/src/RibbonStyle.xaml
@@ -358,6 +358,7 @@
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
 
                         <VisualStateManager.VisualStateGroups>
@@ -380,6 +381,14 @@
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
+                            <VisualStateGroup x:Name="OptionsGroup">
+                                <VisualState x:Name="OptionsCollapsed" />
+                                <VisualState x:Name="OptionsVisible">
+                                    <VisualState.Setters>
+                                        <Setter Target="OptionsButton.Visibility" Value="Visible" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
 
                         <ScrollViewer x:Name="ScrollViewer"
@@ -397,6 +406,22 @@
                                       Grid.Column="2"
                                       Style="{StaticResource RibbonScrollIncrementButtonStyle}"
                                       Visibility="Collapsed" />
+
+                        <Button x:Name="OptionsButton"
+                                Grid.Column="3"
+                                Margin="4"
+                                Padding="4"
+                                VerticalAlignment="Bottom"
+                                AccessKey="{TemplateBinding OptionsAccessKey}"
+                                AutomationProperties.Name="{TemplateBinding OptionsAccessibleName}"
+                                Background="Transparent"
+                                BorderBrush="Transparent"
+                                Flyout="{TemplateBinding OptionsFlyout}"
+                                Visibility="Collapsed">
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                      FontSize="12"
+                                      Glyph="&#xE70D;" />
+                        </Button>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>

From 2d64bdd99cd0505a7c2ff5f7dc17f4241ac8e4f2 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Wed, 13 May 2026 17:00:25 +0200
Subject: [PATCH 2/2] fix pr comments

---
 components/Ribbon/src/Ribbon.cs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Ribbon/src/Ribbon.cs b/components/Ribbon/src/Ribbon.cs
index 438c57e03..d383801e5 100644
--- a/components/Ribbon/src/Ribbon.cs
+++ b/components/Ribbon/src/Ribbon.cs
@@ -67,14 +67,14 @@ public double ScrollStep
         nameof(OptionsFlyout),
         typeof(FlyoutBase),
         typeof(Ribbon),
-        new PropertyMetadata(null));
+        new PropertyMetadata(null, OnOptionsFlyoutPropertyChanged));
 
     /// <summary>
     /// The flyout to display when the user clicks on the ribbon options button.
     /// </summary>
-    public FlyoutBase OptionsFlyout
+    public FlyoutBase? OptionsFlyout
     {
-        get => (FlyoutBase)GetValue(OptionsFlyoutProperty);
+        get => (FlyoutBase?)GetValue(OptionsFlyoutProperty);
         set => SetValue(OptionsFlyoutProperty, value);
     }
 
@@ -85,7 +85,7 @@ public FlyoutBase OptionsFlyout
         nameof(OptionsAccessibleName),
         typeof(string),
         typeof(Ribbon),
-        new PropertyMetadata(string.Empty, OnOptionsFlyoutPropertyChanged));
+        new PropertyMetadata(string.Empty));
 
     /// <summary>
     /// The accessible name for the options button.
@@ -106,7 +106,7 @@ public string OptionsAccessibleName
         new PropertyMetadata(string.Empty));
 
     /// <summary>
-    /// The access key to set on the options flyout button/
+    /// The access key to set on the options flyout button.
     /// </summary>
     public string OptionsAccessKey
     {