zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-12 04:06:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix CommandBar issues (#763)

Browse Source 
* feat: extract shared theme from AppBarButton & AppBarToggleButton.

* feat: enhance CommandBar with dynamic overflow and adjustable width.

* fix: fix Width in IsCompact mode.
This commit is contained in:
Zhang Dian
2026-03-12 15:56:39 +08:00
committed by GitHub
parent d865f2aeb4
commit dd5f5182fa
3 changed files with 168 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
demo/Semi.Avalonia.Demo/Pages/CommandBarDemo.axaml
View File

@@ -12,8 +12,8 @@
<StackPanel Spacing="16"> <StackPanel Spacing="16">
<HeaderedContentControl Theme="{StaticResource GroupBox}"> <HeaderedContentControl Theme="{StaticResource GroupBox}">
<HeaderedContentControl.Header> <HeaderedContentControl.Header>
<StackPanel> <StackPanel HorizontalAlignment="Left">
<TextBlock Text="CommandBar — Label Position" /> <TextBlock Text="CommandBar — Dynamic Overflow" />
<ComboBox <ComboBox
Name="lc" Name="lc"
ItemsSource="{DynamicResource LabelPositionList}" ItemsSource="{DynamicResource LabelPositionList}"
@@ -26,9 +26,14 @@
</collections:AvaloniaList> </collections:AvaloniaList>
</ComboBox.Resources> </ComboBox.Resources>
</ComboBox> </ComboBox>
<ToggleSwitch Name="idfe" IsChecked="True" />
<Slider Name="ws" Width="500" Minimum="0" Maximum="1000" Value="200" />
</StackPanel> </StackPanel>
</HeaderedContentControl.Header> </HeaderedContentControl.Header>
<CommandBar DefaultLabelPosition="{Binding #lc.SelectedValue}"> <CommandBar
IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
Width="{Binding #ws.Value}"
DefaultLabelPosition="{Binding #lc.SelectedValue}">
<AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" /> <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
<AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" /> <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
<AppBarSeparator /> <AppBarSeparator />
@@ -59,25 +64,6 @@
</CommandBar> </CommandBar>
</HeaderedContentControl> </HeaderedContentControl>
<HeaderedContentControl Theme="{StaticResource GroupBox}">
<HeaderedContentControl.Header>
<StackPanel HorizontalAlignment="Left">
<TextBlock Text="CommandBar — Dynamic Overflow" />
<ToggleSwitch Name="idfe" IsChecked="True" />
<Slider Name="ws" Width="500" Minimum="0" Maximum="500" Value="100" />
</StackPanel>
</HeaderedContentControl.Header>
<CommandBar
IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
Width="{Binding #ws.Value}">
<AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
<AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
<AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
<AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
<AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
</CommandBar>
</HeaderedContentControl>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

351
src/Semi.Avalonia/Controls/CommandBar.axaml
View File

@@ -1,36 +1,53 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base">
<Design.PreviewWith> <Design.PreviewWith>
<Border Padding="16" Width="600" Background="{DynamicResource SemiColorBackground0}"> <HeaderedContentControl Height="500" Theme="{StaticResource GroupBox}">
<StackPanel Spacing="16"> <HeaderedContentControl.Header>
<CommandBar> <StackPanel>
<ComboBox
Name="lc"
ItemsSource="{DynamicResource LabelPositionList}"
SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}">
<ComboBox.Resources>
<collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
<CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
<CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
<CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
</collections:AvaloniaList>
</ComboBox.Resources>
</ComboBox>
<ToggleSwitch Name="idfe" IsChecked="True" />
<Slider Name="ws" Width="500" Minimum="0" Maximum="500" Value="200" />
</StackPanel>
</HeaderedContentControl.Header>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<CommandBar
DefaultLabelPosition="{Binding #lc.SelectedValue}"
IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
Width="{Binding #ws.Value}">
<AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" /> <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
<AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" /> <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
<AppBarSeparator /> <AppBarSeparator />
<AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" /> <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
<AppBarButton Label="Copy" IsEnabled="False" Icon="{DynamicResource SemiIconCopy}" /> <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
<AppBarToggleButton Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
<AppBarSeparator />
<AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
<AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
<AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
<AppBarSeparator />
<AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
</CommandBar> </CommandBar>
</StackPanel> </StackPanel>
</Border> </HeaderedContentControl>
</Design.PreviewWith> </Design.PreviewWith>
<!-- AppBarButton --> <ControlTheme x:Key="AppBarButtonBaseTheme" TargetType="Button">
<ControlTheme x:Key="{x:Type AppBarButton}" TargetType="AppBarButton">
<Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
<Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
<Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="AppBarButton"> <ControlTemplate TargetType="Button">
<Border <Border
Name="PART_Border" Name="PART_Border"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
@@ -40,17 +57,12 @@
Padding="{TemplateBinding Padding}"> Padding="{TemplateBinding Padding}">
<StackPanel <StackPanel
Name="PART_LayoutRoot" Name="PART_LayoutRoot"
Spacing="4" Spacing="{DynamicResource AppBarButtonPanelSpacing}"
HorizontalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"> VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter <ContentPresenter
Name="PART_IconPresenter" Name="PART_IconPresenter"
Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}">
Foreground="{TemplateBinding Foreground}"
Width="{DynamicResource AppBarButtonIconSize}"
Height="{DynamicResource AppBarButtonIconSize}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter.DataTemplates> <ContentPresenter.DataTemplates>
<DataTemplate DataType="Geometry"> <DataTemplate DataType="Geometry">
<PathIcon <PathIcon
@@ -61,220 +73,178 @@
</ContentPresenter> </ContentPresenter>
<TextBlock <TextBlock
Name="PART_Label" Name="PART_Label"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}" Foreground="{TemplateBinding Foreground}"
FontSize="{DynamicResource AppBarButtonLabelFontSize}" FontSize="{DynamicResource AppBarButtonLabelFontSize}"
HorizontalAlignment="Center"
TextTrimming="CharacterEllipsis" /> TextTrimming="CharacterEllipsis" />
</StackPanel> </StackPanel>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<!-- Pointer over --> <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
<Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
<Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Cursor" Value="Hand" />
<Style Selector="^:pointerover /template/ Border#PART_Border"> <Style Selector="^:pointerover /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" />
</Style> </Style>
<!-- Pressed -->
<Style Selector="^:pressed /template/ Border#PART_Border"> <Style Selector="^:pressed /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
</Style> </Style>
<!-- Disabled --> <Style Selector="^:disabled">
<Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
</Style>
</Style> </Style>
<Style Selector="^:disabled /template/ TextBlock#PART_Label"> </ControlTheme>
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
<!-- AppBarButton -->
<ControlTheme
x:Key="{x:Type AppBarButton}"
BasedOn="{StaticResource AppBarButtonBaseTheme}"
TargetType="AppBarButton">
<Style Selector="^ /template/ TextBlock#PART_Label">
<Setter Property="Text" Value="{TemplateBinding Label}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Content" Value="{TemplateBinding Icon}" />
</Style> </Style>
<!-- IsCompact: hide label, use compact width --> <!-- IsCompact: hide label, use compact width -->
<Style Selector="^[IsCompact=True]"> <Style Selector="^[IsCompact=True]">
<Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" /> <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[IsCompact=True] /template/ TextBlock#PART_Label"> <Setter Property="IsVisible" Value="False" />
<Setter Property="IsVisible" Value="False" /> </Style>
</Style> </Style>
<!-- LabelPosition=Collapsed: hide label, use compact width --> <!-- LabelPosition=Collapsed: hide label, use compact width -->
<Style Selector="^[LabelPosition=Collapsed]"> <Style Selector="^[LabelPosition=Collapsed]">
<Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" /> <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[LabelPosition=Collapsed] /template/ TextBlock#PART_Label"> <Setter Property="IsVisible" Value="False" />
<Setter Property="IsVisible" Value="False" /> </Style>
</Style> </Style>
<!-- LabelPosition=Right: horizontal layout, auto-width --> <!-- LabelPosition=Right: horizontal layout, auto-width -->
<Style Selector="^[LabelPosition=Right]"> <Style Selector="^[LabelPosition=Right]">
<Setter Property="Width" Value="{x:Static x:Double.NaN}" /> <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
<Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" /> <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
</Style> <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
<Style Selector="^[LabelPosition=Right] /template/ StackPanel#PART_LayoutRoot"> <Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Orientation" Value="Horizontal" /> </Style>
</Style> <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Style Selector="^[LabelPosition=Right] /template/ ContentPresenter#PART_IconPresenter"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[LabelPosition=Right] /template/ TextBlock#PART_Label"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> </Style>
<!-- IsInOverflow: full-width horizontal layout for use inside overflow popup --> <!-- IsInOverflow: full-width horizontal layout for use inside overflow popup -->
<Style Selector="^[IsInOverflow=True]"> <Style Selector="^[IsInOverflow=True]">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Width" Value="{x:Static x:Double.NaN}" /> <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
<Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
<Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" /> <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
</Style> <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
<Style Selector="^[IsInOverflow=True] /template/ StackPanel#PART_LayoutRoot"> <Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Orientation" Value="Horizontal" /> </Style>
</Style> <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Style Selector="^[IsInOverflow=True] /template/ ContentPresenter#PART_IconPresenter"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[IsInOverflow=True] /template/ TextBlock#PART_Label"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
<!-- AppBarToggleButton --> <!-- AppBarToggleButton -->
<ControlTheme x:Key="{x:Type AppBarToggleButton}" TargetType="AppBarToggleButton"> <ControlTheme
<Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" /> x:Key="{x:Type AppBarToggleButton}"
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" /> BasedOn="{StaticResource AppBarButtonBaseTheme}"
<Setter Property="BorderBrush" Value="Transparent" /> TargetType="AppBarToggleButton">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
<Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
<Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="AppBarToggleButton">
<Border
Name="PART_Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<StackPanel
Name="PART_LayoutRoot"
Spacing="4"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter
Name="PART_IconPresenter"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"
Width="{DynamicResource AppBarButtonIconSize}"
Height="{DynamicResource AppBarButtonIconSize}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter.DataTemplates>
<DataTemplate DataType="Geometry">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{Binding}" />
</DataTemplate>
</ContentPresenter.DataTemplates>
</ContentPresenter>
<TextBlock
Name="PART_Label"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="{DynamicResource AppBarButtonLabelFontSize}"
HorizontalAlignment="Center"
TextTrimming="CharacterEllipsis" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter>
<!-- Pointer over --> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^:pointerover /template/ Border#PART_Border"> <Setter Property="Text" Value="{TemplateBinding Label}" />
<Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" /> </Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Content" Value="{TemplateBinding Icon}" />
</Style> </Style>
<!-- Pressed --> <Style Selector="^:checked">
<Style Selector="^:pressed /template/ Border#PART_Border"> <Style Selector="^ /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" />
</Style> </Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<!-- Checked --> <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
<Style Selector="^:checked /template/ Border#PART_Border"> </Style>
<Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" /> <Style Selector="^:pointerover /template/ Border#PART_Border">
</Style> <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
<Style Selector="^:checked /template/ ContentPresenter#PART_IconPresenter"> </Style>
<Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
</Style>
<Style Selector="^:checked /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
</Style>
<!-- Checked + Pointer over -->
<Style Selector="^:checked:pointerover /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
</Style>
<!-- Disabled -->
<Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
</Style>
<Style Selector="^:disabled /template/ TextBlock#PART_Label">
<Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
</Style> </Style>
<!-- IsCompact: hide label, use compact width --> <!-- IsCompact: hide label, use compact width -->
<Style Selector="^[IsCompact=True]"> <Style Selector="^[IsCompact=True]">
<Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" /> <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[IsCompact=True] /template/ TextBlock#PART_Label"> <Setter Property="IsVisible" Value="False" />
<Setter Property="IsVisible" Value="False" /> </Style>
</Style> </Style>
<!-- LabelPosition=Collapsed: hide label, use compact width --> <!-- LabelPosition=Collapsed: hide label, use compact width -->
<Style Selector="^[LabelPosition=Collapsed]"> <Style Selector="^[LabelPosition=Collapsed]">
<Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" /> <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[LabelPosition=Collapsed] /template/ TextBlock#PART_Label"> <Setter Property="IsVisible" Value="False" />
<Setter Property="IsVisible" Value="False" /> </Style>
</Style> </Style>
<!-- LabelPosition=Right: horizontal layout, auto-width --> <!-- LabelPosition=Right: horizontal layout, auto-width -->
<Style Selector="^[LabelPosition=Right]"> <Style Selector="^[LabelPosition=Right]">
<Setter Property="Width" Value="{x:Static x:Double.NaN}" /> <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
<Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" /> <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
</Style> <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
<Style Selector="^[LabelPosition=Right] /template/ StackPanel#PART_LayoutRoot"> <Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Orientation" Value="Horizontal" /> </Style>
</Style> <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Style Selector="^[LabelPosition=Right] /template/ ContentPresenter#PART_IconPresenter"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[LabelPosition=Right] /template/ TextBlock#PART_Label"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> </Style>
<!-- IsInOverflow: full-width horizontal layout --> <!-- IsInOverflow: full-width horizontal layout for use inside overflow popup -->
<Style Selector="^[IsInOverflow=True]"> <Style Selector="^[IsInOverflow=True]">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Width" Value="{x:Static x:Double.NaN}" /> <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
<Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
<Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" /> <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
</Style> <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
<Style Selector="^[IsInOverflow=True] /template/ StackPanel#PART_LayoutRoot"> <Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Orientation" Value="Horizontal" /> </Style>
</Style> <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Style Selector="^[IsInOverflow=True] /template/ ContentPresenter#PART_IconPresenter"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> <Style Selector="^ /template/ TextBlock#PART_Label">
<Style Selector="^[IsInOverflow=True] /template/ TextBlock#PART_Label"> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
@@ -325,18 +295,12 @@
<Panel> <Panel>
<DockPanel> <DockPanel>
<!-- Overflow button (docked right) --> <!-- Overflow button (docked right) -->
<Button <AppBarButton
Name="PART_OverflowButton" Name="PART_OverflowButton"
DockPanel.Dock="Right" DockPanel.Dock="Right"
Theme="{DynamicResource AppBarOverflowButton}" Icon="{DynamicResource CommandBarOverflowButtonGlyph}"
IsVisible="{TemplateBinding IsOverflowButtonVisible}" IsCompact="True"
VerticalAlignment="Stretch"> IsVisible="{TemplateBinding IsOverflowButtonVisible}" />
<PathIcon
Width="{DynamicResource AppBarButtonIconSize}"
Height="{DynamicResource AppBarButtonIconSize}"
Foreground="{TemplateBinding Foreground}"
Data="{DynamicResource CommandBarOverflowButtonGlyph}" />
</Button>
<!-- Custom content (docked left) --> <!-- Custom content (docked left) -->
<ContentPresenter <ContentPresenter
@@ -369,18 +333,22 @@
IsLightDismissEnabled="True" IsLightDismissEnabled="True"
WindowManagerAddShadowHint="False"> WindowManagerAddShadowHint="False">
<Border <Border
MinHeight="{DynamicResource CommandBarOverflowMinHeight}"
MaxWidth="{DynamicResource CommandBarOverflowMaxWidth}"
MaxHeight="{DynamicResource CommandBarOverflowMaxHeight}"
Margin="{DynamicResource CommandBarOverflowMargin}"
Padding="{DynamicResource CommandBarOverflowPadding}"
Background="{DynamicResource CommandBarOverflowBackground}" Background="{DynamicResource CommandBarOverflowBackground}"
BorderBrush="{DynamicResource CommandBarOverflowBorderBrush}" BorderBrush="{DynamicResource CommandBarOverflowBorderBrush}"
BorderThickness="{DynamicResource CommandBarBorderThickness}" BorderThickness="{DynamicResource CommandBarBorderThickness}"
BoxShadow="{DynamicResource CommandBarOverflowBoxShadow}" BoxShadow="{DynamicResource CommandBarOverflowBoxShadow}"
CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}" CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}">
Padding="{DynamicResource CommandBarOverflowPadding}"
MinWidth="{DynamicResource CommandBarOverflowMinWidth}">
<ItemsControl <ItemsControl
ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}"> ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
<ItemsControl.ItemsPanel> <ItemsControl.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<StackPanel Spacing="2" /> <StackPanel />
</ItemsPanelTemplate> </ItemsPanelTemplate>
</ItemsControl.ItemsPanel> </ItemsControl.ItemsPanel>
</ItemsControl> </ItemsControl>
@@ -392,15 +360,4 @@
</Setter> </Setter>
</ControlTheme> </ControlTheme>
<!-- Overflow button inner theme (borderless, transparent) -->
<ControlTheme x:Key="AppBarOverflowButton" TargetType="Button"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
<Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
<Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>

