Add options flyout

[vgromfeld]

What

I'm adding an optional OptionsFlyout button to the Ribbon control. It allows us to add some configuration options to the ribbon like "always show", "auto hide"...

How

I'm adding a new set of properties to the Ribbon control to attached a Flyout to the new options button.
The options button will only be displayed if there is a flyout attached to the ribbon. It can have an access key and an automation name.

Screenshots

State	Screenshot
Closed
Opened

[Copilot]

Pull request overview

This PR adds an optional “Options” flyout button to the Ribbon control template, enabling ribbon-level configuration actions (eg “always show”, “auto hide”) when a FlyoutBase is attached.

Changes:

• Added an OptionsButton to the Ribbon control template and a new OptionsGroup visual state to control its visibility.
• Introduced new Ribbon dependency properties: OptionsFlyout, OptionsAccessibleName, and OptionsAccessKey.
• Updated the ribbon sample to demonstrate attaching a MenuFlyout to the new options button.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
components/Ribbon/src/RibbonStyle.xaml	Adds an options button to the template and a visual state group to show/hide it.
components/Ribbon/src/Ribbon.cs	Adds DPs and visual-state logic intended to toggle the options button based on whether a flyout is set.
components/Ribbon/samples/RibbonCustomSample.xaml	Demonstrates the new options flyout feature in the sample page.

Comments suppressed due to low confidence (1)

components/Ribbon/src/Ribbon.cs:88

• OptionsAccessibleNameProperty is wired to OnOptionsFlyoutPropertyChanged, which appears to be a copy/paste mistake (changing the accessible name shouldn't toggle the OptionsVisible/OptionsCollapsed visual state). This callback should be removed from OptionsAccessibleNameProperty and instead applied to OptionsFlyoutProperty (or renamed/repurposed if intended).

    public static readonly DependencyProperty OptionsAccessibleNameProperty = DependencyProperty.Register(
        nameof(OptionsAccessibleName),
        typeof(string),
        typeof(Ribbon),
        new PropertyMetadata(string.Empty, OnOptionsFlyoutPropertyChanged));

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Avid29]

Looks good to me.

Might suggest reordering the members so the dependency properties are grouped and their corresponding implementation properties are beneath the constructor. Currently we have no official pattern.

[Avid29]

Suggested change

	/// The access key to set on the options flyout button.
	/// Gets or sets the access key to set on the options flyout button.

[Avid29]

Suggested change

	/// The accessible name for the options button.
	/// Gets or sets the accessible name for the options button.

This is the standard comment pattern for a property

[Avid29]

Suggested change

	/// The flyout to display when the user clicks on the ribbon options button.
	/// Gets or sets the flyout to display when the user clicks on the ribbon options button.