Skip to content

Commit 01e46ab

Browse files
vgromfeldArlodotexe
vgromfeld
and
Arlodotexe
authored
Ribbon (#546)
* Add ribbon control * xaml styler * style workaround + add github ids * tooling ref restored * fix XamlStyler issue * add partial qualifier to control classes * update tooling * pr comments --------- Co-authored-by: Arlo <arlo.godfrey@outlook.com>
1 parent 18901b6 commit 01e46ab

22 files changed

+1680
-0
lines changed

‎components/Ribbon/OpenSolution.bat

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/Ribbon/samples/Assets/Ribbon.png

2.16 KB
Loading

‎components/Ribbon/samples/Dependencies.props

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

‎components/Ribbon/samples/Ribbon.Samples.csproj

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Project>
2+
<Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
3+
4+
<PropertyGroup>
5+
<ToolkitComponentName>Ribbon</ToolkitComponentName>
6+
</PropertyGroup>
7+
8+
<!-- Sets this up as a toolkit component's sample project -->
9+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
10+
<ItemGroup>
11+
<None Remove="Assets\Ribbon.png" />
12+
</ItemGroup>
13+
<ItemGroup>
14+
<Content Include="Assets\Ribbon.png">
15+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
16+
</Content>
17+
</ItemGroup>
18+
</Project>

‎components/Ribbon/samples/Ribbon.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Ribbon
3+
author: vgromfeld
4+
description: An office like ribbon.
5+
keywords: Ribbon, Control
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
experimental: true
11+
discussion-id: 544
12+
issue-id: 545
13+
icon: Assets/Ribbon.png
14+
---
15+
16+
# Ribbon
17+
18+
An Office like Ribbon control which displays groups of commands. If there is not enough space to display all the groups,
19+
some of them can be collapsed based on a priority order.
20+
21+
> [!Sample RibbonCustomSample]
22+
23+
## RibbonGroup
24+
25+
A basic group displayed in a Ribbon.
26+
It mostly adds a *label* to some content and will not collapse if there is not enough space available.
27+
28+
29+
## RibbonCollapsibleGroup
30+
31+
A `RibbonGroup` which can be collapsed if its content does not fit in the available Ribbon's space.
32+
When collapsed, the group is displayed as a single icon button. Clicking on this button opens
33+
a flyout containing the group's content.
34+
35+
### IconSource
36+
The icon to display when the group is collapsed.
37+
38+
### AutoCloseFlyout
39+
Set to true to automatically close the overflow flyout if one interactive element is clicked.
40+
Note that the logic to detect the click is very basic. It will request the flyout to close
41+
for all the handled pointer released events. It assumes that if the pointer has been handled
42+
something reacted to it. It works well for buttons or check boxes but does not work for text
43+
or combo boxes.
44+
45+
### Priority
46+
The priority of the group.
47+
The group with the lower priority will be the first one to be collapsed.
48+
49+
### CollapsedAccessKey
50+
The access key to access the collapsed button and open the flyout when the group is collapsed.
51+
52+
### RequestedWidths
53+
54+
The list of requested widths for the group.
55+
If null or empty, the group will automatically use the size of its content.
56+
If set, the group will use the smallest provided width fitting in the ribbon.
57+
This is useful if the group contains a variable size control which can adjust
58+
its width (like a GridView with several items).
59+
60+
### State
61+
The state of the group (collapsed or visible). This property is used by the `RibbonPanel`.
62+
63+
## RibbonPanel
64+
65+
The inner panel of the Ribbon control. It displays the groups inside the `Ribbon` and
66+
automatically collapse the `CollapsibleGroup` elements based on their priority order if
67+
there is not enough space available.

‎components/Ribbon/samples/RibbonCustomSample.xaml

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!-- 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. -->
2+
<Page x:Class="RibbonExperiment.Samples.RibbonCustomSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="using:RibbonExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<!--
12+
TODO: The generic.xaml file from the code project is not imported when the sample is loaded in the gallery app.
13+
As a mitigation, we are manually importing the style dictionary here.
14+
-->
15+
<Page.Resources>
16+
<ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Ribbon/RibbonStyle.xaml" />
17+
</Page.Resources>
18+
19+
<StackPanel Spacing="16">
20+
<StackPanel.Resources>
21+
<Style BasedOn="{StaticResource DefaultAppBarButtonStyle}"
22+
TargetType="AppBarButton">
23+
<Setter Property="LabelPosition" Value="Collapsed" />
24+
<Setter Property="Width" Value="48" />
25+
<Setter Property="Margin" Value="4" />
26+
<Setter Property="Height" Value="48" />
27+
</Style>
28+
</StackPanel.Resources>
29+
30+
<controls:Ribbon HorizontalAlignment="Stretch">
31+
32+
<controls:RibbonCollapsibleGroup AccessKey="AB"
33+
CollapsedAccessKey="AA"
34+
Label="Edit"
35+
Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
36+
<controls:RibbonCollapsibleGroup.IconSource>
37+
<SymbolIconSource Symbol="Add" />
38+
</controls:RibbonCollapsibleGroup.IconSource>
39+
40+
<Grid>
41+
<Grid.ColumnDefinitions>
42+
<ColumnDefinition Width="Auto" />
43+
<ColumnDefinition Width="Auto" />
44+
<ColumnDefinition Width="Auto" />
45+
</Grid.ColumnDefinitions>
46+
<Grid.RowDefinitions>
47+
<RowDefinition Height="*" />
48+
<RowDefinition Height="*" />
49+
</Grid.RowDefinitions>
50+
51+
<AppBarButton Icon="Accept" />
52+
<AppBarButton Grid.Column="1"
53+
Icon="Account" />
54+
55+
<AppBarButton Grid.Row="1"
56+
Icon="Add" />
57+
<AppBarButton Grid.Row="1"
58+
Grid.Column="1"
59+
Icon="AddFriend" />
60+
<AppBarButton Grid.RowSpan="2"
61+
Grid.Column="2"
62+
Icon="Admin" />
63+
</Grid>
64+
</controls:RibbonCollapsibleGroup>
65+
66+
<controls:RibbonCollapsibleGroup CollapsedAccessKey="B"
67+
Label="Text"
68+
Priority="1"
69+
Style="{StaticResource RibbonLeftCollapsibleGroupStyle}">
70+
<controls:RibbonCollapsibleGroup.IconSource>
71+
<SymbolIconSource Symbol="Remove" />
72+
</controls:RibbonCollapsibleGroup.IconSource>
73+
74+
<Grid>
75+
<Grid.ColumnDefinitions>
76+
<ColumnDefinition Width="Auto" />
77+
<ColumnDefinition Width="Auto" />
78+
<ColumnDefinition Width="Auto" />
79+
</Grid.ColumnDefinitions>
80+
<Grid.RowDefinitions>
81+
<RowDefinition Height="*" />
82+
<RowDefinition Height="*" />
83+
</Grid.RowDefinitions>
84+
85+
<AppBarButton Icon="AllApps" />
86+
<AppBarButton Grid.Column="1"
87+
Icon="Attach" />
88+
<DropDownButton Grid.Column="2"
89+
Content="Color">
90+
<DropDownButton.Flyout>
91+
<Flyout>
92+
<Border Width="200"
93+
Height="200"
94+
Background="Red" />
95+
</Flyout>
96+
</DropDownButton.Flyout>
97+
</DropDownButton>
98+
99+
<AppBarButton Grid.Row="1"
100+
Icon="GoToStart" />
101+
<AppBarButton Grid.Row="1"
102+
Grid.Column="1"
103+
Icon="GlobalNavigationButton" />
104+
<AppBarButton Grid.Row="1"
105+
Grid.Column="2"
106+
Icon="ClosePane" />
107+
</Grid>
108+
</controls:RibbonCollapsibleGroup>
109+
110+
<controls:RibbonGroup Label="Color">
111+
<Button Content="Pick color" />
112+
</controls:RibbonGroup>
113+
114+
<controls:RibbonCollapsibleGroup CollapsedAccessKey="C"
115+
Label="Text">
116+
<controls:RibbonCollapsibleGroup.IconSource>
117+
<SymbolIconSource Symbol="Font" />
118+
</controls:RibbonCollapsibleGroup.IconSource>
119+
120+
<Grid>
121+
<Grid.ColumnDefinitions>
122+
<ColumnDefinition Width="Auto" />
123+
<ColumnDefinition Width="Auto" />
124+
<ColumnDefinition Width="Auto" />
125+
<ColumnDefinition Width="Auto" />
126+
</Grid.ColumnDefinitions>
127+
<Grid.RowDefinitions>
128+
<RowDefinition Height="*" />
129+
<RowDefinition Height="*" />
130+
</Grid.RowDefinitions>
131+
132+
<AppBarButton Grid.RowSpan="2"
133+
VerticalAlignment="Center"
134+
Icon="Font" />
135+
<AppBarButton Grid.Column="1"
136+
Icon="AlignLeft" />
137+
<AppBarButton Grid.Column="2"
138+
Icon="AlignCenter" />
139+
<AppBarButton Grid.Column="3"
140+
Icon="AlignRight" />
141+
<AppBarButton Grid.Row="1"
142+
Grid.Column="1"
143+
Icon="FontIncrease" />
144+
<AppBarButton Grid.Row="1"
145+
Grid.Column="2"
146+
Icon="FontDecrease" />
147+
<AppBarButton Grid.Row="1"
148+
Grid.Column="3"
149+
Icon="FontColor" />
150+
</Grid>
151+
</controls:RibbonCollapsibleGroup>
152+
153+
<controls:RibbonCollapsibleGroup CollapsedAccessKey="G"
154+
Label="Advanced"
155+
Priority="5"
156+
RequestedWidths="400,200,300">
157+
<controls:RibbonCollapsibleGroup.IconSource>
158+
<SymbolIconSource Symbol="AllApps" />
159+
</controls:RibbonCollapsibleGroup.IconSource>
160+
<GridView Height="96"
161+
MaxWidth="400"
162+
HorizontalAlignment="Stretch"
163+
VerticalAlignment="Center"
164+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
165+
BorderThickness="1"
166+
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
167+
ScrollViewer.HorizontalScrollMode="Disabled"
168+
ScrollViewer.VerticalScrollBarVisibility="Auto">
169+
<GridView.ItemTemplate>
170+
<DataTemplate>
171+
<TextBlock Width="24"
172+
Height="24"
173+
HorizontalTextAlignment="Center"
174+
Text="{Binding}" />
175+
</DataTemplate>
176+
</GridView.ItemTemplate>
177+
<GridView.Items>
178+
<x:Double>1</x:Double>
179+
<x:Double>2</x:Double>
180+
<x:Double>3</x:Double>
181+
<x:Double>4</x:Double>
182+
<x:Double>5</x:Double>
183+
<x:Double>6</x:Double>
184+
<x:Double>7</x:Double>
185+
<x:Double>8</x:Double>
186+
<x:Double>9</x:Double>
187+
<x:Double>10</x:Double>
188+
<x:Double>11</x:Double>
189+
<x:Double>12</x:Double>
190+
<x:Double>13</x:Double>
191+
<x:Double>14</x:Double>
192+
</GridView.Items>
193+
</GridView>
194+
</controls:RibbonCollapsibleGroup>
195+
196+
<controls:RibbonCollapsibleGroup CollapsedAccessKey="E"
197+
Label="Commands"
198+
Priority="2"
199+
Style="{StaticResource RibbonRightCollapsibleGroupStyle}">
200+
<controls:RibbonCollapsibleGroup.IconSource>
201+
<SymbolIconSource Symbol="Library" />
202+
</controls:RibbonCollapsibleGroup.IconSource>
203+
204+
<Grid>
205+
<Grid.ColumnDefinitions>
206+
<ColumnDefinition Width="Auto" />
207+
<ColumnDefinition Width="Auto" />
208+
<ColumnDefinition Width="Auto" />
209+
<ColumnDefinition Width="Auto" />
210+
<ColumnDefinition Width="Auto" />
211+
</Grid.ColumnDefinitions>
212+
<Grid.RowDefinitions>
213+
<RowDefinition Height="*" />
214+
<RowDefinition Height="*" />
215+
</Grid.RowDefinitions>
216+
217+
<AppBarButton Icon="Accept" />
218+
<AppBarButton Grid.Column="1"
219+
Icon="Favorite" />
220+
<AppBarButton Grid.Column="2"
221+
Icon="Filter" />
222+
<AppBarButton Grid.Column="3"
223+
Icon="Find" />
224+
<AppBarButton Grid.Column="4"
225+
Icon="Flag" />
226+
227+
<AppBarButton Grid.Row="1"
228+
Icon="Folder" />
229+
<AppBarButton Grid.Row="1"
230+
Grid.Column="1"
231+
Icon="Font" />
232+
<AppBarButton Grid.Row="1"
233+
Grid.Column="2"
234+
Icon="FontColor" />
235+
<AppBarButton Grid.Row="1"
236+
Grid.Column="3"
237+
Icon="FontDecrease" />
238+
<AppBarButton Grid.Row="1"
239+
Grid.Column="4"
240+
Icon="FontIncrease" />
241+
</Grid>
242+
</controls:RibbonCollapsibleGroup>
243+
244+
<controls:RibbonGroup Label="Options"
245+
Style="{StaticResource RibbonRightGroupStyle}">
246+
<AppBarButton Icon="Setting" />
247+
</controls:RibbonGroup>
248+
</controls:Ribbon>
249+
</StackPanel>
250+
</Page>

‎components/Ribbon/samples/RibbonCustomSample.xaml.cs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Controls;
6+
7+
namespace RibbonExperiment.Samples;
8+
9+
/// <summary>
10+
/// An example of the <see cref="Ribbon"/> control.
11+
/// </summary>
12+
[ToolkitSample(id: nameof(RibbonCustomSample), "Ribbon control sample", description: $"A sample for showing how to create and use a {nameof(Ribbon)} custom control.")]
13+
public sealed partial class RibbonCustomSample : Page
14+
{
15+
public RibbonCustomSample() => InitializeComponent();
16+
}

0 commit comments

Comments
 (0)