Skip to content

Commit e407e07

Browse files
author
msftbot[bot]
authored
[Feature] Add TabbedCommandBar (ribbon) control (#3556)
<!-- 🚨 Please Do Not skip any instructions and information mentioned below as they are all required and essential to evaluate and test the PR. By fulfilling all the required information you will be able to reduce the volume of questions and most likely help merge the PR faster 🚨 --> ## Fixes #3259 <!-- Add the relevant issue number after the "#" mentioned above (for ex: Fixes #1234) which will automatically close the issue once the PR is merged. --> <!-- Add a brief overview here of the feature/bug & fix. --> ## PR Type What kind of change does this PR introduce? <!-- Please uncomment one or more that apply to this PR. --> <!-- - Bugfix --> Feature <!-- - Code style update (formatting) --> <!-- - Refactoring (no functional changes, no api changes) --> <!-- - Build or CI related changes --> <!-- - Documentation content changes --> Sample app changes <!-- - Other... Please describe: --> ## What is the current behavior? There is no ribbon or ribbon-like control for UWP. The current solution is to put CommandBars inside of a Pivot. ## What is the new behavior? Adds a TabbedCommandBar, which internally is almost identical to the current solutions, but provides a much friendlier developer experience. ## PR Checklist Please check if your PR fulfills the following requirements: - [ ] Tested code with current [supported SDKs](../readme.md#supported) - [ ] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: MicrosoftDocs/WindowsCommunityToolkitDocs#405 - [ ] Sample in sample app has been added / updated (for bug fixes / features) - [x] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets) - [ ] Tests for the changes have been added (for bug fixes / features) (if applicable) - [ ] Header has been added to all new source files (run *build/UpdateHeaders.bat*) - [x] Contains **NO** breaking changes <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. --> ## Other information I forgot to do my work on a feature branch, so this PR is basically a duplicate of #3551, with a little bit of cleanup.
2 parents f1f69e3 + 71efaa7 commit e407e07

18 files changed

+1186
-6
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,7 @@
267267
<Content Include="Icons\More.png" />
268268
<Content Include="Icons\Notifications.png" />
269269
<Content Include="Icons\Services.png" />
270+
<Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.png" />
270271
<Content Include="SamplePages\Animations\Effects\FadeBehavior.png" />
271272
<Content Include="SamplePages\ColorPicker\ColorPicker.png" />
272273
<Content Include="SamplePages\TilesBrush\TilesBrush.png" />
@@ -980,6 +981,9 @@
980981
<Generator>MSBuild:Compile</Generator>
981982
<SubType>Designer</SubType>
982983
</Page>
984+
<Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.bind">
985+
<SubType>Designer</SubType>
986+
</Content>
983987
<Page Include="SamplePages\CanvasPathGeometry\CanvasPathGeometryPage.xaml">
984988
<SubType>Designer</SubType>
985989
<Generator>MSBuild:Compile</Generator>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
6+
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
7+
mc:Ignorable="d">
8+
<Page.Resources>
9+
<converters:VisibilityToBoolConverter x:Key="VisBoolConverter"/>
10+
</Page.Resources>
11+
<Grid>
12+
<Grid.RowDefinitions>
13+
<RowDefinition Height="Auto"/>
14+
<RowDefinition/>
15+
</Grid.RowDefinitions>
16+
17+
<controls:TabbedCommandBar>
18+
<controls:TabbedCommandBar.PaneFooter>
19+
<CommandBar Background="Transparent" DefaultLabelPosition="Right">
20+
<AppBarButton Label="Share" Icon="Share"/>
21+
<AppBarButton Label="Comments" Icon="Message"/>
22+
</CommandBar>
23+
</controls:TabbedCommandBar.PaneFooter>
24+
<controls:TabbedCommandBar.MenuItems>
25+
<controls:TabbedCommandBarItem Header="Home">
26+
<AppBarButton Icon="Undo" Label="Undo"/>
27+
<AppBarButton Icon="Redo" Label="Redo"/>
28+
<AppBarButton Icon="Paste" Label="Paste"/>
29+
<AppBarSeparator />
30+
<AppBarElementContainer>
31+
<controls:ColorPickerButton SelectedColor="{ThemeResource Brand-Color}"/>
32+
</AppBarElementContainer>
33+
<AppBarElementContainer>
34+
<ComboBox SelectedIndex="0" MinWidth="175">
35+
<ComboBoxItem Content="Arial" />
36+
<ComboBoxItem Content="Calibri" />
37+
<ComboBoxItem Content="JetBrains Mono" />
38+
<ComboBoxItem Content="Roboto" />
39+
<ComboBoxItem Content="Sergio UI" />
40+
<ComboBoxItem Content="Sergio UI Semibold" />
41+
</ComboBox>
42+
</AppBarElementContainer>
43+
<AppBarElementContainer>
44+
<TextBox PlaceholderText="Size"/>
45+
</AppBarElementContainer>
46+
<AppBarToggleButton Icon="Bold" Label="Bold" />
47+
<AppBarToggleButton Icon="Italic" Label="Italic" />
48+
<AppBarToggleButton Icon="Underline" Label="Underline" />
49+
</controls:TabbedCommandBarItem>
50+
<controls:TabbedCommandBarItem Header="Insert">
51+
<AppBarButton Icon="Pictures" Label="Pictures">
52+
<AppBarButton.Flyout>
53+
<MenuFlyout Placement="BottomEdgeAlignedLeft">
54+
<MenuFlyoutItem Text="This Device">
55+
<MenuFlyoutItem.Icon>
56+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEC4E;" />
57+
</MenuFlyoutItem.Icon>
58+
</MenuFlyoutItem>
59+
<MenuFlyoutItem Text="Stock Images">
60+
<MenuFlyoutItem.Icon>
61+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE721;" />
62+
</MenuFlyoutItem.Icon>
63+
</MenuFlyoutItem>
64+
<MenuFlyoutItem Icon="Globe" Text="Online Pictures" />
65+
</MenuFlyout>
66+
</AppBarButton.Flyout>
67+
</AppBarButton>
68+
<AppBarButton Label="Shapes">
69+
<AppBarButton.Icon>
70+
<FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x25A1;" />
71+
</AppBarButton.Icon>
72+
</AppBarButton>
73+
<AppBarButton Label="Icons">
74+
<AppBarButton.Icon>
75+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED58;" />
76+
</AppBarButton.Icon>
77+
</AppBarButton>
78+
<AppBarButton Label="3D Models">
79+
<AppBarButton.Icon>
80+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
81+
</AppBarButton.Icon>
82+
</AppBarButton>
83+
<AppBarSeparator/>
84+
<AppBarButton Label="Add-ins">
85+
<AppBarButton.Icon>
86+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xECAA;" />
87+
</AppBarButton.Icon>
88+
</AppBarButton>
89+
<controls:TabbedCommandBarItem.SecondaryCommands>
90+
<AppBarButton Icon="Add" Label="New item" />
91+
</controls:TabbedCommandBarItem.SecondaryCommands>
92+
</controls:TabbedCommandBarItem>
93+
<controls:TabbedCommandBarItem x:Name="PictureFormat"
94+
Header="Picture Format"
95+
IsContextual="True"
96+
Visibility="Collapsed">
97+
<AppBarButton Label="Remove Background">
98+
<AppBarButton.Icon>
99+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE706;" />
100+
</AppBarButton.Icon>
101+
</AppBarButton>
102+
<AppBarButton Label="Picture Effects">
103+
<AppBarButton.Icon>
104+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
105+
</AppBarButton.Icon>
106+
</AppBarButton>
107+
<AppBarButton Label="Rotate">
108+
<AppBarButton.Icon>
109+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7AD;" />
110+
</AppBarButton.Icon>
111+
</AppBarButton>
112+
<AppBarElementContainer>
113+
<SplitButton>
114+
<StackPanel Spacing="12" Orientation="Horizontal">
115+
<FontIcon FontSize="16" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
116+
<TextBlock FontSize="12" Text="Crop"/>
117+
</StackPanel>
118+
<SplitButton.Flyout>
119+
<MenuFlyout>
120+
<MenuFlyoutItem Text="Crop">
121+
<MenuFlyoutItem.Icon>
122+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
123+
</MenuFlyoutItem.Icon>
124+
</MenuFlyoutItem>
125+
<MenuFlyoutItem Text="Crop to Shape">
126+
<MenuFlyoutItem.Icon>
127+
<FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF407;" />
128+
</MenuFlyoutItem.Icon>
129+
</MenuFlyoutItem>
130+
<MenuFlyoutItem Text="Aspect Ratio" />
131+
<MenuFlyoutSeparator/>
132+
<MenuFlyoutItem Text="Fill" />
133+
<MenuFlyoutItem Text="Fit" />
134+
</MenuFlyout>
135+
</SplitButton.Flyout>
136+
</SplitButton>
137+
</AppBarElementContainer>
138+
</controls:TabbedCommandBarItem>
139+
</controls:TabbedCommandBar.MenuItems>
140+
</controls:TabbedCommandBar>
141+
142+
<Grid Grid.Row="1">
143+
<ToggleSwitch x:Name="ContextualToggle" IsOn="{Binding Visibility, ElementName=PictureFormat, Converter={StaticResource VisBoolConverter}, Mode=TwoWay}"
144+
OffContent="Contextual Tab Off" OnContent="Contextual Tab On"/>
145+
</Grid>
146+
</Grid>
147+
</Page>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png

2.88 KB
Loading

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
55
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
6+
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
67
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
78
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
89
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
@@ -17,6 +18,8 @@
1718
<!-- Put a copy of any controls/resources required for XAML Parsing within XAML Only Samples -->
1819
<!-- This page is never loaded by the app, but used to trick the compiler... -->
1920
<Page.Resources>
21+
<converters:VisibilityToBoolConverter x:Key="VisibilityBoolConverter" />
22+
<converters:BoolToVisibilityConverter x:Key="BoolVisibilityConverter" />
2023
<triggers:CompareStateTrigger x:Key="CompareStateTrigger" />
2124
<triggers:IsEqualStateTrigger x:Key="IsEqualStateTrigger" />
2225
<triggers:IsNotEqualStateTrigger x:Key="IsNotEqualStateTrigger" />
@@ -34,17 +37,17 @@
3437
<ani:OpacityAnimation />
3538
<ani:StartAnimationActivity />
3639
<ani:InvokeActionsActivity />
37-
<ani:ClipAnimation/>
38-
<ani:BlurEffectAnimation/>
39-
<ani:SaturationEffectAnimation/>
40-
<ani:AnimationScope/>
41-
<ani:ExposureEffectAnimation/>
40+
<ani:ClipAnimation />
41+
<ani:BlurEffectAnimation />
42+
<ani:SaturationEffectAnimation />
43+
<ani:AnimationScope />
44+
<ani:ExposureEffectAnimation />
4245
</ani:AnimationSet>
4346
</ani:Explicit.Animations>
4447
<media:UIElementExtensions.VisualFactory>
4548
<media:PipelineVisualFactory>
4649
<media:OpacityEffect />
47-
<media:ExposureEffect/>
50+
<media:ExposureEffect />
4851
</media:PipelineVisualFactory>
4952
</media:UIElementExtensions.VisualFactory>
5053

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,15 @@
453453
"XamlCodeFile": "TokenizingTextBoxXaml.bind",
454454
"Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png",
455455
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TokenizingTextBox.md"
456+
},
457+
{
458+
"Name": "TabbedCommandBar",
459+
"Subcategory": "Menus and Toolbars",
460+
"About": "A control for displaying multiple CommandBars in the same space, like Microsoft Office's ribbon.",
461+
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar",
462+
"XamlCodeFile": "/SamplePages/TabbedCommandBar/TabbedCommandBar.bind",
463+
"Icon": "/SamplePages/TabbedCommandBar/TabbedCommandBar.png",
464+
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TabbedCommandBar.md"
456465
}
457466
]
458467
},

