Skip to content

Commit 66274ca

Browse files
yoshiaskyoshiask
committed
Added AppBarSplitButtonStyle; Added contextual tab to sample; Pass Visibility to TabbedCommandBarItems; Switched TabbedCommandBarItem.Header to type Object
1 parent 9060e8a commit 66274ca

File tree

4 files changed

+351
-9
lines changed

4 files changed

+351
-9
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@
1818
<AppBarButton Icon="Redo" Label="Redo"/>
1919
<AppBarButton Icon="Paste" Label="Paste"/>
2020
<AppBarSeparator />
21+
<AppBarElementContainer>
22+
<SplitButton>
23+
<PathIcon Data="F1 M 14.785156 12.089844 C 15.305989 12.089844 15.748697 12.272136 16.113281 12.636719 C 16.477863 13.001303 16.660156 13.444011 16.660156 13.964844 L 16.660156 16.464844 C 16.660156 16.972656 16.477863 17.412109 16.113281 17.783203 C 15.748697 18.154297 15.305989 18.339844 14.785156 18.339844 L 4.375 18.339844 C 3.854167 18.339844 3.411458 18.154297 3.046875 17.783203 C 2.682292 17.412109 2.5 16.972656 2.5 16.464844 L 2.5 13.964844 C 2.5 13.444011 2.682292 13.001303 3.046875 12.636719 C 3.411458 12.272136 3.854167 12.089844 4.375 12.089844 Z M 14.785156 13.339844 L 4.375 13.339844 C 4.205729 13.339844 4.059245 13.398438 3.935547 13.515625 C 3.811849 13.632812 3.75 13.782553 3.75 13.964844 L 3.75 16.464844 C 3.75 16.634115 3.811849 16.7806 3.935547 16.904297 C 4.059245 17.027994 4.205729 17.089844 4.375 17.089844 L 14.785156 17.089844 C 14.967447 17.089844 15.117187 17.027994 15.234375 16.904297 C 15.351562 16.7806 15.410155 16.634115 15.410156 16.464844 L 15.410156 13.964844 C 15.410155 13.782553 15.351562 13.632812 15.234375 13.515625 C 15.117187 13.398438 14.967447 13.339844 14.785156 13.339844 Z M 5.878906 9.980469 L 9.003906 2.070312 C 9.108072 1.822918 9.290364 1.689453 9.550781 1.669922 C 9.811197 1.650391 10 1.751303 10.117188 1.972656 L 10.175781 2.070312 L 13.28125 9.980469 C 13.346354 10.136719 13.346354 10.296225 13.28125 10.458984 C 13.216145 10.621745 13.098957 10.729167 12.929688 10.78125 C 12.786457 10.846354 12.643229 10.852865 12.5 10.800781 C 12.356771 10.748698 12.246094 10.651042 12.167969 10.507812 L 12.128906 10.429688 L 11.289062 8.339844 L 7.871094 8.339844 L 7.03125 10.429688 C 6.979167 10.585938 6.884766 10.696615 6.748047 10.761719 C 6.611328 10.826823 6.464844 10.846354 6.308594 10.820312 L 6.230469 10.78125 C 6.087239 10.729167 5.979817 10.631511 5.908203 10.488281 C 5.836588 10.345053 5.820312 10.201823 5.859375 10.058594 L 5.878906 9.980469 Z M 9.589844 3.984375 L 8.359375 7.089844 L 10.800781 7.089844 Z " VerticalAlignment="Center" HorizontalAlignment="Center" />
24+
<SplitButton.Flyout>
25+
<Flyout>
26+
<controls:ColorPicker Margin="-10" Color="{ThemeResource Brand-Color}"/>
27+
</Flyout>
28+
</SplitButton.Flyout>
29+
</SplitButton>
30+
</AppBarElementContainer>
2131
<AppBarElementContainer>
2232
<ComboBox SelectedIndex="0" MinWidth="175">
2333
<ComboBoxItem Content="Arial" />
@@ -78,6 +88,18 @@
7888
<AppBarButton Icon="Add" Label="New item" />
7989
</controls:TabbedCommandBarItem.SecondaryCommands>
8090
</controls:TabbedCommandBarItem>
91+
<controls:TabbedCommandBarItem Header="Shape Format" IsContextual="True">
92+
<AppBarButton Label="Shape Fill">
93+
<AppBarButton.Icon>
94+
<PathIcon Data="F1 M 7.5 1.464844 C 7.5 1.282553 7.561849 1.132812 7.685547 1.015625 C 7.809245 0.898438 7.955729 0.839844 8.125 0.839844 C 8.294271 0.839844 8.440755 0.898438 8.564453 1.015625 C 8.68815 1.132812 8.75 1.282553 8.75 1.464844 L 8.75 2.519531 C 8.932291 2.532553 9.114583 2.578125 9.296875 2.65625 C 9.479166 2.734375 9.641927 2.845053 9.785156 2.988281 L 12.734375 5.9375 C 13.059896 6.263021 13.222656 6.656901 13.222656 7.119141 C 13.222656 7.581381 13.059896 7.975261 12.734375 8.300781 L 9.199219 11.835938 C 8.873697 12.161459 8.479817 12.324219 8.017578 12.324219 C 7.555338 12.324219 7.161458 12.161459 6.835938 11.835938 L 3.886719 8.886719 C 3.561198 8.561198 3.398437 8.167318 3.398438 7.705078 C 3.398437 7.242839 3.561198 6.848959 3.886719 6.523438 L 7.421875 2.988281 C 7.434896 2.975261 7.447916 2.96224 7.460938 2.949219 C 7.473958 2.936199 7.486979 2.929688 7.5 2.929688 L 7.5 1.464844 Z M 7.5 5.214844 L 7.5 4.6875 L 5.097656 7.089844 L 11.972656 7.089844 C 11.959635 7.037761 11.943359 6.988933 11.923828 6.943359 C 11.904297 6.897787 11.875 6.855469 11.835938 6.816406 L 8.886719 3.886719 C 8.873697 3.860678 8.854166 3.841146 8.828125 3.828125 C 8.802083 3.815105 8.776041 3.802084 8.75 3.789062 L 8.75 5.214844 C 8.75 5.384115 8.68815 5.5306 8.564453 5.654297 C 8.440755 5.777995 8.294271 5.839844 8.125 5.839844 C 7.955729 5.839844 7.809245 5.777995 7.685547 5.654297 C 7.561849 5.5306 7.5 5.384115 7.5 5.214844 Z M 5.117188 8.339844 L 7.714844 10.957031 C 7.792969 11.035156 7.890625 11.074219 8.007812 11.074219 C 8.125 11.074219 8.222656 11.035156 8.300781 10.957031 L 10.917969 8.339844 Z M 5.488281 11.660156 L 3.75 11.660156 C 3.177083 11.660156 2.685547 11.865234 2.275391 12.275391 C 1.865234 12.685547 1.660156 13.177084 1.660156 13.75 L 1.660156 16.25 C 1.660156 16.822916 1.865234 17.314453 2.275391 17.724609 C 2.685547 18.134766 3.177083 18.339844 3.75 18.339844 L 16.25 18.339844 C 16.822916 18.339844 17.314453 18.134766 17.724609 17.724609 C 18.134766 17.314453 18.339844 16.822916 18.339844 16.25 L 18.339844 13.75 C 18.339844 13.242188 18.177082 12.799479 17.851562 12.421875 C 17.526041 12.044271 17.128906 11.803386 16.660156 11.699219 C 16.660156 11.751303 16.660156 11.800131 16.660156 11.845703 C 16.660156 11.891276 16.660156 11.933594 16.660156 11.972656 C 16.660156 12.141928 16.647135 12.307943 16.621094 12.470703 C 16.595051 12.633464 16.555988 12.792969 16.503906 12.949219 C 16.673176 13.014323 16.81315 13.11849 16.923828 13.261719 C 17.034504 13.404948 17.089844 13.567709 17.089844 13.75 L 17.089844 16.25 C 17.089844 16.484375 17.008463 16.682943 16.845703 16.845703 C 16.682941 17.008463 16.484375 17.089844 16.25 17.089844 L 3.75 17.089844 C 3.515625 17.089844 3.317057 17.008463 3.154297 16.845703 C 2.991536 16.682943 2.910156 16.484375 2.910156 16.25 L 2.910156 13.75 C 2.910156 13.515625 2.991536 13.317058 3.154297 13.154297 C 3.317057 12.991537 3.515625 12.910156 3.75 12.910156 L 6.953125 12.910156 C 6.822917 12.858073 6.699219 12.789714 6.582031 12.705078 C 6.464844 12.620443 6.354167 12.526042 6.25 12.421875 Z M 11.660156 11.972656 C 11.660156 11.777344 11.689453 11.578776 11.748047 11.376953 C 11.806641 11.175131 11.875 10.989584 11.953125 10.820312 C 12.031249 10.651042 12.11914 10.488281 12.216797 10.332031 C 12.314452 10.175781 12.415363 10.026042 12.519531 9.882812 C 12.610676 9.739584 12.705077 9.612631 12.802734 9.501953 C 12.90039 9.391276 12.98177 9.290365 13.046875 9.199219 C 13.085938 9.160156 13.13151 9.114584 13.183594 9.0625 C 13.235677 9.010417 13.274739 8.971354 13.300781 8.945312 L 13.300781 8.925781 C 13.430989 8.808594 13.580729 8.75 13.75 8.75 C 13.91927 8.75 14.06901 8.808594 14.199219 8.925781 L 14.453125 9.199219 C 14.518229 9.290365 14.599609 9.391276 14.697266 9.501953 C 14.794922 9.612631 14.889322 9.739584 14.980469 9.882812 C 15.084635 10.026042 15.185547 10.175781 15.283203 10.332031 C 15.380859 10.488281 15.46875 10.651042 15.546875 10.820312 C 15.625 10.989584 15.693359 11.175131 15.751953 11.376953 C 15.810547 11.578776 15.839844 11.777344 15.839844 11.972656 C 15.839844 12.558594 15.644531 13.069662 15.253906 13.505859 C 14.863281 13.942058 14.361979 14.160156 13.75 14.160156 C 13.13802 14.160156 12.636718 13.942058 12.246094 13.505859 C 11.855469 13.069662 11.660156 12.558594 11.660156 11.972656 Z M 13.964844 10.605469 C 13.925781 10.553386 13.889974 10.504558 13.857422 10.458984 C 13.824869 10.413412 13.789062 10.364584 13.75 10.3125 C 13.710938 10.364584 13.67513 10.413412 13.642578 10.458984 C 13.610025 10.504558 13.574218 10.553386 13.535156 10.605469 C 13.44401 10.722656 13.359375 10.846354 13.28125 10.976562 C 13.203125 11.106771 13.138021 11.230469 13.085938 11.347656 C 13.033854 11.477865 12.991535 11.595053 12.958984 11.699219 C 12.926432 11.803386 12.910156 11.894531 12.910156 11.972656 C 12.910156 12.259115 12.994791 12.486979 13.164062 12.65625 C 13.333332 12.825521 13.528645 12.910156 13.75 12.910156 C 13.971354 12.910156 14.166666 12.825521 14.335938 12.65625 C 14.505207 12.486979 14.589843 12.259115 14.589844 11.972656 C 14.589843 11.894531 14.573566 11.803386 14.541016 11.699219 C 14.508463 11.595053 14.466146 11.477865 14.414062 11.347656 C 14.361979 11.230469 14.296875 11.106771 14.21875 10.976562 C 14.140625 10.846354 14.055989 10.722656 13.964844 10.605469 Z " VerticalAlignment="Center" HorizontalAlignment="Center" />
95+
</AppBarButton.Icon>
96+
</AppBarButton>
97+
<AppBarButton Label="Shape Outline">
98+
<AppBarButton.Icon>
99+
<PathIcon Data="F1 M 3.652344 11.660156 C 3.105469 11.686198 2.636719 11.901042 2.246094 12.304688 C 1.855469 12.708334 1.660156 13.190104 1.660156 13.75 L 1.660156 16.25 C 1.660156 16.822916 1.865234 17.314453 2.275391 17.724609 C 2.685547 18.134766 3.177083 18.339844 3.75 18.339844 L 16.25 18.339844 C 16.822916 18.339844 17.314453 18.134766 17.724609 17.724609 C 18.134766 17.314453 18.339844 16.822916 18.339844 16.25 L 18.339844 13.75 C 18.339844 13.177084 18.134766 12.685547 17.724609 12.275391 C 17.314453 11.865234 16.822916 11.660156 16.25 11.660156 L 11.289062 11.660156 L 10.195312 12.753906 C 10.169271 12.779948 10.139974 12.80599 10.107422 12.832031 C 10.074869 12.858073 10.045572 12.884115 10.019531 12.910156 L 16.25 12.910156 C 16.484375 12.910156 16.682941 12.991537 16.845703 13.154297 C 17.008463 13.317058 17.089844 13.515625 17.089844 13.75 L 17.089844 16.25 C 17.089844 16.484375 17.008463 16.682943 16.845703 16.845703 C 16.682941 17.008463 16.484375 17.089844 16.25 17.089844 L 3.75 17.089844 C 3.515625 17.089844 3.317057 17.008463 3.154297 16.845703 C 2.991536 16.682943 2.910156 16.484375 2.910156 16.25 L 2.910156 13.75 C 2.910156 13.59375 2.949219 13.450521 3.027344 13.320312 C 3.105469 13.190104 3.209635 13.092448 3.339844 13.027344 C 3.326823 12.923178 3.326823 12.819011 3.339844 12.714844 C 3.352865 12.610678 3.378906 12.506511 3.417969 12.402344 L 3.652344 11.660156 Z M 15.546875 2.460938 C 16.067707 2.981771 16.328125 3.613281 16.328125 4.355469 C 16.328125 5.097656 16.067707 5.729167 15.546875 6.25 L 9.609375 12.167969 C 9.492188 12.285156 9.368489 12.382812 9.238281 12.460938 C 9.108072 12.539062 8.964844 12.597656 8.808594 12.636719 L 5.234375 13.710938 C 5.013021 13.776042 4.801432 13.756511 4.599609 13.652344 C 4.397786 13.548178 4.264323 13.385417 4.199219 13.164062 C 4.173177 13.072917 4.160156 12.985026 4.160156 12.900391 C 4.160156 12.815756 4.173177 12.734375 4.199219 12.65625 L 5.332031 9.140625 C 5.384114 8.997396 5.449219 8.860678 5.527344 8.730469 C 5.605469 8.600261 5.696614 8.483073 5.800781 8.378906 L 11.738281 2.460938 C 12.272135 1.927084 12.9069 1.660156 13.642578 1.660156 C 14.378255 1.660156 15.013021 1.927084 15.546875 2.460938 Z M 12.636719 3.339844 L 6.679688 9.277344 C 6.653646 9.303386 6.627604 9.339193 6.601562 9.384766 C 6.575521 9.430339 6.549479 9.472656 6.523438 9.511719 L 5.644531 12.285156 L 8.457031 11.445312 C 8.509114 11.432292 8.557942 11.412761 8.603516 11.386719 C 8.649088 11.360678 8.684896 11.328125 8.710938 11.289062 L 14.648438 5.371094 C 14.934896 5.084636 15.078125 4.742839 15.078125 4.345703 C 15.078125 3.948568 14.934896 3.613282 14.648438 3.339844 C 14.374999 3.053386 14.039713 2.910156 13.642578 2.910156 C 13.245442 2.910156 12.910156 3.053386 12.636719 3.339844 Z " VerticalAlignment="Center" HorizontalAlignment="Center" />
100+
</AppBarButton.Icon>
101+
</AppBarButton>
102+
</controls:TabbedCommandBarItem>
81103
</controls:TabbedCommandBar.MenuItems>
82104
</controls:TabbedCommandBar>
83105
</Grid>

