Skip to content

Commit 517d64f

Browse files
mou-hazmou-haz
committed
[Fix] Update CommandBarFlyou Style
updated command bar flyout and appbar button style to be more like the winui counterparts minor test minor test
1 parent 1cb363b commit 517d64f

File tree

3 files changed

+67
-22
lines changed

3 files changed

+67
-22
lines changed

‎source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBar/AppBarButton.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,7 @@ private void UpdateVisualState(bool useTransitions = true)
389389
UpdateCommonState(useTransitions);
390390
UpdateKeyboardAcceleratorTextVisibility(useTransitions);
391391
UpdateFlyoutState(useTransitions);
392+
UpdatePrimaryLabelState(useTransitions);
392393
}
393394

394395
private void UpdateCommonState(bool useTransitions = true)
@@ -444,6 +445,12 @@ private void UpdateFlyoutState(bool useTransitions = true)
444445
VisualStateManager.GoToState(this, hasFlyout ? "HasFlyout" : "NoFlyout", useTransitions);
445446
}
446447

448+
private void UpdatePrimaryLabelState(bool useTransitions = true)
449+
{
450+
bool hasPrimaryLabel = !IsInOverflow && Label is not null;
451+
VisualStateManager.GoToState(this, hasPrimaryLabel ? "HasPrimaryLabels" : "NoPrimaryLabels", useTransitions);
452+
}
453+
447454
private AppBarElementVisualStateManager _vsm;
448455
}
449456

‎source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.xaml‎

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@
2424
<Setter Property="VerticalAlignment" Value="Stretch" />
2525
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
2626
<Setter Property="FontWeight" Value="Normal" />
27-
<Setter Property="Width" Value="40" />
28-
<Setter Property="Height" Value="40" />
27+
<Setter Property="Width" Value="NaN" />
2928
<Setter Property="UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
3029
<Setter Property="FocusVisualMargin" Value="0,0,0,2" />
3130
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
@@ -46,21 +45,36 @@
4645
BorderThickness="{TemplateBinding BorderThickness}"
4746
CornerRadius="{TemplateBinding CornerRadius}" />
4847