‎Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBar.Metadata.cs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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 System.ComponentModel;
6+
7+
using Microsoft.Toolkit.Uwp.UI.Controls.Design.Properties;
8+
9+
using Microsoft.VisualStudio.DesignTools.Extensibility;
10+
using Microsoft.VisualStudio.DesignTools.Extensibility.Metadata;
11+
12+
namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
13+
{
14+
internal class TabbedCommandBarMetadata : AttributeTableBuilder
15+
{
16+
public TabbedCommandBarMetadata()
17+
: base()
18+
{
19+
AddCallback(ControlTypes.TabbedCommandBar,
20+
b =>
21+
{
22+
b.AddCustomAttributes(nameof(TabbedCommandBar.CollapsedState), new CategoryAttribute(Resources.CategoryAppearance));
23+
b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
24+
}
25+
);
26+
}
27+
}
28+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBar.Typedata.cs

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 System;
6+
7+
namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
8+
{
9+
internal static partial class ControlTypes
10+
{
11+
internal const string TabbedCommandBar = RootNamespace + "." + nameof(TabbedCommandBar);
12+
}
13+
14+
internal static class TabbedCommandBar
15+
{
16+
internal const string CollapsedState = nameof(CollapsedState);
17+
}
18+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBarItem.Metadata.cs

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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 System.ComponentModel;
6+
7+
using Microsoft.Toolkit.Uwp.UI.Controls.Design.Properties;
8+
9+
using Microsoft.VisualStudio.DesignTools.Extensibility;
10+
using Microsoft.VisualStudio.DesignTools.Extensibility.Metadata;
11+
12+
namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
13+
{
14+
internal class TabbedCommandBarItemMetadata : AttributeTableBuilder
15+
{
16+
public TabbedCommandBarItemMetadata()
17+
: base()
18+
{
19+
AddCallback(ControlTypes.TabbedCommandBarItem,
20+
b =>
21+
{
22+
// TODO
23+
// b.AddCustomAttributes(nameof(TabbedCommandBarItem.Header), new CategoryAttribute(Resources.CategoryCommon));
24+
// b.AddCustomAttributes(nameof(TabbedCommandBarItem.Footer), new CategoryAttribute(Resources.CategoryCommon));
25+
b.AddCustomAttributes(nameof(TabbedCommandBarItem.IsContextual), new CategoryAttribute(Resources.CategoryCommon));
26+
b.AddCustomAttributes(nameof(TabbedCommandBarItem.OverflowButtonAlignment),
27+
new CategoryAttribute(Resources.CategoryLayout),
28+
new EditorBrowsableAttribute(EditorBrowsableState.Advanced)
29+
);
30+
b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
31+
}
32+
);
33+
}
34+
}
35+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBarItem.Typedata.cs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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 System;
6+
7+
namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
8+
{
9+
internal static partial class ControlTypes
10+
{
11+
internal const string TabbedCommandBarItem = RootNamespace + "." + nameof(TabbedCommandBarItem);
12+
}
13+
14+
internal static class TabbedCommandBarItem
15+
{
16+
internal const string Header = nameof(Header);
17+
internal const string Footer = nameof(Footer);
18+
internal const string IsContextual = nameof(IsContextual);
19+
internal const string OverflowButtonAlignment = nameof(OverflowButtonAlignment);
20+
}
21+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.DesignTools.csproj

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@
119119
<Compile Include="Controls\RotatorTile.Typedata.cs" />
120120
<Compile Include="Controls\ScrollHeader.Metadata.cs" />
121121
<Compile Include="Controls\ScrollHeader.Typedata.cs" />
122+
<Compile Include="Controls\TabbedCommandBar.Metadata.cs" />
123+
<Compile Include="Controls\TabbedCommandBar.Typedata.cs" />
124+
<Compile Include="Controls\TabbedCommandBarItem.Metadata.cs" />
125+
<Compile Include="Controls\TabbedCommandBarItem.Typedata.cs" />
122126
<Compile Include="Controls\TextToolbar.Metadata.cs" />
123127
<Compile Include="Controls\TextToolbar.Typedata.cs" />
124128
<Compile Include="Controls\TileControl.Metadata.cs" />

0 commit comments

Comments
 (0)