[Feature] Add TabbedCommandBar (ribbon) control

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

@@ -267,6 +267,7 @@
     <Content Include="Icons\More.png" />
     <Content Include="Icons\Notifications.png" />
     <Content Include="Icons\Services.png" />
+    <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.png" />
     <Content Include="SamplePages\Animations\Effects\FadeBehavior.png" />
     <Content Include="SamplePages\ColorPicker\ColorPicker.png" />
     <Content Include="SamplePages\TilesBrush\TilesBrush.png" />
@@ -980,6 +981,9 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.bind">
+      <SubType>Designer</SubType>
+    </Content>
     <Page Include="SamplePages\CanvasPathGeometry\CanvasPathGeometryPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -0,0 +1,147 @@
+<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
+      mc:Ignorable="d">
+    <Page.Resources>
+      <converters:VisibilityToBoolConverter x:Key="VisBoolConverter"/>
+    </Page.Resources>
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition/>
+        </Grid.RowDefinitions>
+
+        <controls:TabbedCommandBar>
+            <controls:TabbedCommandBar.PaneFooter>
+                <CommandBar Background="Transparent" DefaultLabelPosition="Right">
+                    <AppBarButton Label="Share" Icon="Share"/>
+                    <AppBarButton Label="Comments" Icon="Message"/>
+                </CommandBar>
+            </controls:TabbedCommandBar.PaneFooter>
+            <controls:TabbedCommandBar.MenuItems>
+                <controls:TabbedCommandBarItem Header="Home">
+                    <AppBarButton Icon="Undo" Label="Undo"/>
+                    <AppBarButton Icon="Redo" Label="Redo"/>
+                    <AppBarButton Icon="Paste" Label="Paste"/>
+                    <AppBarSeparator />
+                    <AppBarElementContainer>
+                        <controls:ColorPickerButton SelectedColor="{ThemeResource Brand-Color}"/>
+                    </AppBarElementContainer>
+                    <AppBarElementContainer>
+                        <ComboBox SelectedIndex="0" MinWidth="175">
+                            <ComboBoxItem Content="Arial" />
+                            <ComboBoxItem Content="Calibri" />
+                            <ComboBoxItem Content="JetBrains Mono" />
+                            <ComboBoxItem Content="Roboto" />
+                            <ComboBoxItem Content="Sergio UI" />
+                            <ComboBoxItem Content="Sergio UI Semibold" />
+                        </ComboBox>
+                    </AppBarElementContainer>
+                    <AppBarElementContainer>
+                        <TextBox PlaceholderText="Size"/>
+                    </AppBarElementContainer>
+                    <AppBarToggleButton Icon="Bold" Label="Bold" />
+                    <AppBarToggleButton Icon="Italic" Label="Italic" />
+                    <AppBarToggleButton Icon="Underline" Label="Underline" />
+                </controls:TabbedCommandBarItem>
+                <controls:TabbedCommandBarItem Header="Insert">
+                    <AppBarButton Icon="Pictures" Label="Pictures">
+                        <AppBarButton.Flyout>
+                            <MenuFlyout Placement="BottomEdgeAlignedLeft">
+                                <MenuFlyoutItem Text="This Device">
+                                    <MenuFlyoutItem.Icon>
+                                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEC4E;" />
+                                    </MenuFlyoutItem.Icon>
+                                </MenuFlyoutItem>
+                                <MenuFlyoutItem Text="Stock Images">
+                                    <MenuFlyoutItem.Icon>
+                                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE721;" />
+                                    </MenuFlyoutItem.Icon>
+                                </MenuFlyoutItem>
+                                <MenuFlyoutItem Icon="Globe" Text="Online Pictures" />
+                            </MenuFlyout>
+                        </AppBarButton.Flyout>
+                    </AppBarButton>
+                    <AppBarButton Label="Shapes">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x25A1;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="Icons">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED58;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="3D Models">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarSeparator/>
+                    <AppBarButton Label="Add-ins">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xECAA;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <controls:TabbedCommandBarItem.SecondaryCommands>
+                        <AppBarButton Icon="Add" Label="New item" />
+                    </controls:TabbedCommandBarItem.SecondaryCommands>
+                </controls:TabbedCommandBarItem>
+                <controls:TabbedCommandBarItem x:Name="PictureFormat"
+                                               Header="Picture Format"
+                                               IsContextual="True"
+                                               Visibility="Collapsed">
+                    <AppBarButton Label="Remove Background">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE706;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="Picture Effects">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="Rotate">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7AD;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarElementContainer>
+                        <SplitButton>
+                            <StackPanel Spacing="12" Orientation="Horizontal">
+                                <FontIcon FontSize="16" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
+                                <TextBlock FontSize="12" Text="Crop"/>
+                            </StackPanel>
+                            <SplitButton.Flyout>
+                                <MenuFlyout>
+                                    <MenuFlyoutItem Text="Crop">
+                                        <MenuFlyoutItem.Icon>
+                                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Text="Crop to Shape">
+                                        <MenuFlyoutItem.Icon>
+                                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF407;" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Text="Aspect Ratio" />
+                                    <MenuFlyoutSeparator/>
+                                    <MenuFlyoutItem Text="Fill" />
+                                    <MenuFlyoutItem Text="Fit" />
+                                </MenuFlyout>
+                            </SplitButton.Flyout>
+                        </SplitButton>
+                    </AppBarElementContainer>
+                </controls:TabbedCommandBarItem>
+            </controls:TabbedCommandBar.MenuItems>
+        </controls:TabbedCommandBar>
+
+        <Grid Grid.Row="1">
+            <ToggleSwitch x:Name="ContextualToggle" IsOn="{Binding Visibility, ElementName=PictureFormat, Converter={StaticResource VisBoolConverter}, Mode=TwoWay}"
+                          OffContent="Contextual Tab Off" OnContent="Contextual Tab On"/>
+        </Grid>
+    </Grid>
+</Page>

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

