Ribbon

[vgromfeld]

What?

Adding the Ribbon control to the toolkit.

See https://github.com/CommunityToolkit/Labs-Windows/discussions/544 and https://github.com/CommunityToolkit/Labs-Windows/issues/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?

[Tartarusome]

May I ask how you made the reveal highlight effect? I checked RibbonStyle.xaml, but I found nothing.

[vgromfeld]

@Tartarusome The reveal effect is on the GridViewItems from the GridView used in the "Advanced" group in the sample. Since there is no custom style on those GridViewItem, they are picking the system default style.

Note that the reveal effect is no longer part of Windows 11 style.

[Tartarusome]

@Tartarusome The reveal effect is on the GridViewItems from the GridView used in the "Advanced" group in the sample. Since there is no custom style on those GridViewItem, they are picking the system default style.

Note that the reveal effect is no longer part of Windows 11 style.

But I truely found this animation in the gallery app on windows11 24h2. How didn't it fallback to default style?