From 8e116adc1f9db2fb7d133ff9c2f5603588f63b79 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Tue, 21 May 2024 17:12:25 +0200
Subject: [PATCH 1/8] Add ribbon control

---
 components/Ribbon/OpenSolution.bat            |   3 +
 components/Ribbon/samples/Assets/Ribbon.png   | Bin 0 -> 2216 bytes
 components/Ribbon/samples/Dependencies.props  |  31 ++
 .../Ribbon/samples/Ribbon.Samples.csproj      |  18 +
 components/Ribbon/samples/Ribbon.md           |  74 ++++
 .../Ribbon/samples/RibbonCustomSample.xaml    | 241 +++++++++++
 .../Ribbon/samples/RibbonCustomSample.xaml.cs |  16 +
 ...munityToolkit.WinUI.Controls.Ribbon.csproj |  17 +
 components/Ribbon/src/Dependencies.props      |  31 ++
 components/Ribbon/src/DoubleList.cs           |  44 ++
 components/Ribbon/src/MultiTarget.props       |   9 +
 components/Ribbon/src/Ribbon.cs               | 201 +++++++++
 .../Ribbon/src/RibbonCollapsibleGroup.cs      | 273 ++++++++++++
 components/Ribbon/src/RibbonGroup.cs          |  51 +++
 components/Ribbon/src/RibbonPanel.cs          | 136 ++++++
 components/Ribbon/src/RibbonStyle.xaml        | 406 ++++++++++++++++++
 components/Ribbon/src/Themes/Generic.xaml     |   8 +
 .../Ribbon/tests/Ribbon.Tests.projitems       |  23 +
 components/Ribbon/tests/Ribbon.Tests.shproj   |  13 +
 components/Ribbon/tests/RibbonTestClass.cs    |  43 ++
 components/Ribbon/tests/RibbonTestPage.xaml   |  15 +
 .../Ribbon/tests/RibbonTestPage.xaml.cs       |  10 +
 tooling                                       |   2 +-
 23 files changed, 1664 insertions(+), 1 deletion(-)
 create mode 100644 components/Ribbon/OpenSolution.bat
 create mode 100644 components/Ribbon/samples/Assets/Ribbon.png
 create mode 100644 components/Ribbon/samples/Dependencies.props
 create mode 100644 components/Ribbon/samples/Ribbon.Samples.csproj
 create mode 100644 components/Ribbon/samples/Ribbon.md
 create mode 100644 components/Ribbon/samples/RibbonCustomSample.xaml
 create mode 100644 components/Ribbon/samples/RibbonCustomSample.xaml.cs
 create mode 100644 components/Ribbon/src/CommunityToolkit.WinUI.Controls.Ribbon.csproj
 create mode 100644 components/Ribbon/src/Dependencies.props
 create mode 100644 components/Ribbon/src/DoubleList.cs
 create mode 100644 components/Ribbon/src/MultiTarget.props
 create mode 100644 components/Ribbon/src/Ribbon.cs
 create mode 100644 components/Ribbon/src/RibbonCollapsibleGroup.cs
 create mode 100644 components/Ribbon/src/RibbonGroup.cs
 create mode 100644 components/Ribbon/src/RibbonPanel.cs
 create mode 100644 components/Ribbon/src/RibbonStyle.xaml
 create mode 100644 components/Ribbon/src/Themes/Generic.xaml
 create mode 100644 components/Ribbon/tests/Ribbon.Tests.projitems
 create mode 100644 components/Ribbon/tests/Ribbon.Tests.shproj
 create mode 100644 components/Ribbon/tests/RibbonTestClass.cs
 create mode 100644 components/Ribbon/tests/RibbonTestPage.xaml
 create mode 100644 components/Ribbon/tests/RibbonTestPage.xaml.cs