@@ -3,6 +3,7 @@
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
       xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+      xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
@@ -17,6 +18,8 @@
     <!--  Put a copy of any controls/resources required for XAML Parsing within XAML Only Samples  -->
     <!--  This page is never loaded by the app, but used to trick the compiler...  -->
     <Page.Resources>
+        <converters:VisibilityToBoolConverter x:Key="VisibilityBoolConverter" />
+        <converters:BoolToVisibilityConverter x:Key="BoolVisibilityConverter" />
         <triggers:CompareStateTrigger x:Key="CompareStateTrigger" />
         <triggers:IsEqualStateTrigger x:Key="IsEqualStateTrigger" />
         <triggers:IsNotEqualStateTrigger x:Key="IsNotEqualStateTrigger" />
@@ -34,17 +37,17 @@
                 <ani:OpacityAnimation />
                 <ani:StartAnimationActivity />
                 <ani:InvokeActionsActivity />
-                <ani:ClipAnimation/>
-                <ani:BlurEffectAnimation/>
-                <ani:SaturationEffectAnimation/>
-                <ani:AnimationScope/>
-                <ani:ExposureEffectAnimation/>
+                <ani:ClipAnimation />
+                <ani:BlurEffectAnimation />
+                <ani:SaturationEffectAnimation />
+                <ani:AnimationScope />
+                <ani:ExposureEffectAnimation />
             </ani:AnimationSet>
         </ani:Explicit.Animations>
         <media:UIElementExtensions.VisualFactory>
             <media:PipelineVisualFactory>
                 <media:OpacityEffect />
-                <media:ExposureEffect/>
+                <media:ExposureEffect />
             </media:PipelineVisualFactory>
         </media:UIElementExtensions.VisualFactory>
 

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

@@ -453,6 +453,15 @@
         "XamlCodeFile": "TokenizingTextBoxXaml.bind",
         "Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TokenizingTextBox.md"
+      },
+      {
+        "Name": "TabbedCommandBar",
+        "Subcategory": "Menus and Toolbars",
+        "About": "A control for displaying multiple CommandBars in the same space, like Microsoft Office's ribbon.",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar",
+        "XamlCodeFile": "/SamplePages/TabbedCommandBar/TabbedCommandBar.bind",
+        "Icon": "/SamplePages/TabbedCommandBar/TabbedCommandBar.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TabbedCommandBar.md"
       }
     ]
   },

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

