Ribbon

[vgromfeld]

What?

Adding the Ribbon control to the toolkit.

See #544 and #545 for more details.

How?

I'm adding the following components to the toolkit:

• Ribbon the ribbon control.
• RibbonGroup an always displayed group container.
• RibbonCollapsibleGroup a group container which can be collapsed based on a priority order if there is not enough space available to fully display the group.
• RibbonPanel a custom panel for the Ribbon to automatically expand or collapse the RibbonCollapsibleGroups
• RibbonStyle.xaml all the custom styles for the Ribbon components.

Usage

<Ribbon>
   <RibbonGroup Label="Selection" />
    <RibbonCollapsibleGroup Label="Edit" Style="{StaticResource RibbonLeftCollapsibleGroupStyle}" Priority="1">
        <!-- group content -->
    </RibbonCollapsibleGroup>
    <RibbonCollapsibleGroup Label="Shapes" Style="{StaticResource RibbonLeftCollapsibleGroupStyle}" Priority="2">
        <!-- group content -->
    </RibbonCollapsibleGroup>
</Ribbon>

Result

[mdtauk]

What would be the performance and usability implications to combining this Ribbon with a SelectorBar control, to give you the same functionality of an Office like Ribbon and switching between ribbon sets?

[vgromfeld]

It should be easy to combine the two. The SelectorBar would provide the "tabs" and the Ribbon the buttons.

[mdtauk]

It should be easy to combine the two. The SelectorBar would provide the "tabs" and the Ribbon the buttons.

So you would use the Selected SelectorBarItem to load in a Ribbon?
The Ribbon itself contains RibbonGroups which contain RibbonCollapsibleGroups

I guess the Collection of Ribbons should be virtualised, so when switching to the Active Ribbon, doesn't keep them loaded? Or should all Ribbons be loaded by this theoretical Control, to enable smooth switching?

I guess this is the performance aspect I am asking about

[Tartarusome]

It should be easy to combine the two. The would provide the "tabs" and the the buttons.SelectorBar``Ribbon

So you would use the Selected SelectorBarItem to load in a Ribbon? The Ribbon itself contains RibbonGroups which contain RibbonCollapsibleGroups

I guess the Collection of Ribbons should be virtualised, so when switching to the Active Ribbon, doesn't keep them loaded? Or should all Ribbons be loaded by this theoretical Control, to enable smooth switching?

I guess this is the performance aspect I am asking about

i suppose no, the CPP file in Windows App Sdk source code dosent have a disppose method，but icon and text block resources should be autumatically disposed by XAML frame. I didnt take a test.
If you want a custom control to be visualized, you should make it inherit from IDisposable besides Control and write the dispose method.

[michael-hawker]

Some build errors:

"D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\CommunityToolkit.WinUI.Controls.Ribbon.csproj" (default target) (17:93) ->
  D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\Ribbon.cs(22,21): error CS0260: Missing partial modifier on declaration of type 'Ribbon'; another partial declaration of this type exists [D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\CommunityToolkit.WinUI.Controls.Ribbon.csproj::TargetFramework=net7.0-android33.0]
  D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\RibbonCollapsibleGroup.cs(19,14): error CS0260: Missing partial modifier on declaration of type 'RibbonCollapsibleGroup'; another partial declaration of this type exists [D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\CommunityToolkit.WinUI.Controls.Ribbon.csproj::TargetFramework=net7.0-android33.0]
  D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\RibbonGroup.cs(12,14): error CS0260: Missing partial modifier on declaration of type 'RibbonGroup'; another partial declaration of this type exists [D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\CommunityToolkit.WinUI.Controls.Ribbon.csproj::TargetFramework=net7.0-android33.0]
  D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\RibbonPanel.cs(11,23): error CS0260: Missing partial modifier on declaration of type 'RibbonPanel'; another partial declaration of this type exists [D:\a\Labs-Windows\Labs-Windows\components\Ribbon\src\CommunityToolkit.WinUI.Controls.Ribbon.csproj::TargetFramework=net7.0-android33.0]

Look similar between UWP/WinUI3, looks like something going on with Uno. I think Uno requires all UI classes to be partial for the generators to work, so probably just that?

[michael-hawker]

Few comments, nothing too critical I don't think, but some suggestions/questions.

[michael-hawker]

@Arlodotexe know what might be going on here, this seems weird as we haven't seen this with other controls?

[Arlodotexe]

The Generic.xaml file is present and working for the src project, but the Generic.xaml file isn't present in the samples project. It needs to be added.

[Arlodotexe]

Tried to implement these changes myself, didn't seem to help 🤔
No other component is using a Generic.xaml file in the sample project, it seems like something else is happening here. Investigating...

[Arlodotexe]

Interesting, all the existing xaml files (resource dictionaries, controls, etc) are backed by a cs file, except for this new one. We might be auto-importing backed xaml/cs files somewhere in our tooling, but not the xaml files alone. Still investigating.

[michael-hawker]

Let's see how it works in a package and we can do a separate fix, if needed. Going to squash and merge this one.

[0x5bfa]

• As a reminder, it might be also better to have a small ‘Expand’ button onto the bottom right of the label as Office apps have.