Merge pull request #804 from vgromfeld/addOptionsFlyout

Add options flyout

Author: niels9001

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"

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;
@@ -47,20 +52,74 @@ public sealed partial class Ribbon : Control
         new PropertyMetadata(20.0));
 
     /// <summary>
-    /// The amount to add or remove from the current scroll position.
+    /// 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, OnOptionsFlyoutPropertyChanged));
+
+    /// <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));
+
+    /// <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));
+
+    public Ribbon()
+    {
+        DefaultStyleKey = typeof(Ribbon);
+
+        _items = [];
+        _items.CollectionChanged += OnItemsCollectionChanged;
+    }
+
+    /// <summary>
+    /// Gets or sets the amount to add or remove from the current scroll position.
     /// </summary>
     public double ScrollStep
     {
         get => (double)GetValue(ScrollStepProperty);
         set => SetValue(ScrollStepProperty, value);
     }
 
-    public Ribbon()
+    /// <summary>
+    /// Gets or sets the flyout to display when the user clicks on the ribbon options button.
+    /// </summary>
+    public FlyoutBase? OptionsFlyout
     {
-        DefaultStyleKey = typeof(Ribbon);
+        get => (FlyoutBase?)GetValue(OptionsFlyoutProperty);
+        set => SetValue(OptionsFlyoutProperty, value);
+    }
 
-        _items = [];
-        _items.CollectionChanged += OnItemsCollectionChanged;
+    /// <summary>
+    /// Gets or sets the accessible name for the options button.
+    /// </summary>
+    public string OptionsAccessibleName
+    {
+        get => (string)GetValue(OptionsAccessibleNameProperty);
+        set => SetValue(OptionsAccessibleNameProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the access key to set on the options flyout button.
+    /// </summary>
+    public string OptionsAccessKey
+    {
+        get => (string)GetValue(OptionsAccessKeyProperty);
+        set => SetValue(OptionsAccessKeyProperty, value);
     }
 
     public IList<UIElement> Items => _items;
@@ -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);
 }

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>