@@ -0,0 +1,28 @@
+// 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.ComponentModel;
+
+using Microsoft.Toolkit.Uwp.UI.Controls.Design.Properties;
+
+using Microsoft.VisualStudio.DesignTools.Extensibility;
+using Microsoft.VisualStudio.DesignTools.Extensibility.Metadata;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal class TabbedCommandBarMetadata : AttributeTableBuilder
+    {
+        public TabbedCommandBarMetadata()
+            : base()
+        {
+            AddCallback(ControlTypes.TabbedCommandBar,
+                b =>
+                {
+                    b.AddCustomAttributes(nameof(TabbedCommandBar.CollapsedState), new CategoryAttribute(Resources.CategoryAppearance));
+                    b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
+                }
+            );
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+// 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;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal static partial class ControlTypes
+    {
+        internal const string TabbedCommandBar = RootNamespace + "." + nameof(TabbedCommandBar);
+    }
+
+    internal static class TabbedCommandBar
+    {
+        internal const string CollapsedState = nameof(CollapsedState);
+    }
+}

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

@@ -0,0 +1,35 @@
+// 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.ComponentModel;
+
+using Microsoft.Toolkit.Uwp.UI.Controls.Design.Properties;
+
+using Microsoft.VisualStudio.DesignTools.Extensibility;
+using Microsoft.VisualStudio.DesignTools.Extensibility.Metadata;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal class TabbedCommandBarItemMetadata : AttributeTableBuilder
+    {
+        public TabbedCommandBarItemMetadata()
+            : base()
+        {
+            AddCallback(ControlTypes.TabbedCommandBarItem,
+                b =>
+                {
+                    // TODO
+                    // b.AddCustomAttributes(nameof(TabbedCommandBarItem.Header), new CategoryAttribute(Resources.CategoryCommon));
+                    // b.AddCustomAttributes(nameof(TabbedCommandBarItem.Footer), new CategoryAttribute(Resources.CategoryCommon));
+                    b.AddCustomAttributes(nameof(TabbedCommandBarItem.IsContextual), new CategoryAttribute(Resources.CategoryCommon));
+                    b.AddCustomAttributes(nameof(TabbedCommandBarItem.OverflowButtonAlignment),
+                        new CategoryAttribute(Resources.CategoryLayout),
+                        new EditorBrowsableAttribute(EditorBrowsableState.Advanced)
+                        );
+                    b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
+                }
+            );
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+// 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;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal static partial class ControlTypes
+    {
+        internal const string TabbedCommandBarItem = RootNamespace + "." + nameof(TabbedCommandBarItem);
+    }
+
+    internal static class TabbedCommandBarItem
+    {
+        internal const string Header = nameof(Header);
+        internal const string Footer = nameof(Footer);
+        internal const string IsContextual = nameof(IsContextual);
+        internal const string OverflowButtonAlignment = nameof(OverflowButtonAlignment);
+    }
+}

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

@@ -119,6 +119,10 @@
     <Compile Include="Controls\RotatorTile.Typedata.cs" />
     <Compile Include="Controls\ScrollHeader.Metadata.cs" />
     <Compile Include="Controls\ScrollHeader.Typedata.cs" />
+    <Compile Include="Controls\TabbedCommandBar.Metadata.cs" />
+    <Compile Include="Controls\TabbedCommandBar.Typedata.cs" />
+    <Compile Include="Controls\TabbedCommandBarItem.Metadata.cs" />
+    <Compile Include="Controls\TabbedCommandBarItem.Typedata.cs" />
     <Compile Include="Controls\TextToolbar.Metadata.cs" />
     <Compile Include="Controls\TextToolbar.Typedata.cs" />
     <Compile Include="Controls\TileControl.Metadata.cs" />

Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj

@@ -32,6 +32,7 @@
         - RemoteDevicePicker: Remote Device Picker Control for Project Rome.
         - RotatorTile: Rotates through a set of items one-by-one like a live-tile.
         - StaggeredPanel: Layout of items in a column approach where an item will be added to whichever column has used the least amount of space.
+        - TabbedCommandBar: A ribbon-like control that displays a tabbed collection of CommandBars
         - TextToolbar: A Toolbar for Editing Text attached to a RichEditBox. It can format RTF, Markdown, or use a Custom Formatter.
         - TileControl: A ContentControl that show an image repeated many times.
         - TokenizingTextBox: An AutoSuggestBox like control which places entered input into easily removed containers for contacts or tags.