From 889a59f31621327bfe73aae8e7876a3a35ba81c9 Mon Sep 17 00:00:00 2001 From: YoshiAsk Date: Fri, 6 Nov 2020 11:26:55 -0600 Subject: [PATCH 01/30] Added initial control --- ...soft.Toolkit.Uwp.UI.Controls.Design.csproj | 1 + .../TabbedCommandBarMetadata.cs | 36 ++++++ .../Microsoft.Toolkit.Uwp.UI.Controls.csproj | 12 ++ .../TabbedCommandBar/TabbedCommandBar.cs | 117 ++++++++++++++++++ .../TabbedCommandBar/TabbedCommandBar.xaml | 93 ++++++++++++++ .../TabbedCommandBar/TabbedCommandBarItem.cs | 100 +++++++++++++++ .../TabbedCommandBarItemTemplateSelector.cs | 37 ++++++ .../Themes/Generic.xaml | 1 + .../VisualStudioToolsManifest.xml | 1 + 9 files changed, 398 insertions(+) create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj b/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj index 1201d323388..ada3759c203 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj @@ -122,6 +122,7 @@ + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs new file mode 100644 index 00000000000..13fcda54fe8 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs @@ -0,0 +1,36 @@ +// 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.Toolkit.Uwp.UI.Controls.Design.Common; +using Microsoft.Windows.Design; +using Microsoft.Windows.Design.Features; +using Microsoft.Windows.Design.Metadata; +using Microsoft.Windows.Design.Model; +using Microsoft.Windows.Design.PropertyEditing; +using System.ComponentModel; + +namespace Microsoft.Toolkit.Uwp.UI.Controls.Design +{ + + internal class TabbedCommandBarMetadata : AttributeTableBuilder + { + public TabbedCommandBarMetadata() + : base() + { + AddCallback(typeof(TabbedCommandBar), + b => + { + //b.AddCustomAttributes(nameof(TabbedCommandBar.SomePropertyHere), + // new CategoryAttribute(Properties.Resources.CategoryCommon) + // ); + b.AddCustomAttributes(nameof(TabbedCommandBar.Background), + new CategoryAttribute(Properties.Resources.CategoryBrush) + ); + + b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false)); + } + ); + } + } +} \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj index 6258250a2f0..af854444b6c 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj +++ b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj @@ -44,6 +44,10 @@ 8.0 + + + + @@ -85,6 +89,14 @@ + + + Designer + MSBuild:Compile + + + + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs new file mode 100644 index 00000000000..a1284f4ea78 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -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 +{ + /// + /// A basic ribbon control that houses s + /// + [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; } + + /// + /// Identifies the property. + /// + public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register( + nameof(Items), + typeof(IList), + typeof(TabbedCommandBar), + new PropertyMetadata(new List())); + + /// + /// Identifies the property. + /// + public static readonly DependencyProperty FooterProperty = DependencyProperty.Register( + nameof(Footer), + typeof(UIElement), + typeof(TabbedCommandBar), + new PropertyMetadata(new Border())); + + // I would prefer this be an IList, but Intellisense really doesn't like that. + /// + /// Gets or sets A list of s to display in this . + /// + public IList Items + { + get { return (IList)GetValue(ItemsProperty); } + set { SetValue(ItemsProperty, value); } + } + + /// + /// Gets or sets the to be displayed in the footer of the ribbon tab strip. + /// + public UIElement Footer + { + get { return (UIElement)GetValue(FooterProperty); } + set { SetValue(FooterProperty, value); } + } + + /// + /// Initializes a new instance of the class. + /// + public TabbedCommandBar() + { + DefaultStyleKey = typeof(TabbedCommandBar); + } + + /// + 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))]; + } + } + } +} \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml new file mode 100644 index 00000000000..178bdcd111e --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs new file mode 100644 index 00000000000..5dc727a0453 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs @@ -0,0 +1,100 @@ +// 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 Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; + +namespace Microsoft.Toolkit.Uwp.UI.Controls +{ + /// + /// A to be displayed in a + /// + [TemplatePart(Name = "PrimaryItemsControl", Type = typeof(ItemsControl))] + [TemplatePart(Name = "MoreButton", Type = typeof(Button))] + public class TabbedCommandBarItem : CommandBar + { + private ItemsControl _primaryItemsControl; + private Button _moreButton; + + /// + /// Initializes a new instance of the class. + /// + public TabbedCommandBarItem() + { + DefaultStyleKey = typeof(TabbedCommandBarItem); + } + + /// + /// Identifies the property. + /// + public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register( + nameof(Header), + typeof(string), + typeof(TabbedCommandBarItem), + new PropertyMetadata(string.Empty)); + + /// + /// Gets or sets the title of this ribbon tab. + /// + public string Header + { + get => (string)GetValue(HeaderProperty); + set => SetValue(HeaderProperty, value); + } + + /// + /// Identifies the property. + /// + public static readonly DependencyProperty FooterProperty = DependencyProperty.Register( + nameof(Footer), + typeof(UIElement), + typeof(TabbedCommandBarItem), + new PropertyMetadata(new Border())); + + /// + /// Identifies the property. + /// + public static readonly DependencyProperty IsContextualProperty = DependencyProperty.Register( + nameof(IsContextual), + typeof(bool), + typeof(TabbedCommandBarItem), + new PropertyMetadata(false)); + + /// + /// Gets or sets the to be displayed in the footer of the tab. + /// + public UIElement Footer + { + get => (UIElement)GetValue(FooterProperty); + set => SetValue(FooterProperty, value); + } + + /// + /// Gets or sets a value indicating whether this tab is contextual. + /// + public bool IsContextual + { + get => (bool)GetValue(IsContextualProperty); + set => SetValue(IsContextualProperty, value); + } + + /// + protected override void OnApplyTemplate() + { + base.OnApplyTemplate(); + + _primaryItemsControl = GetTemplateChild("PrimaryItemsControl") as ItemsControl; + if (_primaryItemsControl != null) + { + _primaryItemsControl.HorizontalAlignment = HorizontalAlignment.Left; + } + + _moreButton = GetTemplateChild("MoreButton") as Button; + if (_moreButton != null) + { + _moreButton.HorizontalAlignment = HorizontalAlignment.Right; + } + } + } +} \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs new file mode 100644 index 00000000000..06712d3c65b --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs @@ -0,0 +1,37 @@ +// 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 Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; + +namespace Microsoft.Toolkit.Uwp.UI.Controls +{ + /// + /// used by for determining the style of normal vs. contextual s. + /// + public class TabbedCommandBarItemTemplateSelector : DataTemplateSelector + { + /// + /// Gets or sets the of a normal . + /// + public DataTemplate Normal { get; set; } + + /// + /// Gets or sets the of a contextual . + /// + public DataTemplate Contextual { get; set; } + + /// + protected override DataTemplate SelectTemplateCore(object item) + { + return ((TabbedCommandBarItem)item).IsContextual ? Contextual : Normal; + } + + /// + protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) + { + return SelectTemplateCore(item); + } + } +} \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml index 8354174809c..e30898a6a9f 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml @@ -29,6 +29,7 @@ + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml b/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml index b952e2ec958..479fe150be9 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml @@ -31,6 +31,7 @@ + From a65b0a7120824fa833ea8e92210364e81e1fdb44 Mon Sep 17 00:00:00 2001 From: YoshiAsk Date: Fri, 6 Nov 2020 12:18:08 -0600 Subject: [PATCH 02/30] Added basic sample --- .../Microsoft.Toolkit.Uwp.SampleApp.csproj | 11 + .../TabbedCommandBar/TabbedCommandBar.bind | 79 +++++ .../TabbedCommandBar/TabbedCommandBar.png | Bin 0 -> 2953 bytes .../TabbedCommandBarPage.xaml | 16 ++ .../TabbedCommandBarPage.xaml.cs | 34 +++ .../SamplePages/samples.json | 10 + .../Microsoft.Toolkit.Uwp.UI.Controls.csproj | 8 + .../RibbonNavigationViewStyle.xaml | 271 ++++++++++++++++++ .../TabbedCommandBar/TabbedCommandBar.cs | 4 +- .../TabbedCommandBar/TabbedCommandBar.xaml | 8 +- 10 files changed, 435 insertions(+), 6 deletions(-) create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj index c7acab21bfa..0d8116d1620 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj +++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj @@ -272,6 +272,7 @@ + @@ -515,6 +516,9 @@ FocusBehaviorPage.xaml + + TabbedCommandBarPage.xaml + TilesBrushPage.xaml @@ -1001,6 +1005,13 @@ MSBuild:Compile Designer + + Designer + + + Designer + MSBuild:Compile + MSBuild:Compile Designer diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind new file mode 100644 index 00000000000..0a7e112b2a6 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png new file mode 100644 index 0000000000000000000000000000000000000000..6477997a9524ab0fd71c8fd4257015e52fdb60e3 GIT binary patch literal 2953 zcmd^BYg7|w8Xkfmayfuiz{;}Yz+#V(D?(wK6fq#+5~P6J0B6NqCdrf}6Osu8NLxhR zMX;sTWmgJ_3to`QO05fY5upmA?E!HWwIXGUB1INZE>`d$`z7HLyXfx!=A6u#?|Gm1 z$usZwe(z*oOmw(|?d!G>1UW=TgvLUU1q|++ZLGodXwCUr0O)ZpHztzHg=5r&1eaqF z^v2b~0}a2m3~~BnQ;V!6v|J`w=jN4ovc)E3ZGJ92Cf_UPw0F?B(^%lhO0V0twK+Mm zd!KhUZA$t&(P>qflaF0W*jk5y66ckBR*jtT>wTUkyE`|4@0%D0WQ@}0bJF|VqB&-y(ley6Fr z(tV+NE9;D}e#700E0%i+9w)KS_26s2dCp3(TONM2)?1KXo>Q^Lu2f>mHY$xpQp=D;j$9;C@z4*$01UnI3EnFZ*}p%F&s9W$S#t$m17MUia~e z__QMY#yN4pzJh#@gGJ>#pUe`;lTWix|EXt9_MPz_c@y&ooWY%{9}h_4r}y| zKlo2o`P}Z=t^8^y;~++16x(! zfOHsUtHlyDHgwBeI#_WK8A+;8Iz2r-otExLBh*qlGbkvC&S245EGl47H5p1$pra}^ zo+gnwnNUn4QsXKTCzP;3Rv;v_BnJTwjMl`W1!fwIvJ5kO@uP)S_!5~?Bc0#zj=NJ1kcR0~F4kX{JCkObXppgoJ6nhsJld?IHMKlUiN)514zz7?> z$hC$I-mb)fdmwDY`HKM#;>Tcs?lJ`umIy4A88!Oh5n^D+4}lkPFu&%;7YEVAhHr)= z!?*#=pnw1>iw1my9YH}BF3AWLkRX@EU@@pnCY2Eo&t#$-S*Sk)+@lO&!bk0(!#Uhl%NjbKF%r$t3oHT>xKsj#cSyV1iN;!y*D#j!Nt(-*Oju!}pn3zi_ z6auAqvp@~U%d`riQh>|Zbi?V8<7QeW$XuUI|1TG8@H9Lg8i8v_LY-lrZP1IuQq7=6 zbH+wP1tP<)aS)Z75Nk!47=cZ=hLDiy0yP#Q1>MC#LL?F#>}&=M&N41lVrrO43#9qa zv(sgmq1RqsZ@QTU(=(adV$+v;0u#?{co;QID40xO1@h*{oME*vDlsLPk7_Uo*AP7f z1TBk;3=N6b?HKL}j_$U1YfC*bcsY9ys@qXCM&y=uAl z@vZF_Zk!Zi?`<8v6#EY5AK*0W-amf8qdzj{T)z+3owXsaFD?jb%!=!!OpFY!>Aab^bOHF1|_$?dbB|E)v(>@5}7@{d;^ zA4n^z{p@fzcIUlJ)nqQMd|%EoH{v3J}iD`SC^M5-9(w!vX-$uT*Je|TU%ShQnRw2J*)jkGUvHF zH`wD5(fIpZeq-*{j*h(2($eVz!AhkvZ)Rpj7*O0*;2SV;?`xD_WasSY=(sldZsEhn zyLa!N-tiX5tl<+DcY1oN>m*rOS(7(AIt!Nj-b~7_t*aZV{;s@iR`Fw-rOOa?6L>F8 z-jrXvIt#Qc@+V!63=Iusrle`L+lgWO8C|om(dx(h_wWDI5Xq}*+qP}nP?ibqvZBql z-|EW>3LZ$wN=iy98=5SuBC6}po%8kZ@W^X#Zx@P06`6LY1A~L<9~Tt7)zr!{xUFw$ znr+(AP#LZNetZ6h5!UQta5?3>^bSAhqKE1q?2T-;)g8OlVCTGxy)^HYJ@WGI`DI7e z6prKPU6Q|b%7 literal 0 HcmV?d00001 diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml new file mode 100644 index 00000000000..4d296133a84 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs new file mode 100644 index 00000000000..3f6145546cb --- /dev/null +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs @@ -0,0 +1,34 @@ +// 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; +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 +{ + /// + /// An empty page that can be used on its own or navigated to within a Frame. + /// + public sealed partial class TabbedCommandBarPage : Page + { + public TabbedCommandBarPage() + { + this.InitializeComponent(); + } + } +} diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json index 1a5c5303b40..4eabf24be86 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json @@ -433,6 +433,16 @@ "XamlCodeFile": "TokenizingTextBoxXaml.bind", "Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png", "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TokenizingTextBox.md" + }, + { + "Name": "TabbedCommandBar", + "Type": "TabbedCommandBarPage", + "Subcategory": "Layout", + "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": "TabbedCommandBar.bind", + "Icon": "/SamplePages/TabbedCommandBar/TabbedCommandBar.png", + "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TabbedCommandBar.md" } ] }, diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj index af854444b6c..80c282efad7 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj +++ b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj @@ -45,6 +45,7 @@ + @@ -89,6 +90,13 @@ + + + MSBuild:Compile + + + + Designer diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml new file mode 100644 index 00000000000..93bbcf15a26 --- /dev/null +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml @@ -0,0 +1,271 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs index a1284f4ea78..e16bb814155 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -45,7 +45,7 @@ public class TabbedCommandBar : Control typeof(TabbedCommandBar), new PropertyMetadata(new Border())); - // I would prefer this be an IList, but Intellisense really doesn't like that. + // This should be an IList, but Intellisense really doesn't like that. /// /// Gets or sets A list of s to display in this . /// @@ -108,7 +108,7 @@ private void RibbonNavigationView_SelectionChanged(NavigationView sender, Naviga } else if (args.SelectedItem is NavigationViewItem navItem) { - // This code is a hack and is only temporary, because I can't get binding to work. + // This code is a hack, but it's necessary if binding doesn't work. // RibbonContent might be null here, there should be a check _ribbonContent.Content = Items[System.Math.Min(Items.Count - 1, _ribbonNavigationView.MenuItems.IndexOf(navItem))]; } diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index 178bdcd111e..dac84f43743 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -3,10 +3,10 @@ xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"> - + + + + - - + + \ No newline at end of file From 4d8e9bf6b1fc10b12a791f47887998bf2b68b1a5 Mon Sep 17 00:00:00 2001 From: YoshiAsk Date: Fri, 6 Nov 2020 13:05:15 -0600 Subject: [PATCH 04/30] Switch TabbedCommandBar to be a NavigationView --- .../TabbedCommandBar/TabbedCommandBar.bind | 128 ++++---- .../Microsoft.Toolkit.Uwp.UI.Controls.csproj | 8 - .../RibbonNavigationViewStyle.xaml | 271 ----------------- .../TabbedCommandBar/TabbedCommandBar.cs | 51 +--- .../TabbedCommandBar/TabbedCommandBar.xaml | 283 +++++++++++++++--- 5 files changed, 324 insertions(+), 417 deletions(-) delete mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index 0a7e112b2a6..20f81fe2327 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -1,4 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj index 0f956e406db..edd81c6f4a3 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj +++ b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj @@ -45,7 +45,6 @@ - @@ -99,13 +98,6 @@ - - - MSBuild:Compile - - - - Designer diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml deleted file mode 100644 index 93bbcf15a26..00000000000 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/RibbonNavigationViewStyle.xaml +++ /dev/null @@ -1,271 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs index e16bb814155..a2a5d693f53 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -14,28 +14,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls /// /// A basic ribbon control that houses s /// - [ContentProperty(Name = nameof(Items))] + [ContentProperty(Name = nameof(MenuItems))] [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 + public class TabbedCommandBar : NavigationView { 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; } - - /// - /// Identifies the property. - /// - public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register( - nameof(Items), - typeof(IList), - typeof(TabbedCommandBar), - new PropertyMetadata(new List())); - /// /// Identifies the property. /// @@ -45,16 +33,6 @@ public class TabbedCommandBar : Control typeof(TabbedCommandBar), new PropertyMetadata(new Border())); - // This should be an IList, but Intellisense really doesn't like that. - /// - /// Gets or sets A list of s to display in this . - /// - public IList Items - { - get { return (IList)GetValue(ItemsProperty); } - set { SetValue(ItemsProperty, value); } - } - /// /// Gets or sets the to be displayed in the footer of the ribbon tab strip. /// @@ -70,6 +48,8 @@ public UIElement Footer public TabbedCommandBar() { DefaultStyleKey = typeof(TabbedCommandBar); + + SelectionChanged += RibbonNavigationView_SelectionChanged; } /// @@ -77,24 +57,15 @@ protected override void OnApplyTemplate() { base.OnApplyTemplate(); + if (_ribbonContent != null) + { + _ribbonContent.Content = null; + } + // 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(); - } + SelectedItem = MenuItems.FirstOrDefault(); _tabChangedStoryboard = GetTemplateChild(nameof(_tabChangedStoryboard)) as Storyboard; } @@ -110,7 +81,7 @@ private void RibbonNavigationView_SelectionChanged(NavigationView sender, Naviga { // This code is a hack, but it's necessary if binding doesn't work. // RibbonContent might be null here, there should be a check - _ribbonContent.Content = Items[System.Math.Min(Items.Count - 1, _ribbonNavigationView.MenuItems.IndexOf(navItem))]; + _ribbonContent.Content = MenuItems[System.Math.Min(MenuItems.Count - 1, MenuItems.IndexOf(navItem))]; } } } diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index d8ef317763f..ed7a23be490 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -3,54 +3,266 @@ xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"> - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -74,4 +286,5 @@ + \ No newline at end of file From a3332345cf107f66b8172c4e6344d2c23e30a339 Mon Sep 17 00:00:00 2001 From: YoshiAsk Date: Fri, 6 Nov 2020 13:47:48 -0600 Subject: [PATCH 05/30] Removed unused _ribbonNavigationView --- .../TabbedCommandBar/TabbedCommandBar.cs | 1 - 1 file changed, 1 deletion(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs index a2a5d693f53..f751c45d881 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -20,7 +20,6 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls [TemplatePart(Name = "PART_TabChangedStoryboard", Type = typeof(Storyboard))] public class TabbedCommandBar : NavigationView { - private NavigationView _ribbonNavigationView = null; private ContentControl _ribbonContent = null; private Storyboard _tabChangedStoryboard = null; From f14dd7ef0dd3ed848610b6766d29638f1ad9f24e Mon Sep 17 00:00:00 2001 From: YoshiAsk Date: Fri, 6 Nov 2020 20:35:38 -0600 Subject: [PATCH 06/30] Fix styles and animations, allow overriding of default styles --- .../TabbedCommandBar/TabbedCommandBar.bind | 4 +-- .../TabbedCommandBar/TabbedCommandBar.cs | 26 ++++++++----------- .../TabbedCommandBar/TabbedCommandBar.xaml | 24 +++++++++++------ .../TabbedCommandBarItem.xaml | 12 ++++++--- 4 files changed, 37 insertions(+), 29 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index 20f81fe2327..f4101e8297c 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -6,12 +6,12 @@ mc:Ignorable="d"> - + - + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs index f751c45d881..a508df28cbd 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -2,11 +2,11 @@ // 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; using Windows.UI.Xaml.Media.Animation; namespace Microsoft.Toolkit.Uwp.UI.Controls @@ -24,22 +24,19 @@ public class TabbedCommandBar : NavigationView private Storyboard _tabChangedStoryboard = null; /// - /// Identifies the property. + /// Gets or sets the brush to use as the background for content /// - public static readonly DependencyProperty FooterProperty = DependencyProperty.Register( - nameof(Footer), - typeof(UIElement), - typeof(TabbedCommandBar), - new PropertyMetadata(new Border())); + public Brush ContentBackground + { + get { return (Brush)GetValue(ContentBackgroundProperty); } + set { SetValue(ContentBackgroundProperty, value); } + } /// - /// Gets or sets the to be displayed in the footer of the ribbon tab strip. + /// Identifies the property. /// - public UIElement Footer - { - get { return (UIElement)GetValue(FooterProperty); } - set { SetValue(FooterProperty, value); } - } + public static readonly DependencyProperty ContentBackgroundProperty = + DependencyProperty.Register("ContentBackground", typeof(Brush), typeof(TabbedCommandBar), new PropertyMetadata(null)); /// /// Initializes a new instance of the class. @@ -63,10 +60,9 @@ protected override void OnApplyTemplate() // Get RibbonContent first, since setting SelectedItem requires it _ribbonContent = GetTemplateChild("PART_RibbonContent") as ContentControl; + _tabChangedStoryboard = GetTemplateChild("TabChangedStoryboard") as Storyboard; SelectedItem = MenuItems.FirstOrDefault(); - - _tabChangedStoryboard = GetTemplateChild(nameof(_tabChangedStoryboard)) as Storyboard; } private void RibbonNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index ed7a23be490..869506369b1 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -23,14 +23,16 @@ Contextual="{StaticResource ContextualTabTemplate}" Normal="{StaticResource NormalTabTemplate}" /> - - @@ -287,4 +291,8 @@ + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml index 7076ecc10b0..50c68d31907 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml @@ -2,13 +2,13 @@ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"> - - - + + \ No newline at end of file From ccd7f0b08366b46ed7d0bec540aa8a4c6b8da3ed Mon Sep 17 00:00:00 2001 From: Yoshi Askharoun Date: Thu, 7 Jan 2021 11:21:57 -0600 Subject: [PATCH 07/30] Added IsContextual and OverflowButtonAlignment properties --- .../TabbedCommandBar/TabbedCommandBar.bind | 5 ++- .../TabbedCommandBar/TabbedCommandBar.xaml | 1 + .../TabbedCommandBar/TabbedCommandBarItem.cs | 36 ++++++++++++++----- .../TabbedCommandBarItem.xaml | 1 + 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index f4101e8297c..72616d20323 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -19,7 +19,7 @@ - + @@ -28,6 +28,9 @@ + + + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index 869506369b1..0731b7e1ec6 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -32,6 +32,7 @@ + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs index 5dc727a0453..13b5f5e6654 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs @@ -52,6 +52,15 @@ public string Header typeof(TabbedCommandBarItem), new PropertyMetadata(new Border())); + /// + /// Gets or sets the to be displayed in the footer of the tab. + /// + public UIElement Footer + { + get => (UIElement)GetValue(FooterProperty); + set => SetValue(FooterProperty, value); + } + /// /// Identifies the property. /// @@ -62,21 +71,30 @@ public string Header new PropertyMetadata(false)); /// - /// Gets or sets the to be displayed in the footer of the tab. + /// Gets or sets a value indicating whether this tab is contextual. /// - public UIElement Footer + public bool IsContextual { - get => (UIElement)GetValue(FooterProperty); - set => SetValue(FooterProperty, value); + get => (bool)GetValue(IsContextualProperty); + set => SetValue(IsContextualProperty, value); } + /// + /// Identifies the property. + /// + public static readonly DependencyProperty OverflowButtonAlignmentProperty = DependencyProperty.Register( + nameof(OverflowButtonAlignment), + typeof(HorizontalAlignment), + typeof(TabbedCommandBarItem), + new PropertyMetadata(HorizontalAlignment.Left)); + /// /// Gets or sets a value indicating whether this tab is contextual. /// - public bool IsContextual + public HorizontalAlignment OverflowButtonAlignment { - get => (bool)GetValue(IsContextualProperty); - set => SetValue(IsContextualProperty, value); + get => (HorizontalAlignment)GetValue(OverflowButtonAlignmentProperty); + set => SetValue(OverflowButtonAlignmentProperty, value); } /// @@ -87,13 +105,13 @@ protected override void OnApplyTemplate() _primaryItemsControl = GetTemplateChild("PrimaryItemsControl") as ItemsControl; if (_primaryItemsControl != null) { - _primaryItemsControl.HorizontalAlignment = HorizontalAlignment.Left; + _primaryItemsControl.HorizontalAlignment = HorizontalAlignment.Stretch; } _moreButton = GetTemplateChild("MoreButton") as Button; if (_moreButton != null) { - _moreButton.HorizontalAlignment = HorizontalAlignment.Right; + _moreButton.HorizontalAlignment = OverflowButtonAlignment; } } } diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml index 50c68d31907..f994c444356 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml @@ -15,6 +15,7 @@ Hardcoding the height of the CommandBar works, but it's a bit of a hack. --> + - - + + + + + + + + + + + From 66274ca19ec8fe4270cdc926bc714a54d9446f6d Mon Sep 17 00:00:00 2001 From: Joshua Askharoun Date: Sun, 7 Feb 2021 19:34:54 -0600 Subject: [PATCH 13/30] Added AppBarSplitButtonStyle; Added contextual tab to sample; Pass Visibility to TabbedCommandBarItems; Switched TabbedCommandBarItem.Header to type Object --- .../TabbedCommandBar/TabbedCommandBar.bind | 22 ++ .../TabbedCommandBar/TabbedCommandBar.xaml | 16 +- .../TabbedCommandBar/TabbedCommandBarItem.cs | 8 +- .../TabbedCommandBarItem.xaml | 314 +++++++++++++++++- 4 files changed, 351 insertions(+), 9 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index a165dce526d..a6bfc101e49 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -18,6 +18,16 @@ + + + + + + + + + + @@ -78,6 +88,18 @@ + + + + + + + + + + + + diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index d59e2628bc8..f0e342a8282 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -6,16 +6,21 @@ + + - + - + + + + @@ -267,8 +272,7 @@ - @@ -276,11 +280,15 @@ + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 1f352bf4441caa2793b9dc07124d1a9282e500ac Mon Sep 17 00:00:00 2001 From: Joshua Askharoun Date: Sun, 7 Feb 2021 19:43:54 -0600 Subject: [PATCH 14/30] Moved TabbedCommandBarItem default templates to TabbedCommandBarItem.xaml --- .../TabbedCommandBar/TabbedCommandBar.xaml | 22 ------------------- .../TabbedCommandBarItem.xaml | 22 +++++++++++++++++++ 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index f0e342a8282..89cb902c5c6 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -6,28 +6,6 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml index 1a473da9bc9..acb53fde7ab 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml @@ -3,6 +3,8 @@ xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"> + + @@ -30,6 +32,7 @@ + @@ -44,9 +47,15 @@ Contextual="{StaticResource ContextualTabTemplate}" Normal="{StaticResource NormalTabTemplate}" /> + + - From 5bb806eb925aa4cd9fa731b27cea44080c233be6 Mon Sep 17 00:00:00 2001 From: Joshua Askharoun Date: Tue, 9 Feb 2021 10:53:51 -0600 Subject: [PATCH 27/30] Updated sample to use ColorPickerButton and only Segoe MDL2 icons --- .../TabbedCommandBar/TabbedCommandBar.bind | 60 +++++++++++++------ 1 file changed, 42 insertions(+), 18 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index 90eeb6c0cc1..b92be3d0011 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -24,14 +24,7 @@ - - - - - - - - + @@ -56,12 +49,12 @@ - + - + @@ -75,36 +68,67 @@ - + - + - + - - + + + + + + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + From 57c20d4d51c1fb1a993082bb738a8e8a29290391 Mon Sep 17 00:00:00 2001 From: Joshua Askharoun Date: Tue, 9 Feb 2021 15:08:56 -0600 Subject: [PATCH 28/30] Inverted contextual toggle in sample; Fixed incorrect background during transition animation (again) --- .../SamplePages/TabbedCommandBar/TabbedCommandBar.bind | 2 +- .../TabbedCommandBar/TabbedCommandBar.cs | 2 +- .../TabbedCommandBar/TabbedCommandBar.xaml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index b92be3d0011..16ec14365fa 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -134,7 +134,7 @@ - diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs index 51ef684bdd6..eebb77e81e0 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -84,7 +84,7 @@ private void SelectedItemChanged(NavigationView sender, NavigationViewSelectionC _previousSelectedItem.RegisterPropertyChangedCallback(TabbedCommandBarItem.VisibilityProperty, SelectedItemVisibilityChanged); // Set the ribbon background and start the transition animation - _ribbonContentBorder.Background = item.Background; + //_ribbonContentBorder.Background = item.Background; _tabChangedStoryboard?.Begin(); } diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml index 8acab8dac6b..b4bd56f371e 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml @@ -246,7 +246,7 @@ - From 3438d45bede368df028eea83e9d136b548acb9b1 Mon Sep 17 00:00:00 2001 From: "Michael Hawker MSFT (XAML Llama)" <24302614+michael-hawker@users.noreply.github.com> Date: Wed, 10 Feb 2021 00:27:27 -0800 Subject: [PATCH 29/30] Remove Single Line Comment causing StyleCop Issue --- .../TabbedCommandBar/TabbedCommandBar.cs | 1 - 1 file changed, 1 deletion(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs index eebb77e81e0..dcde9b916ad 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs @@ -84,7 +84,6 @@ private void SelectedItemChanged(NavigationView sender, NavigationViewSelectionC _previousSelectedItem.RegisterPropertyChangedCallback(TabbedCommandBarItem.VisibilityProperty, SelectedItemVisibilityChanged); // Set the ribbon background and start the transition animation - //_ribbonContentBorder.Background = item.Background; _tabChangedStoryboard?.Begin(); } From 68fd8054e1e7eb73de8e05447f3db069f10d7f6e Mon Sep 17 00:00:00 2001 From: michael-hawker <24302614+michael-hawker@users.noreply.github.com> Date: Wed, 10 Feb 2021 00:50:18 -0800 Subject: [PATCH 30/30] Fix Contextual Tab Sample Page --- .../TabbedCommandBar/TabbedCommandBar.bind | 12 +++++++++--- .../SamplePages/XamlOnlyPage.xaml | 15 +++++++++------ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind index 16ec14365fa..66dd11951a9 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind @@ -3,7 +3,11 @@ 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"> + + + @@ -86,8 +90,10 @@ - + @@ -134,7 +140,7 @@ - diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml index 3b7a093050c..c354b2293be 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml +++ b/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 @@ + + @@ -34,17 +37,17 @@ - - - - - + + + + + - +