diff --git a/components/Ribbon/OpenSolution.bat b/components/Ribbon/OpenSolution.bat
new file mode 100644
index 000000000..814a56d4b
--- /dev/null
+++ b/components/Ribbon/OpenSolution.bat
@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*
\ No newline at end of file
diff --git a/components/Ribbon/samples/Assets/Ribbon.png b/components/Ribbon/samples/Assets/Ribbon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8435bcaa9fc371ca8e92db07ae596e0d57c8b9b0
GIT binary patch
literal 2216
zcmV;Z2v_%sP)<h;3K|Lk000e1NJLTq001@s001@!1^@s6j74hQ00009a7bBm000P1
z000P10gN#K>;M1&0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2t7$eK~#7F?OHvH
z7D*7UzFTz{6?gqW1vSx3K@{OK!Ay*dP4*us7hSmAFYqojG&3<314U27%tSQOKur|C
zZr5)Sr>=YKs(Je9p7&Ka&|n*ecc!Pix~iV~>Yi6*wXL?Fq6O}_ef#!O2;q#X&d1-r
zFW&c8*L5NOYWz*lA^xUE>kGNx-uL6v^z@vr)V_TA(vQ#Yoo1$I^Fv;<pxatA()%~w
zo<Dv1^zSIguO!sj`141+W>IKkA`?U*Z6OoBe{XX@DLpL{F3+>RV2oP732rn@P@98F
ziH~#f`tA7f<8t}(<$sLlUkdm_STvOKGYXY{9St3tGiu1>duN9F9aTe*kTXOCkoLYj
zr)5cJP?i}f+kBoB8b~Q1rbJi`730DXGLx}aCV-6tC522QjZs)X03S%#=jXopQNe7G
z@dlToiDb<e!oj=3A3+A8dz>GDSy!a_DD)NYWiV?sGap0Dq-qgnA&~LHECw(NL8T=)
z1ct(ga2;|14nD@qHwmVQ0;2|YUomW^!U#`7l>>&Bh;u)pT<|$jFoqk6%HTc~^RQ@(
z5hZ5X^n7`vt!*nY9@rFRqF{^wF`}&H4I4JdfddC*W@e@$oS$Q04aThBn*gT3)URMp
z>G{o@H*)RTHCb6%8B?H}yjcXcUm9p(<a43my)$?4;6aJPSsp4bpy|(J<CJ`4&6+h~
z=gyts@ZrOS1yT6tbfBY%AsQe|Wga$eZf;KAzke^+uV3eCq0nsCu25QIC0l}?I&~^+
z+_=%^dbI=hO1>K=nWD0vP!PaCP$@(k!31bkrIJ!2)-tl96*+&}@I6!3M8qT~Q2?u8
zcy@MHS+IzlwjvzRGx~+*l>(Gi6$!C8Jgi;2)=XVKe*CB(K745TS`)G2;nuBN9cqsP
zh3?<Kzh6jxP<!y;fnK?CCA@z9T8YPAX-i8>9y5yI0j3rZt%Q;V3i*L;-@bj}#EBDL
zi-O{(`k1i!rOBH%ZPF-Qh^8PnZ{F0;pFa!x1_lMnUFbI&&8<qdtbLn{Tbvk3WN~pZ
z?AfzNwr$&{PoF+Tvz%OcfHM|?rs$X2t5>gFC}WVB;VU)DL&bgeyDBGT1Uw=yFE1xQ
zlXdIXN%Xx|Sv6HKV+J+vFk{k20ni@>s(7s{7```cTQ%Vf8y`xM()#6VjL@l-2UZ)1
zMAlp(2n!()MJZ+A7DT29I(lXL!EfSTF<Xrx8zu?HyH~vT?2qVzFrx_=HE(?&XrWjg
z5;`YfAE(*>x}nSy)d`h{3}%2w00Npq^YO)x9XqDcq0Kb<O61X_M~tv54i%I7Qp7!a
z^r$ltk0`>`t5*xfQqpFjCI=5f3~jf78p^G}no2Fzdc;)IysSSZVr(fukQEprykDy<
zqbZnxBN8(`!7W?1$e}}r1c|2>qh?{>d-v{@?c2BeJQ<2<$;_cXbnDiw*59|?yLU^<
zSA=eeDMyH&Dn;O?U<@moWoql!uTK{z=_+aO*s+8Ar_R9^^Jcn6#~@GNDp>Q(&lq|B
z{JGq_cdrQ3>E_6hBQiff?~J4|4<A14*F}E?GcStaRH~)R+T+KM^~Q}GhOn=7^5n_1
zPAdrcZloy~+I~mp9jU#2`&OPkdsdxOq{NBs#fum6<jE6z?=+y2P+Vizu3ZH>F&T##
ze2Ot?F7i1RStkmn!!cL^bKdFtd(+&zcke<H+Q!A*FFSq}Gz<-^D$-8bcu3D&2O{$d
z37vQz70k^LH6ufUZXK|MR6jNZQLTNIE0P}3yLa#EojZ4`1P*1JN#zNeQj$&-417vk
zQL$wLm{g61lu@g-KWmm{N(F!nWmaKw+K7m%I@!m#`p`1sC@hYp6rRodM+gNc@9OP5
zhx2Mz0L)jWh{{F9jtN#(1*{3wpbSpU=Oo2~B!mL(BD#@Kf<k55cvLPz340o11-!<O
z(0M*&dL2R8b)t=6G-8643!uqa1C!PUKcj**&lQY8^czCQ86*W&D0KB6uBQdT!YzV%
zAOLU&GBJ4AV)(HQL#ZzW<K1^~4k&^@EGP<Pri?<#5Hv=2$*NV7o|>RXgNN#PA!`aD
zjaC7J&2fZoFH{s(d8}#I6o7s`O)w?K`{bKiENsKV!h(MK^r<M84LuIQ9ep&=(hLi&
z6P*Co(KEk!^X7E*ihKF;rA1*+F-nq+mQ+SGb;t5X;+`p;%%*zn|2nA(-|^n>(|LX>
z*~rJxUHVoXzp-XhUqnbQUAiRq@89q5e?*H1Nj(o2FJ5%B>%JZY`Gw<0&+dhGuj!C7
z?u<htz*LD9Oo$^RmrK1LiTHLu-3AWhh>YbkO5XY{KIV*@{VRoX8s`fm<068)Y!=w)
zn?l)IstDTf!(Iu<!z97*<9BtKqV$<m>(8i;vTaeMOuE%Q<fztpNWnZJmG9+y!hMAZ
zyekejbqK?F#8&M9%*+j`t}bBtbPUZ=32^~s1ysN^!HPv2d8aCkcu`UYZ+%qDXr|;Z
zu6?9Khz1ne(3>V$RY7$1cP-aqS07(jX4W{bFHp!#3m}TTAaaF3L~n9Q)s^3xP5nw5
zM&HvBw5z{TbdA3!8Di)wIs`5S;W!fVdWDbiH|P}wlVfDMuB&#@so4j+uC6L7Q#M38
z*q?Pnc_gqfql3rn?qh)V@~B|(<zIkYKt@4OTok`i^<&a+K7RIG1zIjXKq%#>78+7U
zKOCcocD&A`ELB-^?%cVvanNF%vtSH&^_LVuBqdkprWDoUyaLCf$s5zvc?rH#NGXk=
qmFA_t_5FR}!i7I&wXL?Ful)xU?DJJ%Hwu*i0000<MNUMnLSTZ;uMdR)

literal 0
HcmV?d00001

diff --git a/components/Ribbon/samples/Dependencies.props b/components/Ribbon/samples/Dependencies.props
new file mode 100644
index 000000000..e622e1df4
--- /dev/null
+++ b/components/Ribbon/samples/Dependencies.props
@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+    
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+    
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>
diff --git a/components/Ribbon/samples/Ribbon.Samples.csproj b/components/Ribbon/samples/Ribbon.Samples.csproj
new file mode 100644
index 000000000..082bdb735
--- /dev/null
+++ b/components/Ribbon/samples/Ribbon.Samples.csproj
@@ -0,0 +1,18 @@
+<Project>
+  <Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
+  
+  <PropertyGroup>
+    <ToolkitComponentName>Ribbon</ToolkitComponentName>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+  <ItemGroup>
+    <None Remove="Assets\Ribbon.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Assets\Ribbon.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+</Project>
diff --git a/components/Ribbon/samples/Ribbon.md b/components/Ribbon/samples/Ribbon.md
new file mode 100644
index 000000000..7b90d0f0e
--- /dev/null
+++ b/components/Ribbon/samples/Ribbon.md
@@ -0,0 +1,74 @@
+---
+title: Ribbon
+author: vgromfeld
+description: An office like ribbon.
+keywords: Ribbon, Control
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+experimental: true
+discussion-id: 0
+issue-id: 0
+icon: Assets/Ribbon.png
+---
+
+<!-- Be sure to update the discussion/issue numbers above with your Labs discussion/issue id numbers in order for UI links to them from the sample app to work. -->
+
+# Ribbon
+
+An Office like Ribbon control which displays groups of commands. If there is not enough space to display all the groups,
+some of them can be collapsed based on a priority order.
+
+> [!Sample RibbonCustomSample]
+
+## RibbonGroup
+
+A basic group displayed in a Ribbon.
+It mostly adds a *label* to some content and will not collapse if there is not enough space available.
+
+### Label
+The label of the group.
+
+### Content
+The content of the group.
+
+## RibbonCollapsibleGroup
+
+A `RibbonGroup` which can be collapsed if its content does not fit in the available Ribbon's space.
+When collapsed, the group is displayed as a single icon button. Clicking on this button opens
+a flyout containing the group's content.
+
+### IconSource
+The icon to display when the group is collapsed.
+
+### AutoCloseflyout
+Set to true to automatically close the overflow flyout if one interactive element is clicked.
+Note that the logic to detect the click is very basic. It will request the flyout to close
+for all the handled pointer released events. It assumes that if the pointer has been handled
+something reacted to it. It works well for buttons or check boxes but does not work for text
+or combo boxes.
+
+### Priority
+The priority of the group.
+The group with the lower priority will be the first one to be collapsed.
+
+### CollapsedAccessKey
+The access key to access the collapsed button and open the flyout when the group is collapsed.
+
+### RequestedWidths
+
+The list of requested widths for the group.
+If null or empty, the group will automatically use the size of its content.
+If set, the group will use the smallest provided width fitting in the ribbon.
+This is useful if the group contains a variable size control which can adjust
+its width (like a GridView with several items).
+
+### State
+The state of the group (collapsed or visible). This property is used by the `RibbonPanel`.
+
+## RibbonPanel
+
+The inner panel of the Ribbon control. It displays the groups inside the `Ribbon` and
+automatically collapse the `CollapsibleGroup` elements based on their priority order if
+there is not enough space available.
diff --git a/components/Ribbon/samples/RibbonCustomSample.xaml b/components/Ribbon/samples/RibbonCustomSample.xaml
new file mode 100644
index 000000000..44acc0ae8
--- /dev/null
+++ b/components/Ribbon/samples/RibbonCustomSample.xaml
@@ -0,0 +1,241 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page
+    x:Class="RibbonExperiment.Samples.RibbonCustomSample"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:RibbonExperiment.Samples"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <StackPanel.Resources>
+            <Style BasedOn="{StaticResource DefaultAppBarButtonStyle}" TargetType="AppBarButton">
+                <Setter Property="LabelPosition" Value="Collapsed" />
+                <Setter Property="Width" Value="48" />
+                <Setter Property="Margin" Value="8" />
+                <Setter Property="Height" Value="48" />
+            </Style>
+        </StackPanel.Resources>
+
+        <controls:Ribbon HorizontalAlignment="Stretch">
+
+            <controls:RibbonCollapsibleGroup
+                AccessKey="AB"
+                CollapsedAccessKey="AA"
+                Label="Edit"
+                Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
+                <controls:RibbonCollapsibleGroup.IconSource>
+                    <SymbolIconSource Symbol="Add" />
+                </controls:RibbonCollapsibleGroup.IconSource>
+
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <AppBarButton Icon="Accept" />
+                    <AppBarButton Grid.Column="1" Icon="Account" />
+
+                    <AppBarButton Grid.Row="1" Icon="Add" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Icon="AddFriend" />
+                    <AppBarButton
+                        Grid.RowSpan="2"
+                        Grid.Column="2"
+                        Icon="Admin" />
+                </Grid>
+            </controls:RibbonCollapsibleGroup>
+
+            <controls:RibbonCollapsibleGroup
+                CollapsedAccessKey="B"
+                Label="Text"
+                Priority="1"
+                Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
+                <controls:RibbonCollapsibleGroup.IconSource>
+                    <SymbolIconSource Symbol="Remove" />
+                </controls:RibbonCollapsibleGroup.IconSource>
+
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <AppBarButton Icon="AllApps" />
+                    <AppBarButton Grid.Column="1" Icon="Attach" />
+                    <DropDownButton Grid.Column="2" Content="Color">
+                        <DropDownButton.Flyout>
+                            <Flyout>
+                                <Border
+                                    Width="200"
+                                    Height="200"
+                                    Background="Red" />
+                            </Flyout>
+                        </DropDownButton.Flyout>
+                    </DropDownButton>
+
+                    <AppBarButton Grid.Row="1" Icon="GoToStart" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Icon="GlobalNavigationButton" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="2"
+                        Icon="ClosePane" />
+                </Grid>
+            </controls:RibbonCollapsibleGroup>
+
+            <controls:RibbonGroup Label="Color">
+                <Button Content="Pick color" />
+            </controls:RibbonGroup>
+
+            <controls:RibbonCollapsibleGroup CollapsedAccessKey="C" Label="Text">
+                <controls:RibbonCollapsibleGroup.IconSource>
+                    <SymbolIconSource Symbol="Font" />
+                </controls:RibbonCollapsibleGroup.IconSource>
+
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <AppBarButton
+                        Grid.RowSpan="2"
+                        VerticalAlignment="Center"
+                        Icon="Font" />
+                    <AppBarButton Grid.Column="1" Icon="AlignLeft" />
+                    <AppBarButton Grid.Column="2" Icon="AlignCenter" />
+                    <AppBarButton Grid.Column="3" Icon="AlignRight" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Icon="FontIncrease" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="2"
+                        Icon="FontDecrease" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="3"
+                        Icon="FontColor" />
+                </Grid>
+            </controls:RibbonCollapsibleGroup>
+
+            <controls:RibbonCollapsibleGroup
+                CollapsedAccessKey="G"
+                Label="Advanved"
+                Priority="5"
+                RequestedWidths="400,200,300">
+                <controls:RibbonCollapsibleGroup.IconSource>
+                    <SymbolIconSource Symbol="AllApps" />
+                </controls:RibbonCollapsibleGroup.IconSource>
+                <GridView
+                    MinHeight="72"
+                    MaxWidth="400"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1">
+                    <GridView.ItemTemplate>
+                        <DataTemplate>
+                            <TextBlock
+                                Width="24"
+                                Height="24"
+                                HorizontalTextAlignment="Center"
+                                Text="{Binding}" />
+                        </DataTemplate>
+                    </GridView.ItemTemplate>
+                    <GridView.Items>
+                        <x:Double>1</x:Double>
+                        <x:Double>2</x:Double>
+                        <x:Double>3</x:Double>
+                        <x:Double>4</x:Double>
+                        <x:Double>5</x:Double>
+                        <x:Double>6</x:Double>
+                        <x:Double>7</x:Double>
+                        <x:Double>8</x:Double>
+                        <x:Double>9</x:Double>
+                        <x:Double>10</x:Double>
+                        <x:Double>11</x:Double>
+                        <x:Double>12</x:Double>
+                        <x:Double>13</x:Double>
+                        <x:Double>14</x:Double>
+                    </GridView.Items>
+                </GridView>
+            </controls:RibbonCollapsibleGroup>
+
+            <controls:RibbonCollapsibleGroup
+                CollapsedAccessKey="E"
+                Label="Commands"
+                Priority="2"
+                Style="{StaticResource RibbonRightCollapsibleGroupStyle}">
+                <controls:RibbonCollapsibleGroup.IconSource>
+                    <SymbolIconSource Symbol="Library" />
+                </controls:RibbonCollapsibleGroup.IconSource>
+
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <AppBarButton Icon="Accept" />
+                    <AppBarButton Grid.Column="1" Icon="Favorite" />
+                    <AppBarButton Grid.Column="2" Icon="Filter" />
+                    <AppBarButton Grid.Column="3" Icon="Find" />
+                    <AppBarButton Grid.Column="4" Icon="Flag" />
+
+                    <AppBarButton Grid.Row="1" Icon="Folder" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Icon="Font" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="2"
+                        Icon="FontColor" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="3"
+                        Icon="FontDecrease" />
+                    <AppBarButton
+                        Grid.Row="1"
+                        Grid.Column="4"
+                        Icon="FontIncrease" />
+                </Grid>
+            </controls:RibbonCollapsibleGroup>
+
+            <controls:RibbonGroup Label="Options" Style="{StaticResource RibbonRightGroupStyle}">
+                <AppBarButton Icon="Setting" />
+            </controls:RibbonGroup>
+        </controls:Ribbon>
+    </StackPanel>
+</Page>
diff --git a/components/Ribbon/samples/RibbonCustomSample.xaml.cs b/components/Ribbon/samples/RibbonCustomSample.xaml.cs
new file mode 100644
index 000000000..05c63b61c
--- /dev/null
+++ b/components/Ribbon/samples/RibbonCustomSample.xaml.cs
@@ -0,0 +1,16 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace RibbonExperiment.Samples;
+
+/// <summary>
+/// An example of the <see cref="Ribbon"/> control.
+/// </summary>
+[ToolkitSample(id: nameof(RibbonCustomSample), "Ribbon control sample", description: $"A sample for showing how to create and use a {nameof(Ribbon)} custom control.")]
+public sealed partial class RibbonCustomSample : Page
+{
+    public RibbonCustomSample() => InitializeComponent();
+}
diff --git a/components/Ribbon/src/CommunityToolkit.WinUI.Controls.Ribbon.csproj b/components/Ribbon/src/CommunityToolkit.WinUI.Controls.Ribbon.csproj
new file mode 100644
index 000000000..894e3e5ab
--- /dev/null
+++ b/components/Ribbon/src/CommunityToolkit.WinUI.Controls.Ribbon.csproj
@@ -0,0 +1,17 @@
+<Project>
+  <Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
+  
+  <PropertyGroup>
+    <ToolkitComponentName>Ribbon</ToolkitComponentName>
+    <Description>This package contains Ribbon.</Description>
+
+    <!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
+    <RootNamespace>CommunityToolkit.WinUI.Controls.RibbonRns</RootNamespace>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's source project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
+  <ItemGroup>
+    <UpToDateCheckInput Remove="RibbonStyle.xaml" />
+  </ItemGroup>
+</Project>
diff --git a/components/Ribbon/src/Dependencies.props b/components/Ribbon/src/Dependencies.props
new file mode 100644
index 000000000..e622e1df4
--- /dev/null
+++ b/components/Ribbon/src/Dependencies.props
@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+    
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+    
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>
diff --git a/components/Ribbon/src/DoubleList.cs b/components/Ribbon/src/DoubleList.cs
new file mode 100644
index 000000000..182ca3eeb
--- /dev/null
+++ b/components/Ribbon/src/DoubleList.cs
@@ -0,0 +1,44 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.Foundation.Metadata;
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// A list of <see cref="double"/> values.
+/// </summary>
+[CreateFromString(MethodName = "CommunityToolkit.WinUI.Controls.DoubleList.CreateFromString")]
+public class DoubleList : List<double>
+{
+    /// <summary>
+    /// Initializes a new instance of <see cref="DoubleList"/> that is empty and has the default
+    /// initial capacity.
+    /// </summary>
+    public DoubleList()
+    {
+    }
+
+    /// <summary>
+    /// Initializes a new instance of <see cref="DoubleList"/> that contains elements copied from
+    /// the specified collection and has sufficient capacity to accommodate the number of elements
+    /// copied.
+    /// </summary>
+    /// <param name="values">The collection whose elements are copied to the new list.</param>
+    public DoubleList(IEnumerable<double> values)
+        : base(values)
+    {
+    }
+
+    /// <summary>
+    /// Create a <see cref="DoubleList"/> from the <paramref name="value"/> string.
+    /// </summary>
+    /// <param name="value">The list of doubles separated by ','.</param>
+    /// <returns>A <see cref="DoubleList"/> instance with the content of <paramref name="value"/>.</returns>
+    public static DoubleList CreateFromString(string value)
+    {
+        var list = value.Split(',', StringSplitOptions.RemoveEmptyEntries).Select(double.Parse);
+        return new DoubleList(list);
+    }
+}
diff --git a/components/Ribbon/src/MultiTarget.props b/components/Ribbon/src/MultiTarget.props
new file mode 100644
index 000000000..b11c19426
--- /dev/null
+++ b/components/Ribbon/src/MultiTarget.props
@@ -0,0 +1,9 @@
+<Project>
+    <PropertyGroup>
+        <!--
+          MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
+          Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
+        -->
+        <MultiTarget>uwp;wasdk;wpf;wasm;linuxgtk;macos;ios;android;</MultiTarget>
+    </PropertyGroup>
+</Project>
\ No newline at end of file
diff --git a/components/Ribbon/src/Ribbon.cs b/components/Ribbon/src/Ribbon.cs
new file mode 100644
index 000000000..f480c7aa3
--- /dev/null
+++ b/components/Ribbon/src/Ribbon.cs
@@ -0,0 +1,201 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Collections.Specialized;
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// An Office like Ribbon control which displays groups of commands. If there is not enough space to display all the groups,
+/// some of them can be collapsed based on a priority order.
+/// </summary>
+[ContentProperty(Name = nameof(Items))]
+[TemplatePart(Name = PanelTemplatePart, Type = typeof(Panel))]
+[TemplatePart(Name = ScrollViewerTemplatePart, Type = typeof(ScrollViewer))]
+[TemplatePart(Name = ScrollDecrementButtonTempatePart, Type = typeof(ButtonBase))]
+[TemplatePart(Name = ScrollIncrementButtonTempatePart, Type = typeof(ButtonBase))]
+[TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = NoButtonsStateTemplatePart)]
+[TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = DecrementButtonStateTemplatePart)]
+[TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = IncrementButtonStateTemplatePart)]
+[TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = BothButtonsStateTemplatePart)]
+public sealed class Ribbon : Control
+{
+    private const string PanelTemplatePart = "Panel";
+    private const string ScrollViewerTemplatePart = "ScrollViewer";
+    private const string ScrollDecrementButtonTempatePart = "ScrollDecrementButton";
+    private const string ScrollIncrementButtonTempatePart = "ScrollIncrementButton";
+    private const string ScrollButtonGroupNameTemplatePart = "ScrollButtonGroup";
+    private const string NoButtonsStateTemplatePart = "NoButtons";
+    private const string DecrementButtonStateTemplatePart = "DecrementButton";
+    private const string IncrementButtonStateTemplatePart = "IncrementButton";
+    private const string BothButtonsStateTemplatePart = "BothButtons";
+
+    private Panel? _panel;
+    private ScrollViewer? _scrollViewer;
+    private ButtonBase? _decrementButton;
+    private ButtonBase? _incrementButton;
+    private readonly ObservableCollection<UIElement> _items;
+
+    /// <summary>
+    /// The DP to store the <see cref="ScrollStep"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty ScrollStepProperty = DependencyProperty.Register(
+        nameof(ScrollStep),
+        typeof(double),
+        typeof(Ribbon),
+        new PropertyMetadata(20.0));
+
+    /// <summary>
+    /// 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()
+    {
+        DefaultStyleKey = typeof(Ribbon);
+
+        _items = [];
+        _items.CollectionChanged += OnItemsCollectionChanged;
+    }
+
+    public ICollection<UIElement> Items => _items;
+
+    protected override void OnApplyTemplate()
+    {
+        _panel = GetTemplateChild(PanelTemplatePart) as Panel;
+        if (_panel is not null)
+        {
+            foreach (var item in _items)
+            {
+                _panel.Children.Add(item);
+            }
+
+            _panel.SizeChanged += OnSizeChanged;
+        }
+
+        _decrementButton = GetTemplateChild(ScrollDecrementButtonTempatePart) as ButtonBase;
+        if (_decrementButton is not null)
+        {
+            _decrementButton.Click += OnDecrementScrollViewer;
+        }
+
+        _incrementButton = GetTemplateChild(ScrollIncrementButtonTempatePart) as ButtonBase;
+        if (_incrementButton is not null)
+        {
+            _incrementButton.Click += OnIncrementScrollViewer;
+        }
+
+        _scrollViewer = GetTemplateChild(ScrollViewerTemplatePart) as ScrollViewer;
+        if (_scrollViewer is not null)
+        {
+            _scrollViewer.ViewChanged += OnViewChanged;
+            _scrollViewer.SizeChanged += OnSizeChanged;
+            UpdateScrollButtonsState();
+        }
+    }
+
+    private void OnItemsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+    {
+        if (_panel is null)
+        {
+            return;
+        }
+
+        switch (e.Action)
+        {
+            case NotifyCollectionChangedAction.Add:
+                if (e.NewItems is not null)
+                {
+                    for (var i = 0; i < e.NewItems.Count; i++)
+                    {
+                        var element = (UIElement?)e.NewItems[i] ?? throw new ArgumentException("Item must not be null");
+                        _panel.Children.Insert(e.NewStartingIndex + i, element);
+                    }
+                }
+                break;
+            case NotifyCollectionChangedAction.Remove:
+                if (e.OldItems is not null)
+                {
+                    for (var i = 0; i < e.OldItems.Count; i++)
+                    {
+                        var element = (UIElement?)e.OldItems[i] ?? throw new ArgumentException("Item must not be null");
+                        _panel.Children.Insert(e.OldStartingIndex, element);
+                    }
+                }
+                break;
+            case NotifyCollectionChangedAction.Replace:
+                if (e.NewItems is not null)
+                {
+                    for (var i = 0; i < e.NewItems.Count; i++)
+                    {
+                        var element = (UIElement?)e.NewItems[i] ?? throw new ArgumentException("Item must not be null");
+                        _panel.Children[e.NewStartingIndex + i] = element;
+                    }
+                }
+                break;
+            case NotifyCollectionChangedAction.Move:
+                _panel.Children.Move((uint)e.OldStartingIndex, (uint)e.NewStartingIndex);
+                break;
+            case NotifyCollectionChangedAction.Reset:
+                _panel.Children.Clear();
+                if (e.NewItems is not null)
+                {
+                    foreach (var newItem in e.NewItems)
+                    {
+                        _panel.Children.Add((UIElement)newItem);
+                    }
+                }
+                break;
+            default:
+                throw new ArgumentException("Invalid value for NotifyCollectionChangedAction");
+        }
+    }
+
+    private void OnViewChanged(object? sender, ScrollViewerViewChangedEventArgs e) => UpdateScrollButtonsState();
+
+    private void OnSizeChanged(object? sender, SizeChangedEventArgs e) => UpdateScrollButtonsState();
+
+    private void UpdateScrollButtonsState()
+    {
+        if (_scrollViewer is null)
+        {
+            return;
+        }
+
+        if (_scrollViewer.ExtentWidth <= _scrollViewer.ViewportWidth)
+        {
+            VisualStateManager.GoToState(this, NoButtonsStateTemplatePart, useTransitions: true);
+            return;
+        }
+
+        var showDecrement = _scrollViewer.HorizontalOffset >= 1;
+        var showIncrement = _scrollViewer.ExtentWidth - _scrollViewer.HorizontalOffset - _scrollViewer.ViewportWidth >= 1;
+        if (showDecrement && showIncrement)
+        {
+            VisualStateManager.GoToState(this, BothButtonsStateTemplatePart, useTransitions: true);
+        }
+        else if (showDecrement)
+        {
+            VisualStateManager.GoToState(this, DecrementButtonStateTemplatePart, useTransitions: true);
+        }
+        else if (showIncrement)
+        {
+            VisualStateManager.GoToState(this, IncrementButtonStateTemplatePart, useTransitions: true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, NoButtonsStateTemplatePart, useTransitions: true);
+        }
+    }
+
+    private void OnDecrementScrollViewer(object sender, RoutedEventArgs e)
+        => _scrollViewer?.ChangeView(_scrollViewer.HorizontalOffset - ScrollStep, verticalOffset: null, zoomFactor: null);
+
+    private void OnIncrementScrollViewer(object sender, RoutedEventArgs e)
+        => _scrollViewer?.ChangeView(_scrollViewer.HorizontalOffset + ScrollStep, verticalOffset: null, zoomFactor: null);
+}
diff --git a/components/Ribbon/src/RibbonCollapsibleGroup.cs b/components/Ribbon/src/RibbonCollapsibleGroup.cs
new file mode 100644
index 000000000..0f4401efb
--- /dev/null
+++ b/components/Ribbon/src/RibbonCollapsibleGroup.cs
@@ -0,0 +1,273 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.System;
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// A group which can be collapsed if its content does not fit in the <see cref="Ribbon"/>'s available space.
+/// If the content does not fit, the group will display a single button. Clicking on this button will open
+/// a flyout containing the group's content.
+/// </summary>
+[ContentProperty(Name = nameof(Content))]
+[TemplatePart(Name = VisibleContentContainerTemplatePart, Type = typeof(ContentPresenter))]
+[TemplatePart(Name = CollapsedButtonTemplatePart, Type = typeof(Button))]
+[TemplatePart(Name = CollapsedFlyoutTemplatePart, Type = typeof(Flyout))]
+[TemplatePart(Name = CollapsedContentPresenterTemplatePart, Type = typeof(ContentPresenter))]
+public class RibbonCollapsibleGroup : RibbonGroup
+{
+    private const string VisibleContentContainerTemplatePart = "VisibleContentContainer";
+    private const string CollapsedButtonTemplatePart = "CollapsedButton";
+    private const string CollapsedFlyoutTemplatePart = "CollapsedFlyout";
+    private const string CollapsedContentPresenterTemplatePart = "CollapsedContentPresenter";
+
+    /// <summary>
+    /// The DP to store the <see cref="IconSource"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty IconSourceProperty = DependencyProperty.Register(
+        nameof(IconSource),
+        typeof(IconSource),
+        typeof(RibbonCollapsibleGroup),
+        new PropertyMetadata(null));
+
+    /// <summary>
+    /// The group icon. It will only be displayed when the group is in the collapsed state.
+    /// </summary>
+    public IconSource IconSource
+    {
+        get => (IconSource)GetValue(IconSourceProperty);
+        set => SetValue(IconSourceProperty, value);
+    }
+
+    /// <summary>
+    /// The DP to store the <see cref="State"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty StateProperty = DependencyProperty.Register(
+        nameof(State),
+        typeof(Visibility),
+        typeof(RibbonCollapsibleGroup),
+        new PropertyMetadata(Visibility.Visible, OnStatePropertyChanged));
+
+    /// <summary>
+    /// The state of the group.
+    /// </summary>
+    public Visibility State
+    {
+        get => (Visibility)GetValue(StateProperty);
+        set => SetValue(StateProperty, value);
+    }
+
+    /// <summary>
+    /// The DP to store the <see cref="AutoCloseFlyout"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty AutoCloseFlyoutProperty = DependencyProperty.Register(
+        nameof(AutoCloseFlyout),
+        typeof(bool),
+        typeof(RibbonCollapsibleGroup),
+        new PropertyMetadata(true));
+
+    /// <summary>
+    /// True to automatically close the overflow flyout if one interactive element is clicked.
+    /// Note that the logic to detect the click is very basic. It will request the flyout to close
+    /// for all the handled pointer released events. It assumes that if the pointer has been handled
+    /// something reacted to it. It works well for buttons or check boxes but does not work for text
+    /// or combo boxes.
+    /// </summary>
+    public bool AutoCloseFlyout
+    {
+        get => (bool)GetValue(AutoCloseFlyoutProperty);
+        set => SetValue(AutoCloseFlyoutProperty, value);
+    }
+
+    /// <summary>
+    /// The DP to store the <see cref="Priority"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty PriorityProperty = DependencyProperty.Register(
+        nameof(Priority),
+        typeof(int),
+        typeof(RibbonCollapsibleGroup),
+        new PropertyMetadata(0));
+
+    /// <summary>
+    /// The priority of the group.
+    /// The group with the lower priority will be the first one to be collapsed.
+    /// </summary>
+    public int Priority
+    {
+        get => (int)GetValue(PriorityProperty);
+        set => SetValue(PriorityProperty, value);
+    }
+
+
+    /// <summary>
+    /// The DP to store the <see cref="CollapsedAccessKey"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty CollapsedAccessKeyProperty = DependencyProperty.Register(
+        nameof(CollapsedAccessKey),
+        typeof(string),
+        typeof(RibbonCollapsibleGroup),
+        new PropertyMetadata(string.Empty));
+
+    /// <summary>
+    /// The access key to access the collapsed button and open the flyout.
+    /// </summary>
+    public string CollapsedAccessKey
+    {
+        get => (string)GetValue(CollapsedAccessKeyProperty);
+        set => SetValue(CollapsedAccessKeyProperty, value);
+    }
+
+
+    /// <summary>
+    /// The DP to store the <see cref="RequestedWidths"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty RequestedWidthsProperty = DependencyProperty.Register(
+        nameof(RequestedWidths),
+        typeof(DoubleList),
+        typeof(RibbonCollapsibleGroup),
+        new PropertyMetadata(null, OnRequestedWidthChanged));
+
+    private static void OnRequestedWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (e.NewValue != null)
+        {
+            ((DoubleList)e.NewValue).Sort();
+        }
+    }
+
+    /// <summary>
+    /// The list of requested widths for the group.
+    /// If null or empty, the group will automatically use the size of its content.
+    /// If set, the group will use the smallest provided width fitting in the ribbon.
+    /// This is useful if the group contains a variable size control which can adjust
+    /// its width (like a GridView with several items).
+    /// </summary>
+    public DoubleList RequestedWidths
+    {
+        get => (DoubleList)GetValue(RequestedWidthsProperty);
+        set => SetValue(RequestedWidthsProperty, value);
+    }
+
+    private ContentControl? _visibleContentContainer;
+    private ContentControl? _collapsedContentContainer;
+    private Button? _collapsedButton;
+    private Flyout? _collapsedFlyout;
+
+    public RibbonCollapsibleGroup()
+        => DefaultStyleKey = typeof(RibbonCollapsibleGroup);
+
+    protected override void OnApplyTemplate()
+    {
+        if (_collapsedFlyout is not null)
+        {
+            _collapsedFlyout.Opened -= OnFlyoutOpened;
+        }
+
+        if (_collapsedContentContainer is not null)
+        {
+            _collapsedContentContainer.RemoveHandler(PointerReleasedEvent, new PointerEventHandler(OnFlyoutPointerReleased));
+            _collapsedContentContainer.RemoveHandler(KeyUpEvent, new KeyEventHandler(OnFlyoutKeyUp));
+        }
+
+        _visibleContentContainer = GetOrThrow<ContentControl>(VisibleContentContainerTemplatePart);
+        _collapsedContentContainer = GetOrThrow<ContentControl>(CollapsedContentPresenterTemplatePart);
+        _collapsedButton = GetOrThrow<Button>(CollapsedButtonTemplatePart);
+        _collapsedFlyout = GetOrThrow<Flyout>(CollapsedFlyoutTemplatePart);
+
+        _collapsedFlyout.Opened += OnFlyoutOpened;
+        _collapsedContentContainer.AddHandler(PointerReleasedEvent, new PointerEventHandler(OnFlyoutPointerReleased), handledEventsToo: true);
+        _collapsedContentContainer.AddHandler(KeyUpEvent, new KeyEventHandler(OnFlyoutKeyUp), handledEventsToo: true);
+
+        UpdateState();
+    }
+
+    private T GetOrThrow<T>(string templatePart) where T : class
+        => GetTemplateChild(templatePart) is T element
+            ? element
+            : throw new ArgumentException($"{templatePart} missing or not of the expected type: {typeof(T).Name}");
+
+    private void OnFlyoutOpened(object? sender, object e)
+        => _collapsedContentContainer?.Focus(FocusState.Programmatic);
+
+    private void OnFlyoutPointerReleased(object sender, PointerRoutedEventArgs e)
+        => AutoCollapseFlyout(e.Handled, e.OriginalSource);
+
+    private void OnFlyoutKeyUp(object sender, KeyRoutedEventArgs e)
+    {
+        if (e.Key != VirtualKey.Enter && e.Key != VirtualKey.Space)
+        {
+            return;
+        }
+
+        AutoCollapseFlyout(e.Handled, e.OriginalSource);
+    }
+
+    private void AutoCollapseFlyout(bool eventHasBeenHandled, object originalSource)
+    {
+        // We only consider events which have been processed since it usually means
+        // that a control has processed the event and that the click is not in an
+        // empty/non-interactive area.
+        if (eventHasBeenHandled && AutoCloseFlyout && _collapsedFlyout!.IsOpen && !DoesRoutedEventOriginateFromAFlyoutHost(originalSource as UIElement))
+        {
+            _collapsedFlyout.Hide();
+        }
+    }
+
+    private bool DoesRoutedEventOriginateFromAFlyoutHost(UIElement? source)
+    {
+        while (source != null && source != _collapsedContentContainer)
+        {
+            // TODO: handle MUX variants in UWP
+            if (source is DropDownButton ||
+                source is ComboBox ||
+                source is ComboBoxItem ||
+                (source is Button buttonSource && buttonSource.Flyout != null) ||
+                (source is FrameworkElement frameworkSource && FlyoutBase.GetAttachedFlyout(frameworkSource) != null))
+            {
+                return true;
+            }
+
+            source = VisualTreeHelper.GetParent(source) as UIElement;
+        }
+
+        return false;
+    }
+
+    private static void OnStatePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var group = (RibbonCollapsibleGroup)d;
+        group.UpdateState();
+    }
+
+    private void UpdateState()
+    {
+        if (_visibleContentContainer is null)
+        {
+            // Template is not ready yet.
+            return;
+        }
+
+        switch (State)
+        {
+            case Visibility.Visible:
+                _collapsedFlyout!.Hide();
+                _collapsedContentContainer!.Content = null;
+                _visibleContentContainer.Content = Content;
+
+                _collapsedButton!.Visibility = Visibility.Collapsed;
+                _visibleContentContainer.Visibility = Visibility.Visible;
+                break;
+            case Visibility.Collapsed:
+                _visibleContentContainer.Content = null;
+                _collapsedContentContainer!.Content = Content;
+
+                _visibleContentContainer.Visibility = Visibility.Collapsed;
+                _collapsedButton!.Visibility = Visibility.Visible;
+                break;
+            default:
+                throw new ArgumentException("Invalid state");
+        }
+    }
+}
diff --git a/components/Ribbon/src/RibbonGroup.cs b/components/Ribbon/src/RibbonGroup.cs
new file mode 100644
index 000000000..8a0152ef3
--- /dev/null
+++ b/components/Ribbon/src/RibbonGroup.cs
@@ -0,0 +1,51 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// A basic group displayed in a <see cref="Ribbon"/> control.
+/// It adds a <see cref="Label"/> to the wrapped <see cref="Content"/>.
+/// </summary>
+[ContentProperty(Name = nameof(Content))]
+public class RibbonGroup : Control
+{
+    /// <summary>
+    /// The DP to store the <see cref="Content"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(
+        nameof(Content),
+        typeof(UIElement),
+        typeof(RibbonGroup),
+        new PropertyMetadata(null));
+
+    /// <summary>
+    /// The content of the group.
+    /// </summary>
+    public UIElement Content
+    {
+        get => (UIElement)GetValue(ContentProperty);
+        set => SetValue(ContentProperty, value);
+    }
+
+    /// <summary>
+    /// The DP to store the <see cref="Label"/> property value.
+    /// </summary>
+    public static readonly DependencyProperty LabelProperty = DependencyProperty.Register(
+        nameof(Label),
+        typeof(string),
+        typeof(RibbonGroup),
+        new PropertyMetadata(""));
+
+    /// <summary>
+    /// The label of the group.
+    /// </summary>
+    public string Label
+    {
+        get => (string)GetValue(LabelProperty);
+        set => SetValue(LabelProperty, value);
+    }
+
+    public RibbonGroup() => DefaultStyleKey = typeof(RibbonGroup);
+}
diff --git a/components/Ribbon/src/RibbonPanel.cs b/components/Ribbon/src/RibbonPanel.cs
new file mode 100644
index 000000000..2fe225bc3
--- /dev/null
+++ b/components/Ribbon/src/RibbonPanel.cs
@@ -0,0 +1,136 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// A panel which will set the <see cref="RibbonCollapsibleGroup"/> items in a collapsed state if there is not enough space to render them.
+/// It is used by the <see cref="Ribbon"/> control.
+/// </summary>
+internal sealed class RibbonPanel : Panel
+{
+    private static readonly Size GroupAvailableSize = new(double.PositiveInfinity, double.PositiveInfinity);
+
+    protected override Size MeasureOverride(Size availableSize)
+    {
+        // We try to limit the layout changes if the parent scrollviewer is sending values with small changes.
+        availableSize.Width = Math.Floor(availableSize.Width);
+
+        var childrenByPriority = Children.OrderBy(c => c is RibbonCollapsibleGroup collapsibleGroup ? collapsibleGroup.Priority : 0);
+        var desiredSize = new Size();
+        foreach (var child in childrenByPriority)
+        {
+            var collapsibleGroup = child as RibbonCollapsibleGroup;
+            var requestedWidths = collapsibleGroup?.RequestedWidths;
+            if (requestedWidths is null || collapsibleGroup?.State == Visibility.Collapsed)
+            {
+                child.Measure(GroupAvailableSize);
+            }
+            else
+            {
+                // Get the closest match to remainingWidth or use infinite size if we do not have any match.
+                var remainingWidth = availableSize.Width - desiredSize.Width;
+                //var requestedWidth = requestedWidths.LastOrDefault(w => w <= remainingWidth, defaultValue: double.PositiveInfinity);
+                var matchingWidths = requestedWidths.Where(w => w <= remainingWidth);
+                var requestedWidth = matchingWidths.Any() ? matchingWidths.Last() : double.PositiveInfinity;
+                var fixedSize = new Size(requestedWidth, availableSize.Height);
+                child.Measure(fixedSize);
+            }
+
+            desiredSize.Width += child.DesiredSize.Width;
+            desiredSize.Height = Math.Max(desiredSize.Height, child.DesiredSize.Height);
+        }
+
+        if (desiredSize.Width > availableSize.Width)
+        {
+            // We need to collapse some groups.
+            // If there is no priority order we assume that the last items are the one which should collapse first.
+            var groups = Children.OfType<RibbonCollapsibleGroup>().Reverse().Where(g => g.State == Visibility.Visible).OrderByDescending(g => g.Priority);
+            foreach (var group in groups)
+            {
+                group.State = Visibility.Collapsed;
+                var previousSize = group.DesiredSize;
+                group.Measure(GroupAvailableSize);
+                var newSize = group.DesiredSize;
+
+                if (newSize.Width < previousSize.Width)
+                {
+                    desiredSize.Width -= previousSize.Width - newSize.Width;
+                    desiredSize.Height = Math.Max(desiredSize.Height, newSize.Height);
+                }
+                else
+                {
+                    // The collapsed size is bigger so keep using the visible state.
+                    group.Visibility = Visibility.Visible;
+                    group.Measure(GroupAvailableSize);
+                }
+
+                if (desiredSize.Width < availableSize.Width)
+                {
+                    // No need to collapse more groups.
+                    break;
+                }
+            }
+        }
+        else if (desiredSize.Width < availableSize.Width)
+        {
+            // We have more space than needed, we check if we can expand some groups
+            var groups = Children.OfType<RibbonCollapsibleGroup>().Where(g => g.State == Visibility.Collapsed).OrderBy(g => g.Priority);
+            foreach (var group in groups)
+            {
+                var previousSize = group.DesiredSize;
+                group.State = Visibility.Visible;
+
+                var requestedWidths = group.RequestedWidths;
+                if (requestedWidths is null)
+                {
+                    group.Measure(GroupAvailableSize);
+                }
+                else
+                {
+                    // Get the closest match to remainingWidth or use infinite size if we do not have any match.
+                    var remainingWidth = availableSize.Width + previousSize.Width - desiredSize.Width;
+                    //var requestedWidth = requestedWidths.LastOrDefault(w => w <= remainingWidth, defaultValue: double.PositiveInfinity);
+                    var matchingWidths = requestedWidths.Where(w => w <= remainingWidth);
+                    var requestedWidth = matchingWidths.Any() ? matchingWidths.Last() : double.PositiveInfinity;
+                    var fixedSize = new Size(requestedWidth, availableSize.Height);
+                    group.Measure(fixedSize);
+                }
+
+                var newSize = group.DesiredSize;
+                var widthIncrease = newSize.Width - previousSize.Width;
+                if (desiredSize.Width + widthIncrease > availableSize.Width)
+                {
+                    // Too wide, we revert the change
+                    group.State = Visibility.Collapsed;
+                    group.Measure(GroupAvailableSize);
+                    break;
+                }
+
+                desiredSize.Width += widthIncrease;
+                desiredSize.Height = Math.Max(desiredSize.Height, newSize.Height);
+            }
+        }
+
+        return desiredSize;
+    }
+
+    protected override Size ArrangeOverride(Size finalSize)
+    {
+        var position = new Rect
+        {
+            Height = finalSize.Height
+        };
+
+        foreach (var child in Children)
+        {
+            position.Width = child.DesiredSize.Width;
+            child.Arrange(position);
+
+            position.X += position.Width;
+        }
+
+        return new Size(position.X, position.Height);
+    }
+}
diff --git a/components/Ribbon/src/RibbonStyle.xaml b/components/Ribbon/src/RibbonStyle.xaml
new file mode 100644
index 000000000..9fe9a5468
--- /dev/null
+++ b/components/Ribbon/src/RibbonStyle.xaml
@@ -0,0 +1,406 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:contract8="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
+                    xmlns:controls="using:CommunityToolkit.WinUI.Controls">
+
+    <x:Double x:Key="RibbonGroupButtonChevronSize">8</x:Double>
+    <x:Double x:Key="RibbonGroupContentMinHeight">72</x:Double>
+    <Thickness x:Key="RibbonGroupButtonIconMargin">0,0,0,4</Thickness>
+    <Thickness x:Key="RibbonGroupPadding">12,4</Thickness>
+    <Thickness x:Key="RibbonGroupFlyoutPadding">4</Thickness>
+    <Thickness x:Key="RibbonContentPadding">0,4</Thickness>
+
+    <Style x:Key="RibbonGroupLabelStyle"
+           TargetType="TextBlock">
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Bottom" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="MaxWidth" Value="100" />
+        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
+        <Setter Property="Margin" Value="0,4,0,0" />
+    </Style>
+
+    <Style x:Key="RibbonGroupFlyoutLabelStyle"
+           BasedOn="{StaticResource RibbonGroupLabelStyle}"
+           TargetType="TextBlock">
+        <Setter Property="MaxWidth" Value="200" />
+    </Style>
+
+    <Style x:Key="RibbonGroupButtonStyle"
+           BasedOn="{StaticResource DefaultButtonStyle}"
+           TargetType="Button">
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+    </Style>
+
+    <Style x:Key="RibbonGroupFlyoutStyle"
+           BasedOn="{StaticResource DefaultFlyoutPresenterStyle}"
+           TargetType="FlyoutPresenter">
+        <Setter Property="Padding" Value="{StaticResource RibbonGroupFlyoutPadding}" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
+    </Style>
+
+    <Style x:Key="DefaultRibbonGroupStyle"
+           TargetType="controls:RibbonGroup">
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="Padding" Value="{StaticResource RibbonGroupPadding}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:RibbonGroup">
+                    <Grid Padding="{TemplateBinding Padding}"
+                          AutomationProperties.Name="{TemplateBinding Label}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"
+                                           MinHeight="{StaticResource RibbonGroupContentMinHeight}" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <ContentPresenter HorizontalAlignment="Center"
+                                          VerticalAlignment="Center"
+                                          Content="{TemplateBinding Content}" />
+
+                        <TextBlock Grid.Row="1"
+                                   Style="{StaticResource RibbonGroupLabelStyle}"
+                                   Text="{TemplateBinding Label}">
+                            <ToolTipService.ToolTip>
+                                <ToolTip Content="{TemplateBinding Label}"
+                                         Placement="Bottom"
+                                         Visibility="{Binding ElementName=Label, Path=IsTextTrimmed}" />
+                            </ToolTipService.ToolTip>
+                        </TextBlock>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="DefaultRibbonCollapsibleGroupStyle"
+           TargetType="controls:RibbonCollapsibleGroup">
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="Padding" Value="{StaticResource RibbonGroupPadding}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:RibbonCollapsibleGroup">
+                    <Grid Padding="{TemplateBinding Padding}"
+                          AutomationProperties.Name="{TemplateBinding Label}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"
+                                           MinHeight="{StaticResource RibbonGroupContentMinHeight}" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <ContentControl x:Name="VisibleContentContainer"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        IsTabStop="False"
+                                        Visibility="Collapsed" />
+
+                        <Button x:Name="CollapsedButton"
+                                AccessKey="{TemplateBinding CollapsedAccessKey}"
+                                AutomationProperties.Name="{TemplateBinding Label}"
+                                Style="{StaticResource RibbonGroupButtonStyle}">
+                            <StackPanel>
+                                <IconSourceElement Margin="{StaticResource RibbonGroupButtonIconMargin}"
+                                                   IconSource="{TemplateBinding IconSource}" />
+                                <FontIcon FontSize="{StaticResource RibbonGroupButtonChevronSize}"
+                                          Glyph="&#xE70D;" />
+                            </StackPanel>
+
+                            <Button.Flyout>
+                                <Flyout x:Name="CollapsedFlyout"
+                                        contract8:ShouldConstrainToRootBounds="False"
+                                        FlyoutPresenterStyle="{StaticResource RibbonGroupFlyoutStyle}"
+                                        Placement="Bottom">
+                                    <StackPanel AutomationProperties.Name="{TemplateBinding Label}"
+                                                IsAccessKeyScope="True">
+                                        <ContentControl x:Name="CollapsedContentPresenter"
+                                                        HorizontalAlignment="Center"
+                                                        IsTabStop="False" />
+                                        <TextBlock x:Name="FlyoutLabel"
+                                                   Style="{StaticResource RibbonGroupFlyoutLabelStyle}"
+                                                   Text="{TemplateBinding Label}">
+                                            <ToolTipService.ToolTip>
+                                                <ToolTip Content="{TemplateBinding Label}"
+                                                         Placement="Bottom"
+                                                         Visibility="{Binding ElementName=FlyoutLabel, Path=IsTextTrimmed}" />
+                                            </ToolTipService.ToolTip>
+                                        </TextBlock>
+
+                                    </StackPanel>
+                                </Flyout>
+                            </Button.Flyout>
+                        </Button>
+
+                        <TextBlock x:Name="Label"
+                                   Grid.Row="1"
+                                   Style="{StaticResource RibbonGroupLabelStyle}"
+                                   Text="{TemplateBinding Label}">
+                            <ToolTipService.ToolTip>
+                                <ToolTip Content="{TemplateBinding Label}"
+                                         Placement="Bottom"
+                                         Visibility="{Binding ElementName=Label, Path=IsTextTrimmed}" />
+                            </ToolTipService.ToolTip>
+                        </TextBlock>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style BasedOn="{StaticResource DefaultRibbonGroupStyle}"
+           TargetType="controls:RibbonGroup" />
+    <Style BasedOn="{StaticResource DefaultRibbonCollapsibleGroupStyle}"
+           TargetType="controls:RibbonCollapsibleGroup" />
+
+    <Style x:Key="RibbonLeftGroupStyle"
+           BasedOn="{StaticResource DefaultRibbonGroupStyle}"
+           TargetType="controls:RibbonGroup">
+        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="0,0,1,0" />
+    </Style>
+
+    <Style x:Key="RibbonRightGroupStyle"
+           BasedOn="{StaticResource DefaultRibbonGroupStyle}"
+           TargetType="controls:RibbonGroup">
+        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1,0,0,0" />
+    </Style>
+
+    <Style x:Key="RibbonLeftCollapsibleGroupStyle"
+           BasedOn="{StaticResource DefaultRibbonCollapsibleGroupStyle}"
+           TargetType="controls:RibbonCollapsibleGroup">
+        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="0,0,1,0" />
+    </Style>
+
+    <Style x:Key="RibbonRightCollapsibleGroupStyle"
+           BasedOn="{StaticResource DefaultRibbonCollapsibleGroupStyle}"
+           TargetType="controls:RibbonCollapsibleGroup">
+        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1,0,0,0" />
+    </Style>
+
+    <!--
+        Same template as the default one except:
+        - SizesContentToTemplatedParent="True" on the ScrollContentPresenter
+        - HorizontalAlignment="Left" on the ScrollContentPresenter
+        - HorizontalScrollBarVisibility set to Hidden
+        - Keeps only the ScrollContentPresenter
+    -->
+    <Style x:Key="RibbonScrollViewer"
+           BasedOn="{StaticResource DefaultScrollViewerStyle}"
+           TargetType="ScrollViewer">
+        <Setter Property="VerticalScrollMode" Value="Disabled" />
+        <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
+        <Setter Property="HorizontalScrollMode" Value="Auto" />
+        <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ScrollViewer">
+                    <Border x:Name="Root"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <ScrollContentPresenter x:Name="ScrollContentPresenter"
+                                                Margin="{TemplateBinding Padding}"
+                                                HorizontalAlignment="Left"
+                                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                SizesContentToTemplatedParent="True" />
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  This is based on https://github.com/microsoft/microsoft-ui-xaml/blob/winui2/main/dev/CommonStyles/ScrollBar_themeresources.xaml  -->
+    <Style x:Key="RibbonScrollButtonStyle"
+           TargetType="RepeatButton">
+        <Setter Property="Background" Value="{ThemeResource ControlSolidFillColorDefault}" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolid}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="AllowFocusOnInteraction" Value="False" />
+        <Setter Property="Interval" Value="50" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RepeatButton">
+                    <Grid x:Name="Root"
+                          Padding="4"
+                          VerticalAlignment="Stretch"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ButtonForegroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SolidBackgroundFillColorQuarternary}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ButtonForegroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                       Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
+                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                       Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
+                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SolidBackgroundFillColorBase}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ButtonForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SolidBackgroundFillColorQuarternary}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                        <FontIcon x:Name="Arrow"
+                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                  FontSize="{StaticResource ScrollBarButtonArrowIconFontSize}"
+                                  Foreground="{TemplateBinding Foreground}"
+                                  Glyph="{TemplateBinding Content}"
+                                  MirroredWhenRightToLeft="True"
+                                  RenderTransformOrigin="0.5, 0.5">
+                            <FontIcon.RenderTransform>
+                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
+                            </FontIcon.RenderTransform>
+                        </FontIcon>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="RibbonScrollDecrementButtonStyle"
+           BasedOn="{StaticResource RibbonScrollButtonStyle}"
+           TargetType="RepeatButton">
+        <Setter Property="Content" Value="&#xEDD9;" />
+        <Setter Property="CornerRadius" Value="4,0,0,4" />
+    </Style>
+
+    <Style x:Key="RibbonScrollIncrementButtonStyle"
+           BasedOn="{StaticResource RibbonScrollButtonStyle}"
+           TargetType="RepeatButton">
+        <Setter Property="Content" Value="&#xEDDA;" />
+        <Setter Property="CornerRadius" Value="0,4,4,0" />
+    </Style>
+
+    <Style TargetType="controls:Ribbon">
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Background" Value="{ThemeResource LayerFillColorDefaultBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
+        <Setter Property="BorderThickness" Value="0,1" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Ribbon">
+                    <Grid Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="ScrollButtonGroup">
+                                <VisualState x:Name="NoButtons" />
+                                <VisualState x:Name="DecrementButton">
+                                    <VisualState.Setters>
+                                        <Setter Target="ScrollDecrementButton.Visibility" Value="Visible" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="IncrementButton">
+                                    <VisualState.Setters>
+                                        <Setter Target="ScrollIncrementButton.Visibility" Value="Visible" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="BothButtons">
+                                    <VisualState.Setters>
+                                        <Setter Target="ScrollDecrementButton.Visibility" Value="Visible" />
+                                        <Setter Target="ScrollIncrementButton.Visibility" Value="Visible" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+
+                        <ScrollViewer x:Name="ScrollViewer"
+                                      Grid.ColumnSpan="3"
+                                      Padding="{StaticResource RibbonContentPadding}"
+                                      Style="{StaticResource RibbonScrollViewer}">
+                            <controls:RibbonPanel x:Name="Panel" />
+                        </ScrollViewer>
+
+                        <RepeatButton x:Name="ScrollDecrementButton"
+                                      Grid.Column="0"
+                                      Style="{StaticResource RibbonScrollDecrementButtonStyle}"
+                                      Visibility="Collapsed" />
+                        <RepeatButton x:Name="ScrollIncrementButton"
+                                      Grid.Column="2"
+                                      Style="{StaticResource RibbonScrollIncrementButtonStyle}"
+                                      Visibility="Collapsed" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
diff --git a/components/Ribbon/src/Themes/Generic.xaml b/components/Ribbon/src/Themes/Generic.xaml
new file mode 100644
index 000000000..12908751c
--- /dev/null
+++ b/components/Ribbon/src/Themes/Generic.xaml
@@ -0,0 +1,8 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Ribbon/RibbonStyle.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+</ResourceDictionary>
diff --git a/components/Ribbon/tests/Ribbon.Tests.projitems b/components/Ribbon/tests/Ribbon.Tests.projitems
new file mode 100644
index 000000000..ee27c9b0d
--- /dev/null
+++ b/components/Ribbon/tests/Ribbon.Tests.projitems
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <MSBuildAllProjects Condition="'$(MSBuildVersion)' == '' Or '$(MSBuildVersion)' &lt; '16.0'">$(MSBuildAllProjects);$(MSBuildThisFileFullPath)</MSBuildAllProjects>
+    <HasSharedItems>true</HasSharedItems>
+    <SharedGUID>C18B1738-4AFB-42D9-AC10-298B8F45B71C</SharedGUID>
+  </PropertyGroup>
+  <PropertyGroup Label="Configuration">
+    <Import_RootNamespace>RibbonExperiment.Tests</Import_RootNamespace>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Include="$(MSBuildThisFileDirectory)RibbonTestClass.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)RibbonTestPage.xaml.cs">
+      <DependentUpon>RibbonTestPage.xaml</DependentUpon>
+    </Compile>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Include="$(MSBuildThisFileDirectory)RibbonTestPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+</Project>
\ No newline at end of file
diff --git a/components/Ribbon/tests/Ribbon.Tests.shproj b/components/Ribbon/tests/Ribbon.Tests.shproj
new file mode 100644
index 000000000..afe920f41
--- /dev/null
+++ b/components/Ribbon/tests/Ribbon.Tests.shproj
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>C18B1738-4AFB-42D9-AC10-298B8F45B71C</ProjectGuid>
+    <MinimumVisualStudioVersion>14.0</MinimumVisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.Common.Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.Common.props" />
+  <PropertyGroup />
+  <Import Project="Ribbon.Tests.projitems" Label="Shared" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.CSharp.targets" />
+</Project>
diff --git a/components/Ribbon/tests/RibbonTestClass.cs b/components/Ribbon/tests/RibbonTestClass.cs
new file mode 100644
index 000000000..bcb5513c6
--- /dev/null
+++ b/components/Ribbon/tests/RibbonTestClass.cs
@@ -0,0 +1,43 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using CommunityToolkit.Tests;
+using CommunityToolkit.Tooling.TestGen;
+using CommunityToolkit.WinUI.Controls;
+
+namespace RibbonExperiment.Tests;
+
+[TestClass]
+public partial class RibbonTestClass : VisualUITestBase
+{
+    [TestMethod]
+    public void SimpleSynchronousExampleTest()
+    {
+        var assembly = typeof(Ribbon).Assembly;
+        var type = assembly.GetType(typeof(Ribbon).FullName ?? string.Empty);
+
+        Assert.IsNotNull(type, "Could not find Ribbon type.");
+        Assert.AreEqual(typeof(Ribbon), type, "Type of Ribbon does not match expected type.");
+    }
+
+    // The UIThreadTestMethod automatically dispatches to the UI for us to work with UI objects.
+    [UIThreadTestMethod]
+    public void SimpleUIAttributeExampleTest()
+    {
+        var component = new Ribbon();
+        Assert.IsNotNull(component);
+    }
+
+    // The UIThreadTestMethod can also easily grab a XAML Page for us by passing its type as a parameter.
+    // This lets us actually test a control as it would behave within an actual application.
+    // The page will already be loaded by the time your test is called.
+    [UIThreadTestMethod]
+    public void SimpleUIExamplePageTest(RibbonTestPage page)
+    {
+        // You can use the Toolkit Visual Tree helpers here to find the component by type or name:
+        var component = page.FindDescendant<Ribbon>();
+
+        Assert.IsNotNull(component);
+    }
+}
diff --git a/components/Ribbon/tests/RibbonTestPage.xaml b/components/Ribbon/tests/RibbonTestPage.xaml
new file mode 100644
index 000000000..15f05f561
--- /dev/null
+++ b/components/Ribbon/tests/RibbonTestPage.xaml
@@ -0,0 +1,15 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page
+    x:Class="RibbonExperiment.Tests.RibbonTestPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid>
+        <controls:Ribbon x:Name="RibbonControl" />
+    </Grid>
+</Page>
diff --git a/components/Ribbon/tests/RibbonTestPage.xaml.cs b/components/Ribbon/tests/RibbonTestPage.xaml.cs
new file mode 100644
index 000000000..cdb54731e
--- /dev/null
+++ b/components/Ribbon/tests/RibbonTestPage.xaml.cs
@@ -0,0 +1,10 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace RibbonExperiment.Tests;
+
+public sealed partial class RibbonTestPage : Page
+{
+    public RibbonTestPage() => InitializeComponent();
+}
diff --git a/tooling b/tooling
index 728875676..a14cd911a 160000
--- a/tooling
+++ b/tooling
@@ -1 +1 @@
-Subproject commit 728875676176f6957104e2c81bbfe9267a297348
+Subproject commit a14cd911a35cf10abd73e19ba23f80d0ee6dfb9b

From 58b94d8183809ffc056e46c62aca39db348abfdf Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Thu, 23 May 2024 11:17:18 +0200
Subject: [PATCH 2/8] xaml styler

---
 .../Ribbon/samples/RibbonCustomSample.xaml    | 214 +++++++++---------
 1 file changed, 105 insertions(+), 109 deletions(-)

diff --git a/components/Ribbon/samples/RibbonCustomSample.xaml b/components/Ribbon/samples/RibbonCustomSample.xaml
index 44acc0ae8..65cc74d85 100644
--- a/components/Ribbon/samples/RibbonCustomSample.xaml
+++ b/components/Ribbon/samples/RibbonCustomSample.xaml
@@ -1,17 +1,17 @@
 <!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<Page
-    x:Class="RibbonExperiment.Samples.RibbonCustomSample"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:RibbonExperiment.Samples"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d">
+<Page x:Class="RibbonExperiment.Samples.RibbonCustomSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:RibbonExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
 
     <StackPanel Spacing="16">
         <StackPanel.Resources>
-            <Style BasedOn="{StaticResource DefaultAppBarButtonStyle}" TargetType="AppBarButton">
+            <Style BasedOn="{StaticResource DefaultAppBarButtonStyle}"
+                   TargetType="AppBarButton">
                 <Setter Property="LabelPosition" Value="Collapsed" />
                 <Setter Property="Width" Value="48" />
                 <Setter Property="Margin" Value="8" />
@@ -21,11 +21,10 @@
 
         <controls:Ribbon HorizontalAlignment="Stretch">
 
-            <controls:RibbonCollapsibleGroup
-                AccessKey="AB"
-                CollapsedAccessKey="AA"
-                Label="Edit"
-                Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
+            <controls:RibbonCollapsibleGroup AccessKey="AB"
+                                             CollapsedAccessKey="AA"
+                                             Label="Edit"
+                                             Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
                 <controls:RibbonCollapsibleGroup.IconSource>
                     <SymbolIconSource Symbol="Add" />
                 </controls:RibbonCollapsibleGroup.IconSource>
@@ -42,25 +41,24 @@
                     </Grid.RowDefinitions>
 
                     <AppBarButton Icon="Accept" />
-                    <AppBarButton Grid.Column="1" Icon="Account" />
-
-                    <AppBarButton Grid.Row="1" Icon="Add" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        Icon="AddFriend" />
-                    <AppBarButton
-                        Grid.RowSpan="2"
-                        Grid.Column="2"
-                        Icon="Admin" />
+                    <AppBarButton Grid.Column="1"
+                                  Icon="Account" />
+
+                    <AppBarButton Grid.Row="1"
+                                  Icon="Add" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="1"
+                                  Icon="AddFriend" />
+                    <AppBarButton Grid.RowSpan="2"
+                                  Grid.Column="2"
+                                  Icon="Admin" />
                 </Grid>
             </controls:RibbonCollapsibleGroup>
 
-            <controls:RibbonCollapsibleGroup
-                CollapsedAccessKey="B"
-                Label="Text"
-                Priority="1"
-                Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
+            <controls:RibbonCollapsibleGroup CollapsedAccessKey="B"
+                                             Label="Text"
+                                             Priority="1"
+                                             Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
                 <controls:RibbonCollapsibleGroup.IconSource>
                     <SymbolIconSource Symbol="Remove" />
                 </controls:RibbonCollapsibleGroup.IconSource>
@@ -77,27 +75,27 @@
                     </Grid.RowDefinitions>
 
                     <AppBarButton Icon="AllApps" />
-                    <AppBarButton Grid.Column="1" Icon="Attach" />
-                    <DropDownButton Grid.Column="2" Content="Color">
+                    <AppBarButton Grid.Column="1"
+                                  Icon="Attach" />
+                    <DropDownButton Grid.Column="2"
+                                    Content="Color">
                         <DropDownButton.Flyout>
                             <Flyout>
-                                <Border
-                                    Width="200"
-                                    Height="200"
-                                    Background="Red" />
+                                <Border Width="200"
+                                        Height="200"
+                                        Background="Red" />
                             </Flyout>
                         </DropDownButton.Flyout>
                     </DropDownButton>
 
-                    <AppBarButton Grid.Row="1" Icon="GoToStart" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        Icon="GlobalNavigationButton" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="2"
-                        Icon="ClosePane" />
+                    <AppBarButton Grid.Row="1"
+                                  Icon="GoToStart" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="1"
+                                  Icon="GlobalNavigationButton" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="2"
+                                  Icon="ClosePane" />
                 </Grid>
             </controls:RibbonCollapsibleGroup>
 
@@ -105,7 +103,8 @@
                 <Button Content="Pick color" />
             </controls:RibbonGroup>
 
-            <controls:RibbonCollapsibleGroup CollapsedAccessKey="C" Label="Text">
+            <controls:RibbonCollapsibleGroup CollapsedAccessKey="C"
+                                             Label="Text">
                 <controls:RibbonCollapsibleGroup.IconSource>
                     <SymbolIconSource Symbol="Font" />
                 </controls:RibbonCollapsibleGroup.IconSource>
@@ -122,48 +121,44 @@
                         <RowDefinition Height="*" />
                     </Grid.RowDefinitions>
 
-                    <AppBarButton
-                        Grid.RowSpan="2"
-                        VerticalAlignment="Center"
-                        Icon="Font" />
-                    <AppBarButton Grid.Column="1" Icon="AlignLeft" />
-                    <AppBarButton Grid.Column="2" Icon="AlignCenter" />
-                    <AppBarButton Grid.Column="3" Icon="AlignRight" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        Icon="FontIncrease" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="2"
-                        Icon="FontDecrease" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="3"
-                        Icon="FontColor" />
+                    <AppBarButton Grid.RowSpan="2"
+                                  VerticalAlignment="Center"
+                                  Icon="Font" />
+                    <AppBarButton Grid.Column="1"
+                                  Icon="AlignLeft" />
+                    <AppBarButton Grid.Column="2"
+                                  Icon="AlignCenter" />
+                    <AppBarButton Grid.Column="3"
+                                  Icon="AlignRight" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="1"
+                                  Icon="FontIncrease" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="2"
+                                  Icon="FontDecrease" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="3"
+                                  Icon="FontColor" />
                 </Grid>
             </controls:RibbonCollapsibleGroup>
 
-            <controls:RibbonCollapsibleGroup
-                CollapsedAccessKey="G"
-                Label="Advanved"
-                Priority="5"
-                RequestedWidths="400,200,300">
+            <controls:RibbonCollapsibleGroup CollapsedAccessKey="G"
+                                             Label="Advanved"
+                                             Priority="5"
+                                             RequestedWidths="400,200,300">
                 <controls:RibbonCollapsibleGroup.IconSource>
                     <SymbolIconSource Symbol="AllApps" />
                 </controls:RibbonCollapsibleGroup.IconSource>
-                <GridView
-                    MinHeight="72"
-                    MaxWidth="400"
-                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                    BorderThickness="1">
+                <GridView MinHeight="72"
+                          MaxWidth="400"
+                          BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                          BorderThickness="1">
                     <GridView.ItemTemplate>
                         <DataTemplate>
-                            <TextBlock
-                                Width="24"
-                                Height="24"
-                                HorizontalTextAlignment="Center"
-                                Text="{Binding}" />
+                            <TextBlock Width="24"
+                                       Height="24"
+                                       HorizontalTextAlignment="Center"
+                                       Text="{Binding}" />
                         </DataTemplate>
                     </GridView.ItemTemplate>
                     <GridView.Items>
@@ -185,11 +180,10 @@
                 </GridView>
             </controls:RibbonCollapsibleGroup>
 
-            <controls:RibbonCollapsibleGroup
-                CollapsedAccessKey="E"
-                Label="Commands"
-                Priority="2"
-                Style="{StaticResource RibbonRightCollapsibleGroupStyle}">
+            <controls:RibbonCollapsibleGroup CollapsedAccessKey="E"
+                                             Label="Commands"
+                                             Priority="2"
+                                             Style="{StaticResource RibbonRightCollapsibleGroupStyle}">
                 <controls:RibbonCollapsibleGroup.IconSource>
                     <SymbolIconSource Symbol="Library" />
                 </controls:RibbonCollapsibleGroup.IconSource>
@@ -208,32 +202,34 @@
                     </Grid.RowDefinitions>
 
                     <AppBarButton Icon="Accept" />
-                    <AppBarButton Grid.Column="1" Icon="Favorite" />
-                    <AppBarButton Grid.Column="2" Icon="Filter" />
-                    <AppBarButton Grid.Column="3" Icon="Find" />
-                    <AppBarButton Grid.Column="4" Icon="Flag" />
-
-                    <AppBarButton Grid.Row="1" Icon="Folder" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        Icon="Font" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="2"
-                        Icon="FontColor" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="3"
-                        Icon="FontDecrease" />
-                    <AppBarButton
-                        Grid.Row="1"
-                        Grid.Column="4"
-                        Icon="FontIncrease" />
+                    <AppBarButton Grid.Column="1"
+                                  Icon="Favorite" />
+                    <AppBarButton Grid.Column="2"
+                                  Icon="Filter" />
+                    <AppBarButton Grid.Column="3"
+                                  Icon="Find" />
+                    <AppBarButton Grid.Column="4"
+                                  Icon="Flag" />
+
+                    <AppBarButton Grid.Row="1"
+                                  Icon="Folder" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="1"
+                                  Icon="Font" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="2"
+                                  Icon="FontColor" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="3"
+                                  Icon="FontDecrease" />
+                    <AppBarButton Grid.Row="1"
+                                  Grid.Column="4"
+                                  Icon="FontIncrease" />
                 </Grid>
             </controls:RibbonCollapsibleGroup>
 
-            <controls:RibbonGroup Label="Options" Style="{StaticResource RibbonRightGroupStyle}">
+            <controls:RibbonGroup Label="Options"
+                                  Style="{StaticResource RibbonRightGroupStyle}">
                 <AppBarButton Icon="Setting" />
             </controls:RibbonGroup>
         </controls:Ribbon>

From 5d7da3fd862c7140e122d6bb9ec5c919a11aa60c Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Fri, 24 May 2024 09:34:52 +0200
Subject: [PATCH 3/8] style workaround + add github ids

---
 components/Ribbon/samples/Ribbon.md               | 6 ++----
 components/Ribbon/samples/RibbonCustomSample.xaml | 8 ++++++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/Ribbon/samples/Ribbon.md b/components/Ribbon/samples/Ribbon.md
index 7b90d0f0e..4e5d332cd 100644
--- a/components/Ribbon/samples/Ribbon.md
+++ b/components/Ribbon/samples/Ribbon.md
@@ -8,13 +8,11 @@ dev_langs:
 category: Controls
 subcategory: Layout
 experimental: true
-discussion-id: 0
-issue-id: 0
+discussion-id: 544
+issue-id: 545
 icon: Assets/Ribbon.png
 ---
 
-<!-- Be sure to update the discussion/issue numbers above with your Labs discussion/issue id numbers in order for UI links to them from the sample app to work. -->
-
 # Ribbon
 
 An Office like Ribbon control which displays groups of commands. If there is not enough space to display all the groups,
diff --git a/components/Ribbon/samples/RibbonCustomSample.xaml b/components/Ribbon/samples/RibbonCustomSample.xaml
index 65cc74d85..13793e0ba 100644
--- a/components/Ribbon/samples/RibbonCustomSample.xaml
+++ b/components/Ribbon/samples/RibbonCustomSample.xaml
@@ -8,6 +8,14 @@
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
+    <!--
+        TODO: The generic.xaml file from the code project is not imported when the sample is loaded in the gallery app.
+        As a mitigation, we are manually importing the style dictionary here.
+    -->
+    <Page.Resources>
+        <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Ribbon/RibbonStyle.xaml" />
+    </Page.Resources>
+
     <StackPanel Spacing="16">
         <StackPanel.Resources>
             <Style BasedOn="{StaticResource DefaultAppBarButtonStyle}"

From 324029e6369fc3f037e7424b94dfb7003b0140d4 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Mon, 27 May 2024 16:08:26 +0200
Subject: [PATCH 4/8] tooling ref restored

---
 tooling | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tooling b/tooling
index a14cd911a..ce05388f0 160000
--- a/tooling
+++ b/tooling
@@ -1 +1 @@
-Subproject commit a14cd911a35cf10abd73e19ba23f80d0ee6dfb9b
+Subproject commit ce05388f0ad2f241612a28a0e03cb58c80515e65

From ec2718c6f83eb6c2b89d08a8a2c36c424ba48af5 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Mon, 27 May 2024 16:25:09 +0200
Subject: [PATCH 5/8] fix XamlStyler issue

---
 components/Ribbon/tests/RibbonTestPage.xaml | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/Ribbon/tests/RibbonTestPage.xaml b/components/Ribbon/tests/RibbonTestPage.xaml
index 15f05f561..eaf25e831 100644
--- a/components/Ribbon/tests/RibbonTestPage.xaml
+++ b/components/Ribbon/tests/RibbonTestPage.xaml
@@ -1,13 +1,12 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<Page
-    x:Class="RibbonExperiment.Tests.RibbonTestPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-    mc:Ignorable="d">
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="RibbonExperiment.Tests.RibbonTestPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+      mc:Ignorable="d">
 
     <Grid>
         <controls:Ribbon x:Name="RibbonControl" />

From 01797a022beda5137f6bc0555d4ccaad203fea43 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Mon, 1 Jul 2024 11:29:17 +0200
Subject: [PATCH 6/8] add partial qualifier to control classes

---
 components/Ribbon/src/Ribbon.cs                 | 2 +-
 components/Ribbon/src/RibbonCollapsibleGroup.cs | 2 +-
 components/Ribbon/src/RibbonGroup.cs            | 2 +-
 components/Ribbon/src/RibbonPanel.cs            | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Ribbon/src/Ribbon.cs b/components/Ribbon/src/Ribbon.cs
index f480c7aa3..d932ad184 100644
--- a/components/Ribbon/src/Ribbon.cs
+++ b/components/Ribbon/src/Ribbon.cs
@@ -19,7 +19,7 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = DecrementButtonStateTemplatePart)]
 [TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = IncrementButtonStateTemplatePart)]
 [TemplateVisualState(GroupName = ScrollButtonGroupNameTemplatePart, Name = BothButtonsStateTemplatePart)]