‎Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,21 @@
66
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml" />
77
</ResourceDictionary.MergedDictionaries>
88

9+
<SolidColorBrush x:Key="ContextualTabBackground" Color="{StaticResource SystemAltMediumColor}"/>
10+
911
<DataTemplate x:Key="NormalTabTemplate">
10-
<NavigationViewItem Content="{Binding Header}" />
12+
<NavigationViewItem Content="{Binding Header}" Visibility="{Binding Visibility}"/>
1113
</DataTemplate>
1214
<DataTemplate x:Key="ContextualTabTemplate">
13-
<NavigationViewItem Content="{Binding Header}">
15+
<NavigationViewItem Content="{Binding Header}" Background="{StaticResource ContextualTabBackground}" Visibility="{Binding Visibility}">
1416
<NavigationViewItem.Resources>
1517
<SolidColorBrush x:Key="TopNavigationViewItemForeground" Color="{ThemeResource SystemAccentColor}" />
1618
<SolidColorBrush x:Key="TopNavigationViewItemForegroundSelected" Color="{ThemeResource SystemAccentColor}" />
1719
<SolidColorBrush x:Key="TopNavigationViewItemForegroundPointerOver" Color="{ThemeResource SystemAccentColorLight2}" />
1820
<SolidColorBrush x:Key="TopNavigationViewItemForegroundPressed" Color="{ThemeResource SystemAccentColorLight2}" />
21+
22+
<!-- TODO: Set BackgroundSelected to match ContextualTabBackground -->
23+
<!--<StaticResource x:Key="TopNavigationViewItemBackgroundSelected" ResourceKey="ContextualTabBackgroundColor" />-->
1924
</NavigationViewItem.Resources>
2025
</NavigationViewItem>
2126
</DataTemplate>
@@ -267,20 +272,23 @@
267272
</Grid>
268273

