Skip to content

Commit 4fc1f0f

Browse files
yoshiaskyoshiask
committed
Added overrideable resources for colors/brushes and some styles/templates
1 parent 12b5068 commit 4fc1f0f

File tree

2 files changed

+20
-14
lines changed

2 files changed

+20
-14
lines changed

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -257,11 +257,7 @@
257257

258258
<!--FIXME: Ideally, these resources would be set by the TabbedCommandBarItem,
259259
but there isn't a way to do that without duplicating the CommandBar template.-->
260-
<Style TargetType="AppBarElementContainer">
261-
<Setter Property="VerticalAlignment" Value="Stretch" />
262-
<Setter Property="VerticalContentAlignment" Value="Center" />
263-
<Setter Property="Margin" Value="1,0" />
264-
</Style>
260+
<Style TargetType="AppBarElementContainer" BasedOn="{StaticResource TabbedCommandBarElementContainerStyle}"/>
265261
<Style TargetType="SplitButton" BasedOn="{StaticResource AppBarSplitButtonStyle}"/>
266262
</ContentControl.Resources>
267263
</ContentControl>
@@ -272,8 +268,9 @@
272268
</Setter>
273269
</Style>
274270

275-
<Style x:Key="AcrylicTabbedCommandBarStyle" TargetType="controls:TabbedCommandBar" BasedOn="{StaticResource DefaultTabbedCommandBarStyle}">
276-
<Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicWindowMediumBrush}" />
271+
<SolidColorBrush x:Key="TabbedCommandBarAcrylicBackground" Color="{ThemeResource SystemControlChromeMediumLowAcrylicWindowMediumBrush}"/>
272+
<Style x:Key="TabbedCommandBarAcrylicStyle" TargetType="controls:TabbedCommandBar" BasedOn="{StaticResource DefaultTabbedCommandBarStyle}">
273+
<Setter Property="Background" Value="{ThemeResource TabbedCommandBarAcrylicBackground}" />
277274
</Style>
278275

279276
</ResourceDictionary>

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
44

55
<SolidColorBrush x:Key="ContextualTabBackground" Color="{ThemeResource SystemAltMediumColor}"/>
6+
<SolidColorBrush x:Key="NormalTabBackground" Color="{ThemeResource SystemChromeLowColor}"/>
7+
<SolidColorBrush x:Key="NormalTabAcrylicBackground" Color="{ThemeResource SystemControlChromeLowAcrylicWindowBrush}"/>
68

79
<Style BasedOn="{StaticResource DefaultTabbedCommandBarItemStyle}" TargetType="controls:TabbedCommandBarItem"/>
810

911
<Style x:Key="DefaultTabbedCommandBarItemStyle" BasedOn="{StaticResource CommandBarRevealStyle}" TargetType="controls:TabbedCommandBarItem">
1012
<!-- TODO: Copy CommandBarRevealStyle instead of referencing it -->
1113
<Setter Property="HorizontalAlignment" Value="Stretch" />
1214
<Setter Property="DefaultLabelPosition" Value="Right" />
13-
<Setter Property="Background" Value="{ThemeResource SystemChromeLowColor}" />
15+
<Setter Property="Background" Value="{ThemeResource NormalTabBackground}" />
1416
<!--
1517
Is there a way to prevent the overflow button from showing if there aren't any buttons to send to the overflow menu?
1618
(See this message in the WinUI channel: https://discord.com/channels/372137812037730304/671870147354427422/771057634203402300 )
@@ -21,7 +23,7 @@
2123
</Style>
2224

2325
<Style x:Key="AcrylicTabbedCommandBarItemStyle" BasedOn="{StaticResource DefaultTabbedCommandBarItemStyle}" TargetType="controls:TabbedCommandBarItem">
24-
<Setter Property="Background" Value="{ThemeResource SystemControlChromeLowAcrylicWindowBrush}"/>
26+
<Setter Property="Background" Value="{ThemeResource NormalTabAcrylicBackground}"/>
2527
</Style>
2628

2729
<DataTemplate x:Key="NormalTabTemplate">
@@ -30,6 +32,7 @@
3032
<DataTemplate x:Key="ContextualTabTemplate">
3133
<NavigationViewItem Content="{Binding Header}" Background="{StaticResource ContextualTabBackground}" Visibility="{Binding Visibility}">
3234
<NavigationViewItem.Resources>
35+
<!-- TODO: These should reference TabbedCommandBarItem-specific resources so they can overriden -->
3336
<SolidColorBrush x:Key="TopNavigationViewItemForeground" Color="{ThemeResource SystemAccentColor}" />
3437
<SolidColorBrush x:Key="TopNavigationViewItemForegroundSelected" Color="{ThemeResource SystemAccentColor}" />
3538
<SolidColorBrush x:Key="TopNavigationViewItemForegroundPointerOver" Color="{ThemeResource SystemAccentColorLight2}" />
@@ -44,9 +47,15 @@
4447
Contextual="{StaticResource ContextualTabTemplate}"
4548
Normal="{StaticResource NormalTabTemplate}" />
4649

50+
<Style x:Key="TabbedCommandBarElementContainerStyle" TargetType="AppBarElementContainer">
51+
<Setter Property="VerticalAlignment" Value="Stretch" />
52+
<Setter Property="VerticalContentAlignment" Value="Center" />
53+
<Setter Property="Margin" Value="1,0" />
54+
</Style>
55+
4756
<Style x:Key="AppBarSplitButtonStyle" TargetType="SplitButton">
4857
<Setter Property="Background" Value="{ThemeResource AppBarButtonRevealBackground}" />
49-
<Setter Property="Foreground" Value="{ThemeResource SplitButtonForeground}" />
58+
<Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}" />
5059
<Setter Property="BorderBrush" Value="{ThemeResource SplitButtonBorderBrush}" />
5160
<Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" />
5261
<Setter Property="HorizontalAlignment" Value="Left" />
@@ -98,8 +107,8 @@
98107
<VisualState x:Name="PointerOver">
99108
<VisualState.Setters>
100109
<Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
101-
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}"/>
102-
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPointerOver}"/>
110+
<Setter Target="RootGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}"/>
111+
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPointerOver}"/>
103112
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
104113
</VisualState.Setters>
105114
<Storyboard>
@@ -110,8 +119,8 @@
110119
<VisualState x:Name="Pressed">
111120
<VisualState.Setters>
112121
<Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed" />
113-
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPressed}"/>
114-
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPressed}"/>
122+
<Setter Target="RootGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}"/>
123+
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}"/>
115124
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
116125
</VisualState.Setters>
117126
<Storyboard>

0 commit comments

Comments
 (0)