49-
<Grid x:Name="ContentRoot">
48+
<Grid x:Name="ContentRoot" MinWidth="40">
5049
<Grid.ColumnDefinitions>
5150
<ColumnDefinition Width="*" />
5251
<ColumnDefinition Width="Auto" />
5352
<ColumnDefinition Width="Auto" />
5453
</Grid.ColumnDefinitions>
55-
<Viewbox
56-
x:Name="ContentViewbox"
57-
Height="16"
58-
HorizontalAlignment="Stretch">
59-
<ui:ContentPresenterEx
60-
x:Name="Content"
61-
Content="{TemplateBinding Icon}"
62-
Foreground="{TemplateBinding Foreground}" />
63-
</Viewbox>
54+
<Grid x:Name="IconAndLabelPanel" VerticalAlignment="Center">
55+
<Grid.RowDefinitions>
56+
<RowDefinition Height="*" />
57+
<RowDefinition Height="Auto" />
58+
</Grid.RowDefinitions>
59+
<Viewbox x:Name="ContentViewbox" Height="16">
60+
<ui:ContentPresenterEx
61+
x:Name="Content"
62+
Content="{TemplateBinding Icon}"
63+
Foreground="{TemplateBinding Foreground}"/>
64+
</Viewbox>
65+
<TextBlock x:Name="TextLabel"
66+
Grid.Row="1"
67+
Text="{TemplateBinding Label}"
68+
Style="{DynamicResource CaptionTextBlockStyle}"
69+
Foreground="{TemplateBinding Foreground}"
70+
FontFamily="{TemplateBinding FontFamily}"
71+
TextAlignment="Center"
72+
TextTrimming="CharacterEllipsis"
73+
TextWrapping="Wrap"
74+
HorizontalAlignment="Center"
75+
Margin="0,6,0,2"
76+
Visibility="Collapsed" />
77+
</Grid>
6478
<TextBlock
6579
x:Name="OverflowTextLabel"
6680
Margin="12,0,12,0"
@@ -73,6 +87,7 @@
7387
Text="{TemplateBinding Label}"
7488
TextAlignment="Left"
7589
TextWrapping="NoWrap"
90+
TextTrimming="CharacterEllipsis"
7691
Visibility="Collapsed" />
7792
<TextBlock
7893
x:Name="KeyboardAcceleratorTextLabel"
@@ -90,10 +105,10 @@
90105
Grid.Column="2"
91106
Margin="12,0,12,0"
92107
VerticalAlignment="Center"
93-
FontFamily="{DynamicResource FluentSystemIcons}"
108+
FontFamily="{DynamicResource SymbolThemeFontFamily}"
94109
FontSize="12"
95110
Foreground="{DynamicResource CommandBarFlyoutAppBarButtonSubItemChevronForeground}"
96-
Glyph="&#xF2B0;"
111+
Glyph="&#xE76C;"
97112
Visibility="Collapsed" />
98113
</Grid>
99114
<VisualStateManager.VisualStateGroups>
@@ -137,6 +152,13 @@
137152
<VisualState x:Name="NoFlyout" />
138153
<VisualState x:Name="HasFlyout" />
139154
</VisualStateGroup>
155+
<VisualStateGroup x:Name="PrimaryLabelStates">
156+
<ui:VisualStateGroupListener.Listener>
157+
<ui:VisualStateGroupListener x:Name="PrimaryLabelStatesListener" />
158+
</ui:VisualStateGroupListener.Listener>
159+
<VisualState x:Name="NoPrimaryLabels" />
160+
<VisualState x:Name="HasPrimaryLabels" />
161+
</VisualStateGroup>
140162
</VisualStateManager.VisualStateGroups>
141163
</Grid>
142164
<ControlTemplate.Triggers>
@@ -154,6 +176,7 @@
154176
<Setter TargetName="ContentRoot" Property="MinHeight" Value="0" />
155177
<Setter TargetName="ContentRoot" Property="Width" Value="NaN" />
156178
<Setter TargetName="ContentViewbox" Property="Visibility" Value="Collapsed" />
179+
<Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
157180
<Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
158181
<Setter TargetName="OverflowTextLabel" Property="Margin" Value="39,0,12,0" />
159182
</Trigger>
@@ -166,6 +189,7 @@
166189
<Setter TargetName="ContentViewbox" Property="Width" Value="16" />
167190
<Setter TargetName="ContentViewbox" Property="Height" Value="16" />
168191
<Setter TargetName="ContentViewbox" Property="Margin" Value="12,0,12,0" />
192+
<Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
169193
<Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
170194
<Setter TargetName="OverflowTextLabel" Property="Margin" Value="39,0,12,0" />
171195
</Trigger>
@@ -178,6 +202,7 @@
178202
<Setter TargetName="ContentViewbox" Property="Width" Value="16" />
179203
<Setter TargetName="ContentViewbox" Property="Height" Value="16" />
180204
<Setter TargetName="ContentViewbox" Property="Margin" Value="39,0,12,0" />
205+
<Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
181206
<Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
182207
<Setter TargetName="OverflowTextLabel" Property="Margin" Value="67,0,12,0" />
183208
</Trigger>
@@ -187,16 +212,19 @@
187212
<Trigger SourceName="CommonStatesListener" Property="CurrentStateName" Value="PointerOver">
188213
<Setter TargetName="AppBarButtonInnerBorder" Property="Background" Value="{DynamicResource CommandBarFlyoutAppBarButtonBackgroundPointerOver}" />
189214
<Setter TargetName="Content" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPointerOver}" />
215+
<Setter TargetName="TextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPointerOver}" />
190216
</Trigger>
191217
<!-- Pressed -->
192218
<Trigger SourceName="CommonStatesListener" Property="CurrentStateName" Value="Pressed">
193219
<Setter TargetName="AppBarButtonInnerBorder" Property="Background" Value="{DynamicResource CommandBarFlyoutAppBarButtonBackgroundPressed}" />
194220
<Setter TargetName="Content" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPressed}" />
221+
<Setter TargetName="TextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPressed}" />
195222
</Trigger>
196223
<!-- Disabled -->
197224
<Trigger SourceName="CommonStatesListener" Property="CurrentStateName" Value="Disabled">
198225
<Setter TargetName="AppBarButtonInnerBorder" Property="Background" Value="{DynamicResource CommandBarFlyoutAppBarButtonBackgroundDisabled}" />
199226
<Setter TargetName="Content" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
227+
<Setter TargetName="TextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
200228
<Setter TargetName="OverflowTextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
201229
<Setter TargetName="KeyboardAcceleratorTextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
202230
<Setter TargetName="SubItemChevron" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonSubItemChevronDisabledForeground}" />
@@ -234,6 +262,13 @@
234262
<Trigger SourceName="FlyoutStatesListener" Property="CurrentStateName" Value="HasFlyout">
235263
<Setter TargetName="SubItemChevron" Property="Visibility" Value="{DynamicResource AppBarButtonHasFlyoutChevronVisibility}" />
236264
</Trigger>
265+
<!-- HasPrimaryLabels -->
266+
<Trigger SourceName="PrimaryLabelStatesListener" Property="CurrentStateName" Value="HasPrimaryLabels">
267+
<Setter TargetName="IconAndLabelPanel" Property="Margin" Value="0,9,0,0" />
268+
<Setter TargetName="IconAndLabelPanel" Property="VerticalAlignment" Value="Top" />
269+
<Setter TargetName="IconAndLabelPanel" Property="Width" Value="60" />
270+
<Setter TargetName="TextLabel" Property="Visibility" Value="Visible" />
271+
</Trigger>
237272
</ControlTemplate.Triggers>
238273
</ControlTemplate>
239274
</Setter.Value>
@@ -1096,12 +1131,11 @@
10961131
<Grid>
10971132
<Grid.ColumnDefinitions>
10981133
<ColumnDefinition Width="*" />
1099-
<ColumnDefinition Width="Auto" />
1134+
<ColumnDefinition Width="Auto" MinWidth="3" />
11001135
</Grid.ColumnDefinitions>
11011136
<primitives:CommandBarPanel
11021137
x:Name="PART_ToolBarPanel"
11031138
Grid.Column="0"
1104-
Height="40"
11051139
Margin="3,3,0,3"
11061140
HorizontalAlignment="Left"
11071141
IsItemsHost="true"
@@ -1123,9 +1157,9 @@
11231157
x:Name="EllipsisIcon"
11241158
HorizontalAlignment="Center"
11251159
VerticalAlignment="Center"
1126-
FontFamily="{DynamicResource FluentSystemIcons}"
1160+
FontFamily="{DynamicResource SymbolThemeFontFamily}"
11271161
FontSize="16"
1128-
Glyph="&#xE827;" />
1162+
Glyph="&#xE712;" />
11291163
</ToggleButton>
11301164
</Grid>
11311165
</Border>
@@ -1304,13 +1338,12 @@
13041338
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarFlyoutBorderBrush}" />
13051339
<Setter Property="BorderThickness" Value="{DynamicResource CommandBarFlyoutBorderThemeThickness}" />
13061340
<Setter Property="IsTabStop" Value="False" />
1307-
<Setter Property="VerticalAlignment" Value="Top" />
1341+
<Setter Property="VerticalAlignment" Value="Stretch" />
13081342
<Setter Property="HorizontalAlignment" Value="Left" />
13091343
<Setter Property="HorizontalContentAlignment" Value="Left" />
1310-
<Setter Property="VerticalContentAlignment" Value="Top" />
1344+
<Setter Property="VerticalContentAlignment" Value="Stretch" />
13111345
<Setter Property="DefaultLabelPosition" Value="Collapsed" />
13121346
<Setter Property="MaxWidth" Value="440" />
1313-
<Setter Property="Height" Value="48" />
13141347
<Setter Property="IsDynamicOverflowEnabled" Value="True" />
13151348
<Setter Property="CommandBarOverflowPresenterStyle" Value="{StaticResource CommandBarFlyoutCommandBarOverflowPresenterStyle}" />
13161349
<Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />

‎source/iNKORE.UI.WPF.Modern/Themes/Controls/CommandBar.xaml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,15 @@
8181
<Setter Property="BorderBrush" Value="{DynamicResource CommandBarFlyoutAppBarButtonBorderBrush}" />
8282
<Setter Property="Padding" Value="0" />
8383
<Setter Property="Width" Value="44" />
84-
<Setter Property="Height" Value="40" />
84+
<Setter Property="MinHeight" Value="40" />
85+
<Setter Property="HorizontalAlignment" Value="Stretch" />
8586
<Setter Property="HorizontalContentAlignment" Value="Center" />
87+
<Setter Property="VerticalAlignment" Value="Stretch" />
8688
<Setter Property="VerticalContentAlignment" Value="Center" />
89+
<Setter Property="FontWeight" Value="SemiBold" />
90+
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
8791
<Setter Property="chelper:FocusVisualHelper.FocusVisualMargin" Value="0" />
92+
<Setter Property="chelper:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
8893
<Setter Property="Template">
8994
<Setter.Value>
9095
<ControlTemplate TargetType="ToggleButton">

0 commit comments

Comments
 (0)