-public sealed class Ribbon : Control
+public sealed partial class Ribbon : Control
 {
     private const string PanelTemplatePart = "Panel";
     private const string ScrollViewerTemplatePart = "ScrollViewer";
diff --git a/components/Ribbon/src/RibbonCollapsibleGroup.cs b/components/Ribbon/src/RibbonCollapsibleGroup.cs
index 0f4401efb..ef74459bb 100644
--- a/components/Ribbon/src/RibbonCollapsibleGroup.cs
+++ b/components/Ribbon/src/RibbonCollapsibleGroup.cs
@@ -16,7 +16,7 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplatePart(Name = CollapsedButtonTemplatePart, Type = typeof(Button))]
 [TemplatePart(Name = CollapsedFlyoutTemplatePart, Type = typeof(Flyout))]
 [TemplatePart(Name = CollapsedContentPresenterTemplatePart, Type = typeof(ContentPresenter))]
-public class RibbonCollapsibleGroup : RibbonGroup
+public partial class RibbonCollapsibleGroup : RibbonGroup
 {
     private const string VisibleContentContainerTemplatePart = "VisibleContentContainer";
     private const string CollapsedButtonTemplatePart = "CollapsedButton";
diff --git a/components/Ribbon/src/RibbonGroup.cs b/components/Ribbon/src/RibbonGroup.cs
index 8a0152ef3..92aa2a9bd 100644
--- a/components/Ribbon/src/RibbonGroup.cs
+++ b/components/Ribbon/src/RibbonGroup.cs
@@ -9,7 +9,7 @@ namespace CommunityToolkit.WinUI.Controls;
 /// It adds a <see cref="Label"/> to the wrapped <see cref="Content"/>.
 /// </summary>
 [ContentProperty(Name = nameof(Content))]
-public class RibbonGroup : Control
+public partial class RibbonGroup : Control
 {
     /// <summary>
     /// The DP to store the <see cref="Content"/> property value.
diff --git a/components/Ribbon/src/RibbonPanel.cs b/components/Ribbon/src/RibbonPanel.cs
index 2fe225bc3..43ae49ee1 100644
--- a/components/Ribbon/src/RibbonPanel.cs
+++ b/components/Ribbon/src/RibbonPanel.cs
@@ -8,7 +8,7 @@ namespace CommunityToolkit.WinUI.Controls;
 /// A panel which will set the <see cref="RibbonCollapsibleGroup"/> items in a collapsed state if there is not enough space to render them.
 /// It is used by the <see cref="Ribbon"/> control.
 /// </summary>
-internal sealed class RibbonPanel : Panel
+internal sealed partial class RibbonPanel : Panel
 {
     private static readonly Size GroupAvailableSize = new(double.PositiveInfinity, double.PositiveInfinity);
 

From b28ef7ac3c3d8bd975c3f6cda7cb41faec211e80 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Mon, 1 Jul 2024 11:37:23 +0200
Subject: [PATCH 7/8] update tooling

---
 tooling | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tooling b/tooling
index ce05388f0..728875676 160000
--- a/tooling
+++ b/tooling
@@ -1 +1 @@
-Subproject commit ce05388f0ad2f241612a28a0e03cb58c80515e65
+Subproject commit 728875676176f6957104e2c81bbfe9267a297348

From 702d16065037b05c49820dc7b0a78ca0bb470363 Mon Sep 17 00:00:00 2001
From: Vincent Gromfeld <vigromfe@microsoft.com>
Date: Thu, 11 Jul 2024 18:41:55 +0200
Subject: [PATCH 8/8] pr comments

---
 components/Ribbon/samples/Ribbon.md           |  7 +-
 .../Ribbon/samples/RibbonCustomSample.xaml    | 13 +++-
 components/Ribbon/src/Ribbon.cs               |  2 +-
 .../Ribbon/src/RibbonCollapsibleGroup.cs      | 78 +++++++++++--------
 4 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/components/Ribbon/samples/Ribbon.md b/components/Ribbon/samples/Ribbon.md
index 4e5d332cd..20f80d107 100644
--- a/components/Ribbon/samples/Ribbon.md
+++ b/components/Ribbon/samples/Ribbon.md
@@ -25,11 +25,6 @@ some of them can be collapsed based on a priority order.
 A basic group displayed in a Ribbon.
 It mostly adds a *label* to some content and will not collapse if there is not enough space available.
 
-### Label
-The label of the group.
-
-### Content
-The content of the group.
 
 ## RibbonCollapsibleGroup
 
@@ -40,7 +35,7 @@ a flyout containing the group's content.
 ### IconSource
 The icon to display when the group is collapsed.
 
-### AutoCloseflyout
+### AutoCloseFlyout
 Set to true to automatically close the overflow flyout if one interactive element is clicked.
 Note that the logic to detect the click is very basic. It will request the flyout to close
 for all the handled pointer released events. It assumes that if the pointer has been handled
diff --git a/components/Ribbon/samples/RibbonCustomSample.xaml b/components/Ribbon/samples/RibbonCustomSample.xaml
index 13793e0ba..e7d6a27bf 100644
--- a/components/Ribbon/samples/RibbonCustomSample.xaml
+++ b/components/Ribbon/samples/RibbonCustomSample.xaml
@@ -22,7 +22,7 @@
                    TargetType="AppBarButton">
                 <Setter Property="LabelPosition" Value="Collapsed" />
                 <Setter Property="Width" Value="48" />
-                <Setter Property="Margin" Value="8" />
+                <Setter Property="Margin" Value="4" />
                 <Setter Property="Height" Value="48" />
             </Style>
         </StackPanel.Resources>
@@ -151,16 +151,21 @@
             </controls:RibbonCollapsibleGroup>
 
             <controls:RibbonCollapsibleGroup CollapsedAccessKey="G"
-                                             Label="Advanved"
+                                             Label="Advanced"
                                              Priority="5"
                                              RequestedWidths="400,200,300">
                 <controls:RibbonCollapsibleGroup.IconSource>
                     <SymbolIconSource Symbol="AllApps" />
                 </controls:RibbonCollapsibleGroup.IconSource>
-                <GridView MinHeight="72"
+                <GridView Height="96"
                           MaxWidth="400"
+                          HorizontalAlignment="Stretch"
+                          VerticalAlignment="Center"
                           BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                          BorderThickness="1">
+                          BorderThickness="1"
+                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                          ScrollViewer.HorizontalScrollMode="Disabled"
+                          ScrollViewer.VerticalScrollBarVisibility="Auto">
                     <GridView.ItemTemplate>
                         <DataTemplate>
                             <TextBlock Width="24"
diff --git a/components/Ribbon/src/Ribbon.cs b/components/Ribbon/src/Ribbon.cs
index d932ad184..ba36ef79c 100644
--- a/components/Ribbon/src/Ribbon.cs
+++ b/components/Ribbon/src/Ribbon.cs
@@ -63,7 +63,7 @@ public Ribbon()
         _items.CollectionChanged += OnItemsCollectionChanged;
     }
 
-    public ICollection<UIElement> Items => _items;
+    public IList<UIElement> Items => _items;
 
     protected override void OnApplyTemplate()
     {
diff --git a/components/Ribbon/src/RibbonCollapsibleGroup.cs b/components/Ribbon/src/RibbonCollapsibleGroup.cs
index ef74459bb..b4812b00e 100644
--- a/components/Ribbon/src/RibbonCollapsibleGroup.cs
+++ b/components/Ribbon/src/RibbonCollapsibleGroup.cs
@@ -171,22 +171,26 @@ protected override void OnApplyTemplate()
             _collapsedContentContainer.RemoveHandler(KeyUpEvent, new KeyEventHandler(OnFlyoutKeyUp));
         }
 
-        _visibleContentContainer = GetOrThrow<ContentControl>(VisibleContentContainerTemplatePart);
-        _collapsedContentContainer = GetOrThrow<ContentControl>(CollapsedContentPresenterTemplatePart);
-        _collapsedButton = GetOrThrow<Button>(CollapsedButtonTemplatePart);
-        _collapsedFlyout = GetOrThrow<Flyout>(CollapsedFlyoutTemplatePart);
+        _visibleContentContainer = Get<ContentControl>(VisibleContentContainerTemplatePart);
+        _collapsedContentContainer = Get<ContentControl>(CollapsedContentPresenterTemplatePart);
+        _collapsedButton = Get<Button>(CollapsedButtonTemplatePart);
+        _collapsedFlyout = Get<Flyout>(CollapsedFlyoutTemplatePart);
 
-        _collapsedFlyout.Opened += OnFlyoutOpened;
-        _collapsedContentContainer.AddHandler(PointerReleasedEvent, new PointerEventHandler(OnFlyoutPointerReleased), handledEventsToo: true);
-        _collapsedContentContainer.AddHandler(KeyUpEvent, new KeyEventHandler(OnFlyoutKeyUp), handledEventsToo: true);
+        if (_collapsedFlyout is not null)
+        {
+            _collapsedFlyout.Opened += OnFlyoutOpened;
+        }
+
+        if (_collapsedContentContainer is not null)
+        {
+            _collapsedContentContainer.AddHandler(PointerReleasedEvent, new PointerEventHandler(OnFlyoutPointerReleased), handledEventsToo: true);
+            _collapsedContentContainer.AddHandler(KeyUpEvent, new KeyEventHandler(OnFlyoutKeyUp), handledEventsToo: true);
+        }
 
         UpdateState();
     }
 
-    private T GetOrThrow<T>(string templatePart) where T : class
-        => GetTemplateChild(templatePart) is T element
-            ? element
-            : throw new ArgumentException($"{templatePart} missing or not of the expected type: {typeof(T).Name}");
+    private T? Get<T>(string templatePart) where T : class => GetTemplateChild(templatePart) as T;
 
     private void OnFlyoutOpened(object? sender, object e)
         => _collapsedContentContainer?.Focus(FocusState.Programmatic);
@@ -209,7 +213,7 @@ private void AutoCollapseFlyout(bool eventHasBeenHandled, object originalSource)
         // We only consider events which have been processed since it usually means
         // that a control has processed the event and that the click is not in an
         // empty/non-interactive area.
-        if (eventHasBeenHandled && AutoCloseFlyout && _collapsedFlyout!.IsOpen && !DoesRoutedEventOriginateFromAFlyoutHost(originalSource as UIElement))
+        if (eventHasBeenHandled && AutoCloseFlyout && _collapsedFlyout?.IsOpen == true && !DoesRoutedEventOriginateFromAFlyoutHost(originalSource as UIElement))
         {
             _collapsedFlyout.Hide();
         }
@@ -217,10 +221,15 @@ private void AutoCollapseFlyout(bool eventHasBeenHandled, object originalSource)
 
     private bool DoesRoutedEventOriginateFromAFlyoutHost(UIElement? source)
     {
+        if (_collapsedContentContainer is null)
+        {
+            return false;
+        }
+
         while (source != null && source != _collapsedContentContainer)
         {
-            // TODO: handle MUX variants in UWP
-            if (source is DropDownButton ||
+            if (source is MUXC.DropDownButton ||
+                source is DropDownButton ||
                 source is ComboBox ||
                 source is ComboBoxItem ||
                 (source is Button buttonSource && buttonSource.Flyout != null) ||
@@ -243,28 +252,35 @@ private static void OnStatePropertyChanged(DependencyObject d, DependencyPropert
 
     private void UpdateState()
     {
-        if (_visibleContentContainer is null)
-        {
-            // Template is not ready yet.
-            return;
-        }
-
         switch (State)
         {
             case Visibility.Visible:
-                _collapsedFlyout!.Hide();
-                _collapsedContentContainer!.Content = null;
-                _visibleContentContainer.Content = Content;
-
-                _collapsedButton!.Visibility = Visibility.Collapsed;
-                _visibleContentContainer.Visibility = Visibility.Visible;
+                _collapsedFlyout?.Hide();
+
+                if (_collapsedContentContainer is not null && _visibleContentContainer is not null)
+                {
+                    _collapsedContentContainer.Content = null;
+                    _visibleContentContainer.Content = Content;
+                }
+
+                if (_collapsedButton is not null && _visibleContentContainer is not null)
+                {
+                    _collapsedButton.Visibility = Visibility.Collapsed;
+                    _visibleContentContainer.Visibility = Visibility.Visible;
+                }
                 break;
             case Visibility.Collapsed:
-                _visibleContentContainer.Content = null;
-                _collapsedContentContainer!.Content = Content;
-
-                _visibleContentContainer.Visibility = Visibility.Collapsed;
-                _collapsedButton!.Visibility = Visibility.Visible;
+                if (_collapsedContentContainer is not null && _visibleContentContainer is not null)
+                {
+                    _visibleContentContainer.Content = null;
+                    _collapsedContentContainer.Content = Content;
+                }
+
+                if (_collapsedButton is not null && _visibleContentContainer is not null)
+                {
+                    _visibleContentContainer.Visibility = Visibility.Collapsed;
+                    _collapsedButton.Visibility = Visibility.Visible;
+                }
                 break;
             default:
                 throw new ArgumentException("Invalid state");