[Feature] Add TabbedCommandBar (ribbon) control #3551
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <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" | ||
| mc:Ignorable="d"> | ||
| <Grid> | ||
| <controls:TabbedCommandBar> | ||
| <controls:TabbedCommandBar.Footer> | ||
| <CommandBar Background="Transparent" DefaultLabelPosition="Right"> | ||
| <AppBarButton Label="Share" Icon="Share"/> | ||
| <AppBarButton Label="Comments" Icon="Message"/> | ||
| </CommandBar> | ||
| </controls:TabbedCommandBar.Footer> | ||
| <controls:TabbedCommandBar.Resources> | ||
| <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlChromeMediumLowAcrylicWindowMediumBrush" /> | ||
| <StaticResource x:Key="TabbedCommandBarContentBackground" ResourceKey="SystemControlChromeLowAcrylicWindowBrush" /> | ||
| </controls:TabbedCommandBar.Resources> | ||
| <controls:TabbedCommandBarItem Header="Home"> | ||
| <AppBarButton Icon="Undo" Label="Undo"/> | ||
| <AppBarButton Icon="Redo" Label="Redo"/> | ||
| <AppBarButton Icon="Paste" Label="Paste"/> | ||
| <AppBarSeparator /> | ||
| <AppBarElementContainer> | ||
| <ComboBox SelectedIndex="0"> | ||
| <ComboBoxItem Content="Arial" /> | ||
| <ComboBoxItem Content="Calibri" /> | ||
| <ComboBoxItem Content="JetBrains Mono" /> | ||
| <ComboBoxItem Content="Roboto" /> | ||
| <ComboBoxItem Content="Sergio UI" /> | ||
| <ComboBoxItem Content="Sergio UI Semibold" /> | ||
| </ComboBox> | ||
| </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="Segoe MDL2 Assets" Glyph="" /> | ||
| </MenuFlyoutItem.Icon> | ||
| </MenuFlyoutItem> | ||
| <MenuFlyoutItem Text="Stock Images"> | ||
| <MenuFlyoutItem.Icon> | ||
| <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> | ||
| </MenuFlyoutItem.Icon> | ||
| </MenuFlyoutItem> | ||
| <MenuFlyoutItem Icon="Globe" Text="Online Pictures" /> | ||
| </MenuFlyout> | ||
| </AppBarButton.Flyout> | ||
| </AppBarButton> | ||
| <AppBarButton Label="Shapes"> | ||
| <AppBarButton.Icon> | ||
| <FontIcon FontFamily="Segoe UI Symbol" Glyph="□" /> | ||
| </AppBarButton.Icon> | ||
| </AppBarButton> | ||
| <AppBarButton Label="Icons"> | ||
| <AppBarButton.Icon> | ||
| <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> | ||
| </AppBarButton.Icon> | ||
| </AppBarButton> | ||
| <AppBarButton Label="3D Models"> | ||
| <AppBarButton.Icon> | ||
| <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> | ||
| </AppBarButton.Icon> | ||
| </AppBarButton> | ||
| <AppBarSeparator/> | ||
| <AppBarButton Label="Add-ins"> | ||
| <AppBarButton.Icon> | ||
| <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> | ||
| </AppBarButton.Icon> | ||
| </AppBarButton> | ||
| <controls:TabbedCommandBarItem.SecondaryCommands> | ||
| <AppBarButton Icon="Add" Label="New item" /> | ||
| </controls:TabbedCommandBarItem.SecondaryCommands> | ||
| </controls:TabbedCommandBarItem> | ||
| </controls:TabbedCommandBar> | ||
| </Grid> | ||
| </Page> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TabbedCommandBarPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" | ||
| mc:Ignorable="d"> | ||
|
|
||
| <!-- Shallow Copy --> | ||
| <Grid Visibility="Collapsed"> | ||
| <controls:TabbedCommandBar> | ||
| <controls:TabbedCommandBarItem /> | ||
| </controls:TabbedCommandBar> | ||
| </Grid> | ||
| </Page> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.IO; | ||
| using System.Linq; | ||
| using System.Runtime.InteropServices.WindowsRuntime; | ||
| using Windows.Foundation; | ||
| using Windows.Foundation.Collections; | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
| using Windows.UI.Xaml.Controls.Primitives; | ||
| using Windows.UI.Xaml.Data; | ||
| using Windows.UI.Xaml.Input; | ||
| using Windows.UI.Xaml.Media; | ||
| using Windows.UI.Xaml.Navigation; | ||
|
|
||
| // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238 | ||
|
|
||
| namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages | ||
| { | ||
| /// <summary> | ||
| /// An empty page that can be used on its own or navigated to within a Frame. | ||
| /// </summary> | ||
| public sealed partial class TabbedCommandBarPage : Page | ||
| { | ||
| public TabbedCommandBarPage() | ||
| { | ||
| this.InitializeComponent(); | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| // 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 Microsoft.Windows.Design.Metadata; | ||
| using Microsoft.Windows.Design.PropertyEditing; | ||
| using System.ComponentModel; | ||
|
|
||
| namespace Microsoft.Toolkit.Uwp.UI.Controls.Design | ||
|
Member
|
||
| { | ||
| internal class TabbedCommandBarMetadata : AttributeTableBuilder | ||
| { | ||
| public TabbedCommandBarMetadata() | ||
| : base() | ||
| { | ||
| AddCallback(typeof(TabbedCommandBar), | ||
| b => | ||
| { | ||
| b.AddCustomAttributes(nameof(TabbedCommandBar.Items), | ||
| new PropertyOrderAttribute(PropertyOrder.Early), | ||
| new CategoryAttribute(Properties.Resources.CategoryCommon), | ||
| //The following is necessary because this is a collection of an abstract type, so we help | ||
| //the designer with populating supported types that can be added to the collection | ||
| new NewItemTypesAttribute(new System.Type[] { | ||
| typeof(TabbedCommandBarItem), | ||
| }), | ||
| new AlternateContentPropertyAttribute() | ||
| ); | ||
| } | ||
| ); | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| // 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.Collections.Generic; | ||
| using System.Linq; | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
| using Windows.UI.Xaml.Markup; | ||
| using Windows.UI.Xaml.Media.Animation; | ||
|
|
||
| namespace Microsoft.Toolkit.Uwp.UI.Controls | ||
| { | ||
| /// <summary> | ||
| /// A basic ribbon control that houses <see cref="TabbedCommandBarItem"/>s | ||
| /// </summary> | ||
| [ContentProperty(Name = nameof(Items))] | ||
| [TemplatePart(Name = "PART_RibbonNavigationView", Type = typeof(NavigationView))] | ||
| [TemplatePart(Name = "PART_RibbonContent", Type = typeof(ContentControl))] | ||
| [TemplatePart(Name = "PART_TabChangedStoryboard", Type = typeof(Storyboard))] | ||
| public class TabbedCommandBar : Control | ||
| { | ||
| private NavigationView _ribbonNavigationView = null; | ||
| private ContentControl _ribbonContent = null; | ||
| private Storyboard _tabChangedStoryboard = null; | ||
|
|
||
| // This should probably be made public at some point | ||
| private TabbedCommandBarItem SelectedTab { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Identifies the <see cref="Items"/> property. | ||
| /// </summary> | ||
| public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register( | ||
| nameof(Items), | ||
| typeof(IList<object>), | ||
| typeof(TabbedCommandBar), | ||
| new PropertyMetadata(new List<object>())); | ||
|
|
||
| /// <summary> | ||
| /// Identifies the <see cref="Footer"/> property. | ||
| /// </summary> | ||
| public static readonly DependencyProperty FooterProperty = DependencyProperty.Register( | ||
| nameof(Footer), | ||
| typeof(UIElement), | ||
| typeof(TabbedCommandBar), | ||
| new PropertyMetadata(new Border())); | ||
|
|
||
| // I would prefer this be an IList<TabbedCommandBarItem>, but Intellisense really doesn't like that. | ||
| /// <summary> | ||
| /// Gets or sets A list of <see cref="TabbedCommandBarItem"/>s to display in this <see cref="TabbedCommandBar"/>. | ||
| /// </summary> | ||
| public IList<object> Items | ||
| { | ||
| get { return (IList<object>)GetValue(ItemsProperty); } | ||
| set { SetValue(ItemsProperty, value); } | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Gets or sets the <see cref="UIElement"/> to be displayed in the footer of the ribbon tab strip. | ||
| /// </summary> | ||
| public UIElement Footer | ||
| { | ||
| get { return (UIElement)GetValue(FooterProperty); } | ||
| set { SetValue(FooterProperty, value); } | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Initializes a new instance of the <see cref="TabbedCommandBar"/> class. | ||
| /// </summary> | ||
| public TabbedCommandBar() | ||
| { | ||
| DefaultStyleKey = typeof(TabbedCommandBar); | ||
| } | ||
|
|
||
| /// <inheritdoc/> | ||
| protected override void OnApplyTemplate() | ||
| { | ||
| base.OnApplyTemplate(); | ||
|
|
||
| // Get RibbonContent first, since setting SelectedItem requires it | ||
| _ribbonContent = GetTemplateChild("PART_RibbonContent") as ContentControl; | ||
|
|
||
| _ribbonNavigationView = GetTemplateChild("PART_RibbonNavigationView") as NavigationView; | ||
| if (_ribbonNavigationView != null) | ||
| { | ||
| // Populate the NavigationView with items | ||
| // TODO: Get binding working, necessary for contextual tabs | ||
| _ribbonNavigationView.MenuItems.Clear(); | ||
| foreach (TabbedCommandBarItem item in Items) | ||
| { | ||
| _ribbonNavigationView.MenuItems.Add(item); | ||
| } | ||
| _ribbonNavigationView.PaneFooter = Footer; | ||
|
|
||
| _ribbonNavigationView.SelectionChanged += RibbonNavigationView_SelectionChanged; | ||
| _ribbonNavigationView.SelectedItem = _ribbonNavigationView.MenuItems.FirstOrDefault(); | ||
| } | ||
|
|
||
| _tabChangedStoryboard = GetTemplateChild(nameof(_tabChangedStoryboard)) as Storyboard; | ||
| } | ||
|
|
||
| private void RibbonNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args) | ||
| { | ||
| if (args.SelectedItem is TabbedCommandBarItem item) | ||
| { | ||
| _ribbonContent.Content = item; | ||
| _tabChangedStoryboard?.Begin(); | ||
| } | ||
| else if (args.SelectedItem is NavigationViewItem navItem) | ||
| { | ||
| // This code is a hack and is only temporary, because I can't get binding to work. | ||
| // RibbonContent might be null here, there should be a check | ||
| _ribbonContent.Content = Items[System.Math.Min(Items.Count - 1, _ribbonNavigationView.MenuItems.IndexOf(navItem))]; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't notice a big difference without these resources? We should just have the example be as default as possible.