9
src/Semi.Avalonia/Themes/Shared/CommandBar.axaml
View File

@@ -1,10 +1,10 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- AppBarButton / AppBarToggleButton --> <!-- AppBarButton / AppBarToggleButton -->
<x:Double x:Key="AppBarButtonWidth">68</x:Double> <x:Double x:Key="AppBarButtonWidth">64</x:Double>
<x:Double x:Key="AppBarButtonCompactWidth">40</x:Double> <x:Double x:Key="AppBarButtonCompactWidth">40</x:Double>
<x:Double x:Key="AppBarButtonMinHeight">40</x:Double> <x:Double x:Key="AppBarButtonMinHeight">40</x:Double>
<x:Double x:Key="AppBarButtonIconSize">20</x:Double>
<Thickness x:Key="AppBarButtonPadding">8 4</Thickness> <Thickness x:Key="AppBarButtonPadding">8 4</Thickness>
<x:Double x:Key="AppBarButtonPanelSpacing">4</x:Double>
<StaticResource x:Key="AppBarButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" /> <StaticResource x:Key="AppBarButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
<StaticResource x:Key="AppBarButtonLabelFontSize" ResourceKey="SemiFontSizeSmall" /> <StaticResource x:Key="AppBarButtonLabelFontSize" ResourceKey="SemiFontSizeSmall" />
<x:Double x:Key="AppBarButtonOverflowMinHeight">36</x:Double> <x:Double x:Key="AppBarButtonOverflowMinHeight">36</x:Double>
@@ -22,8 +22,11 @@
<StaticResource x:Key="CommandBarBorderThickness" ResourceKey="SemiBorderThicknessControl" /> <StaticResource x:Key="CommandBarBorderThickness" ResourceKey="SemiBorderThicknessControl" />
<!-- CommandBar overflow popup --> <!-- CommandBar overflow popup -->
<StaticResource x:Key="CommandBarOverflowCornerRadius" ResourceKey="SemiBorderRadiusMedium" /> <StaticResource x:Key="CommandBarOverflowCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
<x:Double x:Key="CommandBarOverflowMinHeight">16</x:Double>
<x:Double x:Key="CommandBarOverflowMaxHeight">400</x:Double>
<x:Double x:Key="CommandBarOverflowMaxWidth">600</x:Double>
<Thickness x:Key="CommandBarOverflowPadding">0 4</Thickness> <Thickness x:Key="CommandBarOverflowPadding">0 4</Thickness>
<x:Double x:Key="CommandBarOverflowMinWidth">160</x:Double> <Thickness x:Key="CommandBarOverflowMargin">8</Thickness>
<!-- Overflow button glyph --> <!-- Overflow button glyph -->
<StaticResource x:Key="CommandBarOverflowButtonGlyph" ResourceKey="SemiIconMore" /> <StaticResource x:Key="CommandBarOverflowButtonGlyph" ResourceKey="SemiIconMore" />
</ResourceDictionary> </ResourceDictionary>