Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ribbon #546

Merged
merged 9 commits into from
Jul 31, 2024
Merged

Ribbon #546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8e116ad
Add ribbon control
vgromfeld May 21, 2024
58b94d8
xaml styler
vgromfeld May 23, 2024
5d7da3f
style workaround + add github ids
vgromfeld May 24, 2024
324029e
tooling ref restored
vgromfeld May 27, 2024
ec2718c
fix XamlStyler issue
vgromfeld May 27, 2024
01797a0
add partial qualifier to control classes
vgromfeld Jul 1, 2024
b28ef7a
update tooling
vgromfeld Jul 1, 2024
702d160
pr comments
vgromfeld Jul 11, 2024
2f6a4ba
Merge branch 'main' into ribbon
Arlodotexe Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/Ribbon/OpenSolution.bat
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@ECHO OFF

powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*
Binary file added components/Ribbon/samples/Assets/Ribbon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions components/Ribbon/samples/Dependencies.props
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 18 additions & 0 deletions components/Ribbon/samples/Ribbon.Samples.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 67 additions & 0 deletions components/Ribbon/samples/Ribbon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
---
title: Ribbon
author: vgromfeld
description: An office like ribbon.
keywords: Ribbon, Control
dev_langs:
- csharp
category: Controls
subcategory: Layout
experimental: true
discussion-id: 544
issue-id: 545
icon: Assets/Ribbon.png
---

# 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.


## 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.
vgromfeld marked this conversation as resolved.
Show resolved Hide resolved

### 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.
250 changes: 250 additions & 0 deletions components/Ribbon/samples/RibbonCustomSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
<!-- 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">

<!--
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>
Comment on lines +15 to +17
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@Arlodotexe Arlodotexe Jul 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@Arlodotexe Arlodotexe Jul 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


<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="4" />
<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>
vgromfeld marked this conversation as resolved.
Show resolved Hide resolved

<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="Advanced"
Priority="5"
RequestedWidths="400,200,300">
<controls:RibbonCollapsibleGroup.IconSource>
<SymbolIconSource Symbol="AllApps" />
</controls:RibbonCollapsibleGroup.IconSource>
<GridView Height="96"
MaxWidth="400"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<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>
16 changes: 16 additions & 0 deletions components/Ribbon/samples/RibbonCustomSample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
Loading
Loading