Porting TabbedCommandBar

components/TabbedCommandBar/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/TabbedCommandBar/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>

components/TabbedCommandBar/samples/TabbedCommandBar.Samples.csproj

@@ -0,0 +1,21 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>TabbedCommandBar</ToolkitComponentName>
+  </PropertyGroup>
+
+   <ItemGroup>
+    <ProjectReference Include="..\..\Extensions\src\CommunityToolkit.WinUI.Extensions.csproj"></ProjectReference>
+  </ItemGroup>
+
+<ItemGroup>
+    <None Remove="Assets\TabbedCommandBar.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Assets\TabbedCommandBar.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+</Project>

components/TabbedCommandBar/samples/TabbedCommandBar.md

@@ -0,0 +1,30 @@
+---
+title: TabbedCommandBar
+author: yoshiask
+description: A control for displaying multiple CommandBars in the same space, like Microsoft Office's ribbon.
+keywords: TabbedCommandBar, Control, Layout, commandbar, ribbon
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 0
+issue-id: 0
+icon: Assets/TabbedCommandBar.png
+---
+
+The [TabbedCommandBar](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tabbedcommandbar) displays a set of [TabbedCommandBarItem](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tabbedcommandbaritem) in a shared container found in many productivity type apps. It is based off of [NavigationView](/windows/uwp/design/controls-and-patterns/navigationview).
+
+`TabbedCommandBarItem` can be used to display certain items, and its `IsContextual` property can be set to change the default style into an item that is known from the Office apps to highlight to a user that certain context options are available. 
+> [!Sample TabbedCommandBarSample]
+
+## Remarks
+
+The TabbedCommandBar automatically applies styles to known common controls inside an `AppBarElementContainer`. The following elements have styles:
+
+- ComboBox
+- SplitButton
+
+> [!NOTE]
+> The ComboBox does not allow changing its selection while it is in the overflow flyout.
+
+The `TabbedCommandBar` does not add any of its own properties. See [NavigationView](/uwp/api/windows.ui.xaml.controls.navigationview#properties) for a list of accessible properties.

components/TabbedCommandBar/samples/TabbedCommandBarSample.xaml

@@ -0,0 +1,127 @@
+<!--  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="TabbedCommandBarExperiment.Samples.TabbedCommandBarSample"
+      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:TabbedCommandBarExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+    <Grid VerticalAlignment="Top">
+        <controls:TabbedCommandBar>
+            <controls:TabbedCommandBar.AutoSuggestBox>
+                <AutoSuggestBox AutomationProperties.Name="Search"
+                                QueryIcon="Find" />
+            </controls:TabbedCommandBar.AutoSuggestBox>
+            <controls:TabbedCommandBar.PaneFooter>
+                <CommandBar Background="Transparent"
+                            DefaultLabelPosition="Right">
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE72D;}"
+                                  Label="Share" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE8BD;}"
+                                  Label="Comments" />
+                </CommandBar>
+            </controls:TabbedCommandBar.PaneFooter>
+            <controls:TabbedCommandBar.MenuItems>
+                <controls:TabbedCommandBarItem Header="Home">
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE7A7;}"
+                                  Label="Undo" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE7A6;}"
+                                  Label="Redo" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE77F;}"
+                                  Label="Paste" />
+                    <AppBarSeparator />
+                    <!--  TO DO: Enable when ColorPicker is merged  -->
+                    <!--<AppBarElementContainer>
+                        <controls:ColorPickerButton SelectedColor="{ThemeResource Brand-Color}"/>
+                    </AppBarElementContainer>-->
+                    <AppBarElementContainer>
+                        <ComboBox MinWidth="175"
+                                  SelectedIndex="0">
+                            <ComboBoxItem Content="Arial" />
+                            <ComboBoxItem Content="Calibri" />
+                            <ComboBoxItem Content="JetBrains Mono" />
+                            <ComboBoxItem Content="Roboto" />
+                            <ComboBoxItem Content="Segoe UI" />
+                            <ComboBoxItem Content="Segoe UI Semibold" />
+                        </ComboBox>
+                    </AppBarElementContainer>
+                    <AppBarElementContainer>
+                        <TextBox PlaceholderText="Size" />
+                    </AppBarElementContainer>
+                    <AppBarToggleButton Icon="{ui:FontIcon Glyph=&#xE8DD;}"
+                                        Label="Bold" />
+                    <AppBarToggleButton Icon="{ui:FontIcon Glyph=&#xE8DB;}"
+                                        Label="Italic" />
+                    <AppBarToggleButton Icon="{ui:FontIcon Glyph=&#xE8DC;}"
+                                        Label="Underline" />
+                </controls:TabbedCommandBarItem>
+                <controls:TabbedCommandBarItem Header="Insert">
+                    <AppBarButton Icon="Pictures"
+                                  Label="Pictures">
+                        <AppBarButton.Flyout>
+                            <MenuFlyout Placement="BottomEdgeAlignedLeft">
+                                <MenuFlyoutItem Icon="{ui:FontIcon Glyph=&#xEC4E;}"
+                                                Text="This device" />
+                                <MenuFlyoutItem Icon="{ui:FontIcon Glyph=&#xE721;}"
+                                                Text="Stock images" />
+                                <MenuFlyoutItem Icon="{ui:FontIcon Glyph=&#xE774;}"
+                                                Text="Online pictures" />
+                            </MenuFlyout>
+                        </AppBarButton.Flyout>
+                    </AppBarButton>
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xF156;}"
+                                  Label="Shapes" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xED58;}"
+                                  Label="Icons" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xF158;}"
+                                  Label="3D Models" />
+                    <AppBarSeparator />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xECAA;}"
+                                  Label="Add-ins" />
+                    <controls:TabbedCommandBarItem.SecondaryCommands>
+                        <AppBarButton Icon="{ui:FontIcon Glyph=&#xE710;}"
+                                      Label="New item" />
+                    </controls:TabbedCommandBarItem.SecondaryCommands>
+                </controls:TabbedCommandBarItem>
+                <controls:TabbedCommandBarItem x:Name="PictureFormat"
+                                               Header="Picture Format"
+                                               IsContextual="True"
+                                               Visibility="{x:Bind ContextualItem, Mode=OneWay}">
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE706;}"
+                                  Label="Remove background" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xF4A5;}"
+                                  Label="Picture effects" />
+                    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE7AD;}"
+                                  Label="Rotate" />
+                    <AppBarElementContainer>
+                        <muxc:SplitButton>
+                            <StackPanel Orientation="Horizontal"
+                                        Spacing="12">
+                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                          FontSize="16"
+                                          Glyph="&#xE7A8;" />
+                                <TextBlock FontSize="12"
+                                           Text="Crop" />
+                            </StackPanel>
+                            <muxc:SplitButton.Flyout>
+                                <MenuFlyout>
+                                    <MenuFlyoutItem Icon="{ui:FontIcon Glyph=&#xE7A8;}"
+                                                    Text="Crop" />
+                                    <MenuFlyoutItem Icon="{ui:FontIcon Glyph=&#xF407;}"
+                                                    Text="Crop to Shape" />
+                                    <MenuFlyoutItem Text="Aspect Ratio" />
+                                    <MenuFlyoutSeparator />
+                                    <MenuFlyoutItem Text="Fill" />
+                                    <MenuFlyoutItem Text="Fit" />
+                                </MenuFlyout>
+                            </muxc:SplitButton.Flyout>
+                        </muxc:SplitButton>
+                    </AppBarElementContainer>
+                </controls:TabbedCommandBarItem>
+            </controls:TabbedCommandBar.MenuItems>
+        </controls:TabbedCommandBar>
+    </Grid>
+</Page>

components/TabbedCommandBar/samples/TabbedCommandBarSample.xaml.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 CommunityToolkit.WinUI.Controls;
+
+namespace TabbedCommandBarExperiment.Samples;
+
+[ToolkitSampleBoolOption("ContextualItem", true, Title = "Show contextual item")]
+
+[ToolkitSample(id: nameof(TabbedCommandBarSample), "TabbedCommandBar", description: $"A sample for showing how to create and use a {nameof(TabbedCommandBar)} control.")]
+public sealed partial class TabbedCommandBarSample : Page
+{
+    public TabbedCommandBarSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/TabbedCommandBar/src/CommunityToolkit.WinUI.Controls.TabbedCommandBar.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>TabbedCommandBar</ToolkitComponentName>
+    <Description>This package contains TabbedCommandBar.</Description>
+
+    <!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
+    <RootNamespace>CommunityToolkit.WinUI.Controls.TabbedCommandBarRns</RootNamespace>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's source project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
+
+  <PropertyGroup>
+      <PackageId>$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)</PackageId>
+  </PropertyGroup>
+</Project>

components/TabbedCommandBar/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>

components/TabbedCommandBar/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>