269274

270-
<Border x:Name="PART_RibbonContentBorder"
271-
Background="{TemplateBinding ItemBackground}" Grid.Row="1"
275+
<Border x:Name="PART_RibbonContentBorder" Grid.Row="1"
272276
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
273277
<ContentControl x:Name="PART_RibbonContent" Content="{TemplateBinding SelectedItem}"
274278
HorizontalContentAlignment="Stretch">
275279
<ContentControl.Resources>
276280
<Storyboard x:Name="TabChangedStoryboard">
277281
<PopInThemeAnimation TargetName="PART_RibbonContent"/>
278282
</Storyboard>
283+
284+
<!--FIXME: Ideally, these resources would be set by the TabbedCommandBarItem,
285+
but there isn't a way to do that without duplicating the CommandBar template.-->
279286
<Style TargetType="AppBarElementContainer">
280287
<Setter Property="VerticalAlignment" Value="Stretch" />
281288
<Setter Property="VerticalContentAlignment" Value="Center" />
282289
<Setter Property="Margin" Value="1,0" />
283290
</Style>
291+
<Style TargetType="SplitButton" BasedOn="{StaticResource AppBarSplitButtonStyle}"/>
284292
</ContentControl.Resources>
285293
</ContentControl>
286294
</Border>

‎Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@ public TabbedCommandBarItem()
3030
/// </summary>
3131
public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
3232
nameof(Header),
33-
typeof(string),
33+
typeof(object),
3434
typeof(TabbedCommandBarItem),
3535
new PropertyMetadata(string.Empty));
3636

3737
/// <summary>
38-
/// Gets or sets the title of this ribbon tab.
38+
/// Gets or sets the text or <see cref="UIElement"/> to display in the header of this ribbon tab.
3939
/// </summary>
40-
public string Header
40+
public object Header
4141
{
42-
get => (string)GetValue(HeaderProperty);
42+
get => (object)GetValue(HeaderProperty);
4343
set => SetValue(HeaderProperty, value);
4444
}
4545

0 commit comments

Comments
 (0)