Skip to content

[Feature] Add TabbedCommandBar (ribbon) control #3556

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.

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

Merged
42 commits merged into from
Feb 10, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
889a59f
Added initial control
yoshiask Nov 6, 2020
a65b0a7
Added basic sample
yoshiask Nov 6, 2020
2b010ab
Moved TabbedCommandBarItem styles into separate ResourceDictionary
yoshiask Nov 6, 2020
4d8e9bf
Switch TabbedCommandBar to be a NavigationView
yoshiask Nov 6, 2020
a333234
Removed unused _ribbonNavigationView
yoshiask Nov 6, 2020
3ef7037
Merge branch 'master' into feature/tabbedcommandbar
Kyaa-dost Nov 7, 2020
f14dd7e
Fix styles and animations, allow overriding of default styles
yoshiask Nov 7, 2020
43dccca
Merge branch 'feature/tabbedcommandbar' of https://github.com/yoshias…
yoshiask Nov 7, 2020
94c5f4f
Merge branch 'master' into feature/tabbedcommandbar
yoshiask Nov 13, 2020
8779ff3
Merge branch 'master' into feature/tabbedcommandbar
yoshiask Nov 26, 2020
ccd7f0b
Added IsContextual and OverflowButtonAlignment properties
yoshiask Jan 7, 2021
134d14e
Merge branch 'master' into pr/3556
yoshiask Jan 8, 2021
670bc7c
Merge branch 'master' into feature/tabbedcommandbar
yoshiask Jan 13, 2021
e696003
Use `nameof` for ContentBackground dp
yoshiask Jan 14, 2021
ae55aed
Merge branch 'master' into feature/tabbedcommandbar
Kyaa-dost Jan 14, 2021
758d123
Merge branch 'master' into feature/tabbedcommandbar
michael-hawker Jan 21, 2021
92afe43
Use expression body
yoshiask Jan 22, 2021
7d535d9
Use pattern matching
yoshiask Jan 22, 2021
2f54867
Change ComboBox in sample to use MinWidth
yoshiask Jan 22, 2021
308f067
Merge branch 'master' into feature/tabbedcommandbar
yoshiask Feb 1, 2021
9060e8a
Fixed a bug where the area behind CommandBars during animations would…
yoshiask Feb 5, 2021
66274ca
Added AppBarSplitButtonStyle; Added contextual tab to sample; Pass Vi…
yoshiask Feb 8, 2021
1f352bf
Moved TabbedCommandBarItem default templates to TabbedCommandBarItem.…
yoshiask Feb 8, 2021
6eec4b7
Added contextual tab toggle to sample
yoshiask Feb 8, 2021
65362f0
Implemented logic to prevent hidden tabs from being selected
yoshiask Feb 8, 2021
d1fc7e5
Removed unused TemplatePart
yoshiask Feb 8, 2021
3427f41
Removed unused Footer property on TabbedCommandBarItem
yoshiask Feb 8, 2021
8762353
Updated to follow new sample page guidelines
yoshiask Feb 8, 2021
022dcff
Removed weird ItemGroup from Controls project
yoshiask Feb 8, 2021
490ff9c
Added TabbedCommandBar to controls list in description
yoshiask Feb 8, 2021
3786b84
Added basic designer metadata
yoshiask Feb 8, 2021
ebe4b09
Exposed command alignment as property; Update internal alignments on …
yoshiask Feb 8, 2021
3e91302
Merge branch 'master' into feature/tabbedcommandbar
yoshiask Feb 8, 2021
12b5068
Moved TabbedCommandBar sample to "Menus and Toolbars" subcategory
yoshiask Feb 8, 2021
4fc1f0f
Added overrideable resources for colors/brushes and some styles/templ…
yoshiask Feb 8, 2021
c176aff
Renamed AcrylicTabbedCommandBarItemStyle for consistency
yoshiask Feb 8, 2021
5bb806e
Updated sample to use ColorPickerButton and only Segoe MDL2 icons
yoshiask Feb 9, 2021
57c20d4
Inverted contextual toggle in sample; Fixed incorrect background duri…
yoshiask Feb 9, 2021
3438d45
Remove Single Line Comment causing StyleCop Issue
michael-hawker Feb 10, 2021
68fd805
Fix Contextual Tab Sample Page
michael-hawker Feb 10, 2021
8ba0622
Merge branch 'master' into feature/tabbedcommandbar
yoshiask Feb 10, 2021
71efaa7
Merge branch 'master' into feature/tabbedcommandbar
Rosuavio Feb 10, 2021
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
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 9 additions & 6 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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" />
Expand All @@ -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>

Expand Down
9 changes: 9 additions & 0 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]
},
Expand Down
Original file line number Diff line number Diff line change
@@ -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));
}
);
}
}
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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));
}
);
}
}
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading