tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fluent 2 - fix commandbar style

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
6a7ed6a8ea
commit
b19f073b27
3 changed files with 570 additions and 251 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      samples/ControlCatalog/Pages/CommandBar/CommandBarFirstLookPage.xaml
  2. 118
      src/Avalonia.Themes.Fluent2/Accents/FluentControlResources.xaml
  3. 694
      src/Avalonia.Themes.Fluent2/Controls/CommandBar.xaml

9
samples/ControlCatalog/Pages/CommandBar/CommandBarFirstLookPage.xaml
View File

@ -19,25 +19,25 @@
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
<TextBlock Text="Primary Commands" FontWeight="SemiBold" />
<TextBlock Text="Buttons displayed directly in the bar: New, Save, Bold, Italic, Share."
FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
Opacity="0.7" TextWrapping="Wrap" />
<Separator />
<TextBlock Text="Secondary Commands" FontWeight="SemiBold" />
<TextBlock Text="Buttons in the overflow menu (three-dot icon): Export, Print, Delete."
FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
Opacity="0.7" TextWrapping="Wrap" />
<Separator />
<TextBlock Text="Content Area" FontWeight="SemiBold" />
<TextBlock Text="Custom content (e.g. 'Document Editor' text) displayed on the left side of the bar."
FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
Opacity="0.7" TextWrapping="Wrap" />
<Separator />
<TextBlock Text="Separators" FontWeight="SemiBold" />
<TextBlock Text="CommandBarSeparator creates visual dividers between command groups."
FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
Opacity="0.7" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
@ -86,7 +86,6 @@
<TextBlock x:Name="StatusText"
Text="Ready"
FontSize="13"
Opacity="0.7" />
</StackPanel>
</ScrollViewer>

118
src/Avalonia.Themes.Fluent2/Accents/FluentControlResources.xaml
View File

@ -117,6 +117,65 @@
<StaticResource x:Key="HyperlinkButtonBorderBrushPressed" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="HyperlinkButtonBorderBrushDisabled" ResourceKey="SubtleFillColorTransparentBrush" />
<!-- Resources for CommandBar.xaml -->
<StaticResource x:Key="CommandBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarButtonBackgroundDisabled" ResourceKey="SubtleFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarButtonForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarButtonForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarButtonForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarButtonForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrush" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrushPointerOver" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrushPressed" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrushDisabled" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundDisabled" ResourceKey="SubtleFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundChecked" ResourceKey="AccentFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundCheckedPointerOver" ResourceKey="AccentFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundCheckedPressed" ResourceKey="AccentFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundCheckedDisabled" ResourceKey="AccentFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundChecked" ResourceKey="TextOnAccentFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundCheckedPointerOver" ResourceKey="TextOnAccentFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundCheckedPressed" ResourceKey="TextOnAccentFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundCheckedDisabled" ResourceKey="TextOnAccentFillColorDisabled" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrush" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushPointerOver" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushPressed" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushDisabled" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushChecked" ResourceKey="AccentControlElevationBorderBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushCheckedPointerOver" ResourceKey="AccentControlElevationBorderBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushCheckedPressed" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushCheckedDisabled" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlay" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayCheckedPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayCheckedPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundCheckedPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundCheckedPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundCheckedDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandSeparatorForeground" ResourceKey="DividerStrokeColorDefaultBrush" />
<StaticResource x:Key="CommandBarBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarBackgroundOpen" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarBorderBrushOpen" ResourceKey="CardStrokeColorDefaultSolidBrush" />
<StaticResource x:Key="CommandBarForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarHighContrastBorder" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
<StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
<!-- Resources for ComboBox.xaml -->
<x:Double x:Key="ComboBoxThemeMinWidth">64</x:Double>
<Thickness x:Key="ComboBoxBorderThemeThickness">1</Thickness>
@ -835,6 +894,65 @@
<StaticResource x:Key="GroupBoxBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<StaticResource x:Key="GroupBoxHeaderForeground" ResourceKey="SystemBaseHighColor" />
<!-- Resources for CommandBar.xaml -->
<StaticResource x:Key="CommandBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarButtonBackgroundDisabled" ResourceKey="SubtleFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarButtonForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarButtonForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarButtonForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarButtonForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrush" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrushPointerOver" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrushPressed" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarButtonBorderBrushDisabled" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundDisabled" ResourceKey="SubtleFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundChecked" ResourceKey="AccentFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundCheckedPointerOver" ResourceKey="AccentFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundCheckedPressed" ResourceKey="AccentFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundCheckedDisabled" ResourceKey="AccentFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundChecked" ResourceKey="TextOnAccentFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundCheckedPointerOver" ResourceKey="TextOnAccentFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundCheckedPressed" ResourceKey="TextOnAccentFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonForegroundCheckedDisabled" ResourceKey="TextOnAccentFillColorDisabled" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrush" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushPointerOver" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushPressed" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushDisabled" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushChecked" ResourceKey="AccentControlElevationBorderBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushCheckedPointerOver" ResourceKey="AccentControlElevationBorderBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushCheckedPressed" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBorderBrushCheckedDisabled" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlay" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayCheckedPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonBackgroundHighLightOverlayCheckedPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundCheckedPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundCheckedPressed" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="CommandBarToggleButtonOverflowLabelForegroundCheckedDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandSeparatorForeground" ResourceKey="DividerStrokeColorDefaultBrush" />
<StaticResource x:Key="CommandBarBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarBackgroundOpen" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarBorderBrushOpen" ResourceKey="CardStrokeColorDefaultSolidBrush" />
<StaticResource x:Key="CommandBarForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="CommandBarHighContrastBorder" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
<StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
<!-- Resources for HyperlinkButton.xaml -->
<Color x:Key="HyperlinkVisitedColor">#FFC58AF9</Color>
<SolidColorBrush x:Key="HyperlinkVisitedBrush" Color="{StaticResource HyperlinkVisitedColor}" />

694
src/Avalonia.Themes.Fluent2/Controls/CommandBar.xaml
View File

@ -26,26 +26,64 @@
</Border>
</Design.PreviewWith>
<x:Double x:Key="CommandBarExpandButtonThemeWidth">48</x:Double>
<Thickness x:Key="CommandBarEllipsisButtonInnerBorderMargin">2,6,6,6</Thickness>
<Thickness x:Key="CommandBarInnerBorderMargin">2,6,2,6</Thickness>
<Thickness x:Key="CommandBarButtonInnerBorderCompactMargin">2,6,2,22</Thickness>
<Thickness x:Key="CommandBarButtonContentViewboxMargin">12,16,0,10</Thickness>
<Thickness x:Key="CommandBarButtonTextLabelOnRightMargin">8,16,12,10</Thickness>
<x:Double x:Key="CommandBarThemeMinHeight">64</x:Double>
<x:Double x:Key="CommandBarThemeCompactHeight">48</x:Double>
<x:Double x:Key="CommandButtonContentHeight">16</x:Double>
<Thickness x:Key="CommandButtonContentViewboxCollapsedMargin">0,16,0,2</Thickness>
<x:Double x:Key="CommandBarButtonLabelFontSize">12</x:Double>
<Thickness x:Key="CommandBarButtonTextLabelMargin">2,0,2,8</Thickness>
<Thickness x:Key="CommandBarButtonOverflowTextLabelPadding">0,5,0,8</Thickness>
<Thickness x:Key="CommandBarButtonInnerBorderOverflowMargin">4,0,4,0</Thickness>
<Thickness x:Key="CommandBarOverflowPresenterBorderPadding">0</Thickness>
<Thickness x:Key="CommandBarSeparatorMargin">2,8,2,8</Thickness>
<Thickness x:Key="CommandBarOverflowSeparatorMargin">0,4,0,4</Thickness>
<x:Double x:Key="CommandBarSeparatorWidth">1</x:Double>
<x:Double x:Key="CommandBarOverflowSeparatorHeight">1</x:Double>
<x:Double x:Key="CommandBarSeparatorCornerRadius">0.5</x:Double>
<Thickness x:Key="CommandBarBorderThicknessOpen">1</Thickness>
<x:Double x:Key="CommandBarOverflowMinWidth">160</x:Double>
<x:Double x:Key="CommandBarOverflowTouchMinWidth">240</x:Double>
<x:Double x:Key="CommandBarOverflowMaxWidth">480</x:Double>
<x:Double x:Key="CommandBarOverflowMaxHeight">198</x:Double>
<Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
<Thickness x:Key="CommandBarOverflowPresenterBorderDownThickness">0,0,0,1</Thickness>
<Thickness x:Key="CommandBarOverflowPresenterBorderUpThickness">0,1,0,0</Thickness>
<Thickness x:Key="CommandBarOverflowPresenterBorderDownPadding">0</Thickness>
<Thickness x:Key="CommandBarOverflowPresenterBorderUpPadding">0</Thickness>
<x:Double x:Key="CommandBarMoreButtonColumnMinWidth">6</x:Double>
<Thickness x:Key="CommandBarOverflowPresenterMargin">0,4,0,4</Thickness>
<Thickness x:Key="CommandBarOverflowButtonMargin">14,23,14,0</Thickness>
<!-- WinUI reference: CommandBar_themeresources.xaml, AppBarButton_themeresources.xaml (winui3/release/1.6.4),
AppBarToggleButton_themeresources.xaml, AppBarSeparator_themeresources.xaml (via Uno.UI.FluentTheme.v2).
AppBar idiom: transparent bar (CommandBarBackground = ControlFillColorTransparent; the open state uses
AcrylicInAppFillColorDefault with a 1px CardStrokeColorDefaultSolid border), subtle-fill command pills
with ControlCornerRadius and an 83ms fill cross-fade, 16px icons (AppBarButtonContentHeight) with 12px
labels, checked toggles on AccentFillColorDefault with TextOnAccent text, and 1px
DividerStrokeColorDefault separators (AppBarSeparatorMargin 2,8). WinUI's default closed CommandBar has
no bottom divider, so none is drawn here. The v1 SystemControl* brush references were re-pointed to the
Fluent 2 tokens in this file; no shared-file keys are defined for these controls. -->
AppBarToggleButton_themeresources.xaml, AppBarSeparator_themeresources.xaml (via Uno.UI.FluentTheme.v2).
AppBar idiom: transparent bar (CommandBarBackground = ControlFillColorTransparent; the open state uses
AcrylicInAppFillColorDefault with a 1px CardStrokeColorDefaultSolid border), subtle-fill command pills
with ControlCornerRadius and an 83ms fill cross-fade, 16px icons (AppBarButtonContentHeight) with 12px
labels, checked toggles on AccentFillColorDefault with TextOnAccent text, and 1px
DividerStrokeColorDefault separators (AppBarSeparatorMargin 2,8). WinUI's default closed CommandBar has
no bottom divider, so none is drawn here. The v1 SystemControl* brush references were re-pointed to the
Fluent 2 tokens in this file; no shared-file keys are defined for these controls. -->
<!-- CommandBar ellipsis (more) button: same subtle-fill treatment as AppBarButton. -->
<ControlTheme x:Key="Fluent2CommandBarMoreButtonTheme" TargetType="Button">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTransparentBrush}" />
<ControlTheme x:Key="Fluent2CommandBarEllipsisButtonTheme" TargetType="Button">
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrush}" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlFillColorTransparentBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Width" Value="{DynamicResource CommandBarExpandButtonThemeWidth}" />
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter x:Name="PART_ContentPresenter"
@ -57,11 +95,13 @@
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
Margin="{StaticResource CommandBarEllipsisButtonInnerBorderMargin}"
TemplatedControl.IsTemplateFocusTarget="True"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" />
<BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
</Transitions>
</ContentPresenter.Transitions>
</ContentPresenter>
@ -69,27 +109,39 @@
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackgroundPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrushPointerOver}" />
</Style>
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundPointerOver}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackgroundPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrushPressed}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundPressed}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorDisabledBrush}" />
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackgroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrushDisabled}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundDisabled}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="CommandButtonOverflowStyle" TargetType="CommandBarButton" BasedOn="{StaticResource DefaultFluentCommandBarButtonStyle}">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="NaN" />
</ControlTheme>
<ControlTheme x:Key="{x:Type CommandBarButton}" TargetType="CommandBarButton" BasedOn="{StaticResource DefaultFluentCommandBarButtonStyle}"/>
<!-- CommandBarButton ControlTheme (WinUI DefaultAppBarButtonStyle) -->
<ControlTheme x:Key="{x:Type CommandBarButton}" TargetType="CommandBarButton">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTransparentBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlFillColorTransparentBrush}" />
<ControlTheme x:Key="DefaultFluentCommandBarButtonStyle" TargetType="CommandBarButton">
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrush}" />
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Padding" Value="8,4" />
@ -100,114 +152,153 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="PART_Border"
Background="{TemplateBinding Background}"
BackgroundSizing="InnerBorderEdge"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" />
</Transitions>
</Border.Transitions>
<StackPanel x:Name="PART_LayoutRoot"
Spacing="4"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter x:Name="PART_IconPresenter"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"
Width="16"
Height="16"
HorizontalAlignment="Center" />
<TextBlock x:Name="PART_Label"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="12"
HorizontalAlignment="Center"
TextTrimming="CharacterEllipsis" />
</StackPanel>
</Border>
<Grid Name="RootGrid"
Background="Transparent"
MinWidth="{TemplateBinding MinWidth}"
MaxWidth="{TemplateBinding MaxWidth}">
<Border Name="PART_Border"
Margin="{DynamicResource CommandBarInnerBorderMargin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
BackgroundSizing="{TemplateBinding BackgroundSizing}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
</Transitions>
</Border.Transitions>
</Border>
<Grid Name="LayoutGrid"
MinHeight="{DynamicResource CommandBarThemeMinHeight}">
<StackPanel Name="PART_LayoutRoot"
Orientation="Vertical"
VerticalAlignment="Center"
Spacing="6">
<Viewbox Name="ContentViewbox"
Height="{DynamicResource CommandButtonContentHeight}"
HorizontalAlignment="Stretch">
<ContentPresenter Name="PART_IconPresenter"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
<TextBlock Name="PART_Label"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="{DynamicResource CommandBarButtonLabelFontSize}"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Center"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
</Setter>
<!-- Hover -->
<Style Selector="^:pointerover /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackgroundPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrushPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundPointerOver}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackgroundPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrushPressed}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundPressed}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundPressed}" />
</Style>
</Style>
<!-- Disabled -->
<Style Selector="^:disabled /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorDisabledBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarButtonBackgroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarButtonBorderBrushDisabled}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundDisabled}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForegroundDisabled}" />
</Style>
</Style>
<!-- Compact: hide label, reduce width -->
<!-- Compact: hide label -->
<Style Selector="^[IsCompact=True]">
<Setter Property="Width" Value="40" />
</Style>
<Style Selector="^[IsCompact=True] /template/ TextBlock#PART_Label">
<Setter Property="IsVisible" Value="False" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Margin" Value="{DynamicResource CommandBarButtonInnerBorderCompactMargin}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="IsVisible" Value="False" />
</Style>
</Style>
<!-- LabelPosition=Right: horizontal layout, auto-width -->
<Style Selector="^[LabelPosition=Right]">
<Setter Property="Width" Value="NaN" />
<Setter Property="MinWidth" Value="40" />
</Style>
<Style Selector="^[LabelPosition=Right] /template/ StackPanel#PART_LayoutRoot">
<Setter Property="Orientation" Value="Horizontal" />
</Style>
<Style Selector="^[LabelPosition=Right] /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="^[LabelPosition=Right] /template/ TextBlock#PART_Label">
<Setter Property="VerticalAlignment" Value="Center" />
<Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Spacing" Value="12"/>
</Style>
<Style Selector="^ /template/ Grid#LayoutGrid">
<Setter Property="MinHeight" Value="{DynamicResource CommandBarThemeCompactHeight}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
</Style>
<!-- IsInOverflow: full-width horizontal layout -->
<Style Selector="^[IsInOverflow=True]">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Width" Value="NaN" />
<Setter Property="MinHeight" Value="36" />
</Style>
<Style Selector="^[IsInOverflow=True] /template/ StackPanel#PART_LayoutRoot">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style Selector="^[IsInOverflow=True] /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Margin" Value="4,0,10,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="^[IsInOverflow=True] /template/ TextBlock#PART_Label">
<Setter Property="IsVisible" Value="True" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Style Selector="^ /template/ Grid#LayoutGrid">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="MinHeight" Value="0" />
</Style>
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Margin" Value="{DynamicResource CommandBarButtonInnerBorderOverflowMargin}" />
</Style>
<Style Selector="^ /template/ Viewbox#ContentViewbox">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Margin" Value="12,0,0,0" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="CommandToggleButtonOverflowStyle" TargetType="CommandBarToggleButton" BasedOn="{StaticResource DefaultCommandBarToggleButtonStyle}">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="NaN" />
</ControlTheme>
<ControlTheme x:Key="{x:Type CommandBarToggleButton}" TargetType="CommandBarToggleButton" BasedOn="{StaticResource DefaultCommandBarToggleButtonStyle}"/>
<!-- CommandBarToggleButton ControlTheme (WinUI DefaultAppBarToggleButtonStyle) -->
<ControlTheme x:Key="{x:Type CommandBarToggleButton}" TargetType="CommandBarToggleButton">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTransparentBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlFillColorTransparentBrush}" />
<ControlTheme x:Key="DefaultCommandBarToggleButtonStyle" TargetType="CommandBarToggleButton">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrush}" />
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Padding" Value="8,4" />
@ -218,173 +309,283 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="PART_Border"
Background="{TemplateBinding Background}"
BackgroundSizing="InnerBorderEdge"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" />
</Transitions>
</Border.Transitions>
<StackPanel x:Name="PART_LayoutRoot"
Spacing="4"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter x:Name="PART_IconPresenter"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"
Width="16"
Height="16"
HorizontalAlignment="Center" />
<TextBlock x:Name="PART_Label"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="12"
HorizontalAlignment="Center"
TextTrimming="CharacterEllipsis" />
</StackPanel>
</Border>
<Grid Name="RootGrid"
Background="Transparent"
MinWidth="{TemplateBinding MinWidth}"
MaxWidth="{TemplateBinding MaxWidth}">
<Border Name="PART_Border"
Margin="{DynamicResource CommandBarInnerBorderMargin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
BackgroundSizing="{TemplateBinding BackgroundSizing}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
</Transitions>
</Border.Transitions>
</Border>
<Grid Name="LayoutGrid"
MinHeight="{DynamicResource CommandBarThemeMinHeight}">
<StackPanel Name="PART_LayoutRoot"
Orientation="Vertical"
VerticalAlignment="Center"
Spacing="6">
<Viewbox Name="ContentViewbox"
Height="{DynamicResource CommandButtonContentHeight}"
HorizontalAlignment="Stretch">
<ContentPresenter Name="PART_IconPresenter"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
<TextBlock Name="PART_Label"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="{DynamicResource CommandBarButtonLabelFontSize}"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Center"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
</StackPanel>
</Grid>
</Grid>
</ControlTemplate>
</Setter>
<!-- Hover -->
<Style Selector="^:pointerover /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundPointerOver}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushPressed}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundPressed}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundPressed}" />
</Style>
</Style>
<!-- Disabled -->
<Style Selector="^:disabled /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorDisabledBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushDisabled}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundDisabled}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundDisabled}" />
</Style>
</Style>
<!-- Checked: accent fill with on-accent text, per AppBarToggleButton_themeresources -->
<Style Selector="^:checked /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AccentFillColorDefaultBrush}" />
</Style>
<!-- Checked -->
<Style Selector="^:checked">
<Setter Property="Foreground" Value="{DynamicResource TextOnAccentFillColorPrimaryBrush}" />
</Style>
<Style Selector="^:checked:pointerover /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AccentFillColorSecondaryBrush}" />
</Style>
<Style Selector="^:checked:pressed /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AccentFillColorTertiaryBrush}" />
</Style>
<Style Selector="^:checked:pressed">
<Setter Property="Foreground" Value="{DynamicResource TextOnAccentFillColorSecondaryBrush}" />
</Style>
<Style Selector="^:checked:disabled /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AccentFillColorDisabledBrush}" />
</Style>
<Style Selector="^:checked:disabled">
<Setter Property="Foreground" Value="{DynamicResource TextOnAccentFillColorDisabledBrush}" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundChecked}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushChecked}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundChecked}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundChecked}" />
</Style>
<!-- Hover -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundCheckedPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushCheckedPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundCheckedPointerOver}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundCheckedPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundCheckedPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushCheckedPressed}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundCheckedPressed}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundCheckedPressed}" />
</Style>
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundCheckedDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarToggleButtonBorderBrushCheckedDisabled}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundCheckedDisabled}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonForegroundCheckedDisabled}" />
</Style>
</Style>
</Style>
<!-- Compact: hide label, reduce width -->
<!-- Compact: hide label -->
<Style Selector="^[IsCompact=True]">
<Setter Property="Width" Value="40" />
</Style>
<Style Selector="^[IsCompact=True] /template/ TextBlock#PART_Label">
<Setter Property="IsVisible" Value="False" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Margin" Value="{DynamicResource CommandBarToggleButtonInnerBorderCompactMargin}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="IsVisible" Value="False" />
</Style>
</Style>
<!-- LabelPosition=Right: horizontal layout, auto-width -->
<Style Selector="^[LabelPosition=Right]">
<Setter Property="Width" Value="NaN" />
<Setter Property="MinWidth" Value="40" />
</Style>
<Style Selector="^[LabelPosition=Right] /template/ StackPanel#PART_LayoutRoot">
<Setter Property="Orientation" Value="Horizontal" />
</Style>
<Style Selector="^[LabelPosition=Right] /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="^[LabelPosition=Right] /template/ TextBlock#PART_Label">
<Setter Property="VerticalAlignment" Value="Center" />
<Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Spacing" Value="12"/>
</Style>
<Style Selector="^ /template/ Grid#LayoutGrid">
<Setter Property="MinHeight" Value="{DynamicResource CommandBarThemeCompactHeight}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
</Style>
<!-- IsInOverflow: full-width horizontal layout -->
<Style Selector="^[IsInOverflow=True]">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Width" Value="NaN" />
<Setter Property="MinHeight" Value="36" />
</Style>
<Style Selector="^[IsInOverflow=True] /template/ StackPanel#PART_LayoutRoot">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style Selector="^[IsInOverflow=True] /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Margin" Value="4,0,10,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="^[IsInOverflow=True] /template/ TextBlock#PART_Label">
<Setter Property="IsVisible" Value="True" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Style Selector="^ /template/ Grid#LayoutGrid">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="MinHeight" Value="0" />
</Style>
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Margin" Value="{DynamicResource CommandBarToggleButtonInnerBorderOverflowMargin}" />
</Style>
<Style Selector="^ /template/ Viewbox#ContentViewbox">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Margin" Value="12,0,0,0" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonOverflowLabelForegroundPointerOver}" />
</Style>
<!-- Hover -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundHighLightOverlayPointerOver}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonOverflowLabelForegroundPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundHighLightOverlayPressed}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonOverflowLabelForegroundPressed}" />
</Style>
</Style>
<!-- Checked -->
<Style Selector="^:checked">
<!-- Hover -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundHighLightOverlayCheckedPointerOver}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonOverflowLabelForegroundCheckedPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonBackgroundHighLightOverlayCheckedPressed}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonOverflowLabelForegroundCheckedPressed}" />
</Style>
</Style>
</Style>
</Style>
</ControlTheme>
<!-- CommandBarSeparator ControlTheme (WinUI DefaultAppBarSeparatorStyle:
1px DividerStrokeColorDefault, AppBarSeparatorMargin 2,8, corner radius 0.5) -->
1px DividerStrokeColorDefault, AppBarSeparatorMargin 2,8, corner radius 0.5) -->
<ControlTheme x:Key="{x:Type CommandBarSeparator}" TargetType="CommandBarSeparator">
<Setter Property="Width" Value="1" />
<Setter Property="MinHeight" Value="24" />
<Setter Property="Margin" Value="2,8" />
<Setter Property="Foreground" Value="{DynamicResource CommandSeparatorForeground}" />
<Setter Property="Padding" Value="{DynamicResource CommandBarSeparatorMargin}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{DynamicResource DividerStrokeColorDefaultBrush}"
CornerRadius="0.5"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
MinHeight="{TemplateBinding MinHeight}" />
<Rectangle Name="SeparatorRectangle"
RadiusX="{StaticResource CommandBarSeparatorCornerRadius}"
RadiusY="{StaticResource CommandBarSeparatorCornerRadius}"
Width="{StaticResource CommandBarSeparatorWidth}"
VerticalAlignment="Stretch"
Fill="{TemplateBinding Foreground}"
Margin="{TemplateBinding Padding}" />
</ControlTemplate>
</Setter>
<!-- IsInOverflow: horizontal separator (AppBarOverflowSeparatorMargin 0,4) -->
<Style Selector="^[IsInOverflow=True]">
<!-- IsInOverflow -->
<Style Selector="^[IsInOverflow=True] /template/ Rectangle#SeparatorRectangle">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="NaN" />
<Setter Property="Height" Value="1" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Margin" Value="0,4" />
<Setter Property="Height" Value="{StaticResource CommandBarOverflowSeparatorHeight}" />
<Setter Property="Margin" Value="{StaticResource CommandBarOverflowSeparatorMargin}" />
</Style>
</ControlTheme>
<!-- CommandBar ControlTheme (WinUI XamlDefaultCommandBar) -->
<ControlTheme x:Key="{x:Type CommandBar}" TargetType="CommandBar">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<!-- CommandBarBackground = ControlFillColorTransparentBrush; the open state swaps to
AcrylicInAppFillColorDefault with a CardStrokeColorDefaultSolid border (see IsOpen style). -->
<Setter Property="Background" Value="{DynamicResource ControlFillColorTransparentBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="Background" Value="{DynamicResource CommandBarBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CommandBarForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlFillColorTransparentBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="MinHeight" Value="48" />
<Setter Property="MinHeight" Value="{DynamicResource CommandBarThemeCompactHeight}" />
<Setter Property="Padding" Value="4,0" />
<Setter Property="ItemWidthBottom" Value="70" />
<Setter Property="ItemWidthRight" Value="102" />
<Setter Property="ItemWidthCollapsed" Value="42" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="LayoutRoot"
@ -395,25 +596,19 @@
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}"
MinHeight="{TemplateBinding MinHeight}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" />
<BrushTransition Property="BorderBrush" Duration="0:0:0.083" />
</Transitions>
</Border.Transitions>
<Panel>
<DockPanel KeyboardNavigation.TabNavigation="Cycle">
<!-- Overflow (more/ellipsis) button (docked right) -->
<Button x:Name="PART_OverflowButton"
DockPanel.Dock="Right"
Theme="{StaticResource Fluent2CommandBarMoreButtonTheme}"
Margin="2,6"
Padding="12,0"
MinWidth="40"
Foreground="{TemplateBinding Foreground}"
Theme="{DynamicResource Fluent2CommandBarEllipsisButtonTheme}"
MinHeight="{DynamicResource CommandBarThemeCompactHeight}"
VerticalAlignment="Stretch"
FontSize="16"
IsVisible="{TemplateBinding IsOverflowButtonVisible}">
<PathIcon Width="16" Height="16"
<PathIcon Width="20"
Height="20"
VerticalAlignment="Center"
Data="M6,10A2,2 0 0,0 4,12A2,2 0 0,0 6,14A2,2 0 0,0 8,12A2,2 0 0,0 6,10M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M18,10A2,2 0 0,0 16,12A2,2 0 0,0 18,14A2,2 0 0,0 20,12A2,2 0 0,0 18,10Z" />
</Button>
@ -427,33 +622,40 @@
<ItemsControl x:Name="PART_PrimaryCommands"
ItemsSource="{Binding VisiblePrimaryCommands, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Right"
MinHeight="{DynamicResource CommandBarThemeCompactHeight}"
VerticalAlignment="Stretch"
ClipToBounds="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="2" />
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
<!-- Overflow popup (WinUI overflow presenter: AcrylicInAppFillColorDefault surface,
SurfaceStrokeColorFlyout 1px border, OverlayCornerRadius, min width 160) -->
SurfaceStrokeColorFlyout 1px border, OverlayCornerRadius, min width 160) -->
<Popup x:Name="PART_OverflowPopup"
IsOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
PlacementTarget="{Binding #PART_OverflowButton}"
Placement="Bottom"
PlacementTarget="{Binding #LayoutRoot}"
Placement="BottomEdgeAlignedRight"
IsLightDismissEnabled="True"
WindowManagerAddShadowHint="True">
<Border Background="{DynamicResource AcrylicInAppFillColorDefaultBrush}"
<Border Background="{DynamicResource CommandBarOverflowPresenterBackground}"
BackgroundSizing="InnerBorderEdge"
BorderBrush="{DynamicResource SurfaceStrokeColorFlyoutBrush}"
BorderThickness="1"
BorderBrush="{DynamicResource CommandBarOverflowPresenterBorderBrush}"
BorderThickness="{DynamicResource CommandBarOverflowPresenterBorderThickness}"
CornerRadius="{DynamicResource OverlayCornerRadius}"
Padding="4"
MinWidth="160">
Padding="{DynamicResource CommandBarOverflowPresenterBorderPadding}"
MinWidth="{DynamicResource CommandBarOverflowMinWidth}"
MaxWidth="{DynamicResource CommandBarOverflowMaxWidth}">
<ItemsControl x:Name="PART_OverflowPresenter"
ItemContainerTheme="{DynamicResource CommandButtonOverflowStyle}"
ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
<ItemsControl.Resources>
<ControlTheme x:Key="{x:Type CommandBarButton}" TargetType="CommandBarButton" BasedOn="{StaticResource CommandButtonOverflowStyle}"/>
<ControlTheme x:Key="{x:Type CommandBarToggleButton}" TargetType="CommandBarToggleButton" BasedOn="{StaticResource CommandToggleButtonOverflowStyle}"/>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Spacing="2" />
@ -468,7 +670,7 @@
</Setter>
<!-- Open state: CommandBarBackgroundOpen / CommandBarBorderBrushOpen (thickness stays 1 to avoid
a layout jump; the rest-state border is transparent). -->
a layout jump; the rest-state border is transparent). -->
<Style Selector="^[IsOpen=True] /template/ Border#LayoutRoot">
<Setter Property="Background" Value="{DynamicResource AcrylicInAppFillColorDefaultBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultSolidBrush}" />

Write Preview
Loading…
Cancel
Save