Skip to content

Commit a84db69

Browse files
United600huynhsontung
United600
and
huynhsontung
authored
style: minor UI fixes (#464)
* fix custom accent brushes * remove xaml ui command * fix artists page shuffle button minimal state add scrollchaining to semantic zoom * fix network page no content grid * fix titlebar text theme switching * improve player header and controls background * reorder dropdown content property and simplify method * revert AccentFillColorCustomBrush change --------- Co-authored-by: Tung Huynh <tung75605@gmail.com>
1 parent bd4e86b commit a84db69

8 files changed

+100
-88
lines changed

‎Screenbox/Pages/AlbumsPage.xaml

+5-3
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
Margin="{StaticResource ContentPagePadding}"
7676
HorizontalAlignment="Right"
7777
AccessKey="{strings:KeyboardResources Key=CommandSortByKey}"
78+
AutomationProperties.Name="{x:Bind SortByText.Text}"
7879
Background="Transparent"
7980
BorderBrush="Transparent">
8081
<muxc:DropDownButton.Flyout>
@@ -107,7 +108,7 @@
107108
</MenuFlyout>
108109
</muxc:DropDownButton.Flyout>
109110
<StackPanel Orientation="Horizontal">
110-
<FontIcon Margin="0,0,8,0" Glyph="&#xE8cb;" />
111+
<FontIcon Margin="0,0,8,0" Glyph="&#xE8CB;" />
111112
<TextBlock x:Name="SortByText"><Run Text="{strings:Resources Key=SortBy}" /><Run Text=":&#160;" /></TextBlock>
112113
<TextBlock Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Text="{x:Bind GetSortByText(ViewModel.SortBy), Mode=OneWay}" />
113114
</StackPanel>
@@ -133,6 +134,7 @@
133134
ItemTemplate="{StaticResource AlbumGridViewItemTemplate}"
134135
ItemsSource="{x:Bind AlbumsSource.View}"
135136
Loaded="AlbumGridView_OnLoaded"
137+
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
136138
SelectionMode="None">
137139
<GridView.GroupStyle>
138140
<GroupStyle
@@ -190,11 +192,11 @@
190192
</triggers:IsEqualStateTrigger>
191193
</VisualState.StateTriggers>
192194
<VisualState.Setters>
193-
<Setter Target="AlbumGridView.Padding" Value="{StaticResource GridViewContentPageMinimalPadding}" />
194-
<Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
195195
<Setter Target="ShufflePlayButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
196196
<Setter Target="SortByButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
197197
<Setter Target="SortByText.Visibility" Value="Collapsed" />
198+
<Setter Target="AlbumGridView.Padding" Value="{StaticResource GridViewContentPageMinimalPadding}" />
199+
<Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
198200
</VisualState.Setters>
199201
</VisualState>
200202
</VisualStateGroup>

‎Screenbox/Pages/ArtistsPage.xaml

+3-2
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
ItemTemplate="{StaticResource ArtistGridViewItemTemplate}"
8282
ItemsSource="{x:Bind ArtistsSource.View}"
8383
Loaded="ArtistGridView_OnLoaded"
84+
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
8485
SelectionMode="None">
8586
<GridView.GroupStyle>
8687
<GroupStyle
@@ -134,10 +135,10 @@
134135
</triggers:IsEqualStateTrigger>
135136
</VisualState.StateTriggers>
136137
<VisualState.Setters>
138+
<Setter Target="ShufflePlayButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
139+
<!--<Setter Target="SortByButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />-->
137140
<Setter Target="ArtistGridView.Padding" Value="{StaticResource GridViewContentPageMinimalPadding}" />
138141
<Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
139-
<Setter Target="ShufflePlayButton.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
140-
<Setter Target="SortByButton.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
141142
</VisualState.Setters>
142143
</VisualState>
143144
</VisualStateGroup>

‎Screenbox/Pages/HomePage.xaml

+21-29
Original file line numberDiff line numberDiff line change
@@ -23,37 +23,29 @@
2323
<ResourceDictionary Source="/Controls/Templates/GridViewItemTemplates.xaml" />
2424
</ResourceDictionary.MergedDictionaries>
2525

26-
<XamlUICommand
27-
x:Key="PlayCommand"
28-
Command="{x:Bind ViewModel.PlayCommand}"
29-
IconSource="{ui:SymbolIconSource Symbol=Play}"
30-
Label="{strings:Resources Key=Play}" />
31-
32-
<XamlUICommand
33-
x:Key="PlayNextCommand"
34-
Command="{x:Bind ViewModel.PlayNextCommand}"
35-
IconSource="{ui:FontIconSource FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
36-
Glyph=&#xF5EB;}"
37-
Label="{strings:Resources Key=PlayNext}" />
38-
39-
<XamlUICommand
40-
x:Key="RemoveCommand"
41-
Command="{x:Bind ViewModel.RemoveCommand}"
42-
IconSource="{ui:SymbolIconSource Symbol=Clear}"
43-
Label="{strings:Resources Key=Remove}" />
44-
45-
<XamlUICommand
46-
x:Key="PropertiesCommand"
47-
Command="{StaticResource ShowPropertiesCommand}"
48-
IconSource="{ui:FontIconSource Glyph=&#xE946;}"
49-
Label="{strings:Resources Key=Properties}" />
50-
5126
<MenuFlyout x:Name="ItemFlyout">
52-
<MenuFlyoutItem Command="{StaticResource PlayCommand}" CommandParameter="{Binding}" />
53-
<MenuFlyoutItem Command="{StaticResource PlayNextCommand}" CommandParameter="{Binding}" />
27+
<MenuFlyoutItem
28+
Command="{x:Bind ViewModel.PlayCommand}"
29+
CommandParameter="{Binding}"
30+
Icon="{ui:SymbolIcon Symbol=Play}"
31+
Text="{strings:Resources Key=Play}" />
32+
<MenuFlyoutItem
33+
Command="{x:Bind ViewModel.PlayNextCommand}"
34+
CommandParameter="{Binding}"
35+
Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
36+
Glyph=&#xF5EB;}"
37+
Text="{strings:Resources Key=PlayNext}" />
5438
<MenuFlyoutSeparator />
55-
<MenuFlyoutItem Command="{StaticResource RemoveCommand}" CommandParameter="{Binding}" />
56-
<MenuFlyoutItem Command="{StaticResource PropertiesCommand}" CommandParameter="{Binding}" />
39+
<MenuFlyoutItem
40+
Command="{x:Bind ViewModel.RemoveCommand}"
41+
CommandParameter="{Binding}"
42+
Icon="{ui:SymbolIcon Symbol=Clear}"
43+
Text="{strings:Resources Key=Remove}" />
44+
<MenuFlyoutItem
45+
Command="{StaticResource ShowPropertiesCommand}"
46+
CommandParameter="{Binding}"
47+
Icon="{ui:FontIcon Glyph=&#xE946;}"
48+
Text="{strings:Resources Key=Properties}" />
5749
<MenuFlyoutSeparator Visibility="{x:Bind Common.IsAdvancedModeEnabled}" />
5850
<MenuFlyoutItem
5951
CommandParameter="{Binding}"

‎Screenbox/Pages/MainPage.xaml

+10
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,16 @@
290290
</Grid>
291291

292292
<VisualStateManager.VisualStateGroups>
293+
<VisualStateGroup x:Name="WindowActivationStates">
294+
<VisualState x:Name="Activated" />
295+
296+
<VisualState x:Name="Deactivated">
297+
<VisualState.Setters>
298+
<Setter Target="AppTitleText.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
299+
</VisualState.Setters>
300+
</VisualState>
301+
</VisualStateGroup>
302+
293303
<VisualStateGroup x:Name="CriticalErrorStates">
294304
<VisualState x:Name="CriticalErrorVisible">
295305
<VisualState.StateTriggers>

‎Screenbox/Pages/MainPage.xaml.cs

+5-6
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,18 @@ private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sende
8181
RightPaddingColumn.Width = new GridLength(Math.Max(sender.SystemOverlayLeftInset, sender.SystemOverlayRightInset));
8282
}
8383

84-
// Update the TitleBar based on the inactive/active state of the app
84+
/// <summary>
85+
/// Change the <see cref="VisualState"/> depending on whether the app is active or inactive.
86+
/// </summary>
8587
private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
8688
{
87-
SolidColorBrush defaultForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorPrimaryBrush"];
88-
SolidColorBrush inactiveForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorDisabledBrush"];
89-
9089
if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
9190
{
92-
AppTitleText.Foreground = inactiveForegroundBrush;
91+
VisualStateManager.GoToState(this, "Deactivated", true);
9392
}
9493
else
9594
{
96-
AppTitleText.Foreground = defaultForegroundBrush;
95+
VisualStateManager.GoToState(this, "Activated", true);
9796
}
9897
}
9998

‎Screenbox/Pages/NetworkPage.xaml

+1-2
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@
4747
<!-- Network-Drive-is-empty content -->
4848
<Grid
4949
x:Name="NoNetworkDrivePanel"
50-
Grid.Row="1"
51-
Grid.RowSpan="2"
50+
Grid.Row="2"
5251
Margin="{x:Bind Common.FooterBottomPaddingMargin, Mode=OneWay}"
5352
Padding="{StaticResource ContentPagePadding}"
5453
HorizontalAlignment="Center"

‎Screenbox/Pages/PlayerPage.xaml

+34-21
Original file line numberDiff line numberDiff line change
@@ -35,40 +35,53 @@
3535
<Color x:Key="BackgroundAcrylicTintColor">#202020</Color>
3636
<Color x:Key="BackgroundAcrylicTintFallbackColor">#C92C2C2C</Color>
3737
<x:Double x:Key="BackgroundAcrylicTintOpacity">0.5</x:Double>
38-
<StaticResource x:Key="HeaderBackgroundGradientBrush" ResourceKey="HeaderBackgroundLinearGradient" />
39-
<StaticResource x:Key="ControlsBackgroundGradientBrush" ResourceKey="ControlsBackgroundLinearGradient" />
38+
39+
<LinearGradientBrush x:Key="HeaderBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
40+
<LinearGradientBrush.GradientStops>
41+
<GradientStop Offset="0" Color="{StaticResource SystemAltMediumColor}" />
42+
<GradientStop Offset="0.5" Color="{StaticResource SystemAltLowColor}" />
43+
<GradientStop Offset="1" Color="#00000000" />
44+
</LinearGradientBrush.GradientStops>
45+
</LinearGradientBrush>
46+
<LinearGradientBrush x:Key="PlayerControlsBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
47+
<LinearGradientBrush.GradientStops>
48+
<GradientStop Offset="0" Color="#00000000" />
49+
<GradientStop Offset="1" Color="{StaticResource SystemAltMediumColor}" />
50+
</LinearGradientBrush.GradientStops>
51+
</LinearGradientBrush>
4052
</ResourceDictionary>
4153
<ResourceDictionary x:Key="Light">
4254
<Color x:Key="BackgroundAcrylicTintColor">#FCFCFC</Color>
4355
<Color x:Key="BackgroundAcrylicTintFallbackColor">#C9F9F9F9</Color>
4456
<x:Double x:Key="BackgroundAcrylicTintOpacity">0.45</x:Double>
45-
<StaticResource x:Key="HeaderBackgroundGradientBrush" ResourceKey="HeaderBackgroundLinearGradient" />
46-
<StaticResource x:Key="ControlsBackgroundGradientBrush" ResourceKey="ControlsBackgroundLinearGradient" />
57+
58+
<LinearGradientBrush x:Key="HeaderBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
59+
<LinearGradientBrush.GradientStops>
60+
<GradientStop Offset="0" Color="{StaticResource SystemAltMediumColor}" />
61+
<GradientStop Offset="0.5" Color="{StaticResource SystemAltLowColor}" />
62+
<GradientStop Offset="1" Color="#00FFFFFF" />
63+
</LinearGradientBrush.GradientStops>
64+
</LinearGradientBrush>
65+
<LinearGradientBrush x:Key="PlayerControlsBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
66+
<LinearGradientBrush.GradientStops>
67+
<GradientStop Offset="0" Color="#00FFFFFF" />
68+
<GradientStop Offset="1" Color="{StaticResource SystemAltMediumColor}" />
69+
</LinearGradientBrush.GradientStops>
70+
</LinearGradientBrush>
4771
</ResourceDictionary>
4872
<ResourceDictionary x:Key="HighContrast">
4973
<StaticResource x:Key="BackgroundAcrylicTintColor" ResourceKey="SystemColorWindowColor" />
5074
<StaticResource x:Key="BackgroundAcrylicTintFallbackColor" ResourceKey="SystemColorWindowColor" />
5175
<x:Double x:Key="BackgroundAcrylicTintOpacity">1</x:Double>
52-
<StaticResource x:Key="HeaderBackgroundGradientBrush" ResourceKey="SystemColorWindowColorBrush" />
53-
<StaticResource x:Key="ControlsBackgroundGradientBrush" ResourceKey="SystemColorWindowColorBrush" />
76+
5477
<StaticResource x:Key="ProgressBarBackground" ResourceKey="SystemColorButtonTextColorBrush" />
5578
<Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>
79+
80+
<StaticResource x:Key="HeaderBackgroundBrush" ResourceKey="SystemColorWindowColorBrush" />
81+
<StaticResource x:Key="PlayerControlsBackgroundBrush" ResourceKey="SystemColorWindowColorBrush" />
5682
</ResourceDictionary>
5783
</ResourceDictionary.ThemeDictionaries>
5884

59-
<LinearGradientBrush x:Key="HeaderBackgroundLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
60-
<LinearGradientBrush.GradientStops>
61-
<GradientStop Offset="0" Color="{StaticResource SystemChromeBlackMediumLowColor}" />
62-
<GradientStop Offset="1" Color="#00000000" />
63-
</LinearGradientBrush.GradientStops>
64-
</LinearGradientBrush>
65-
<LinearGradientBrush x:Name="ControlsBackgroundLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
66-
<LinearGradientBrush.GradientStops>
67-
<GradientStop Offset="0" Color="#00000000" />
68-
<GradientStop Offset="1" Color="{StaticResource SystemChromeBlackMediumLowColor}" />
69-
</LinearGradientBrush.GradientStops>
70-
</LinearGradientBrush>
71-
7285
<ctConverters:BoolToObjectConverter
7386
x:Key="FilledPlayPauseGlyphConverter"
7487
FalseValue="&#xE62E;"
@@ -161,7 +174,7 @@
161174
Grid.Column="0"
162175
Height="72"
163176
MinHeight="32"
164-
Background="{ThemeResource HeaderBackgroundGradientBrush}"
177+
Background="{ThemeResource HeaderBackgroundBrush}"
165178
Canvas.ZIndex="3" />
166179

167180
<Grid
@@ -580,7 +593,7 @@
580593
x:Name="PlayerControlsBackground"
581594
Grid.Row="2"
582595
Grid.Column="0"
583-
Background="{ThemeResource ControlsBackgroundGradientBrush}"
596+
Background="{ThemeResource PlayerControlsBackgroundBrush}"
584597
Tapped="PlayerControlsBackground_OnTapped" />
585598

586599
<controls:PlayerControls

‎Screenbox/Pages/SongsPage.xaml

+21-25
Original file line numberDiff line numberDiff line change
@@ -26,30 +26,24 @@
2626
<TextBlock Text="{Binding Key}" TextTrimming="CharacterEllipsis" />
2727
</DataTemplate>
2828

29-
<XamlUICommand
30-
x:Key="PlayCommand"
31-
Command="{x:Bind ViewModel.PlayCommand}"
32-
IconSource="{ui:SymbolIconSource Symbol=Play}"
33-
Label="{strings:Resources Key=Play}" />
34-
35-
<XamlUICommand
36-
x:Key="PlayNextCommand"
37-
Command="{x:Bind ViewModel.PlayNextCommand}"
38-
IconSource="{ui:FontIconSource FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
39-
Glyph=&#xF5EB;}"
40-
Label="{strings:Resources Key=PlayNext}" />
41-
42-
<XamlUICommand
43-
x:Key="PropertiesCommand"
44-
Command="{StaticResource ShowPropertiesCommand}"
45-
IconSource="{ui:FontIconSource Glyph=&#xE946;}"
46-
Label="{strings:Resources Key=Properties}" />
47-
4829
<MenuFlyout x:Name="ItemFlyout">
49-
<MenuFlyoutItem Command="{StaticResource PlayCommand}" CommandParameter="{Binding}" />
50-
<MenuFlyoutItem Command="{StaticResource PlayNextCommand}" CommandParameter="{Binding}" />
30+
<MenuFlyoutItem
31+
Command="{x:Bind ViewModel.PlayCommand}"
32+
CommandParameter="{Binding}"
33+
Icon="{ui:SymbolIcon Symbol=Play}"
34+
Text="{strings:Resources Key=Play}" />
35+
<MenuFlyoutItem
36+
Command="{x:Bind ViewModel.PlayNextCommand}"
37+
CommandParameter="{Binding}"
38+
Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
39+
Glyph=&#xF5EB;}"
40+
Text="{strings:Resources Key=PlayNext}" />
5141
<MenuFlyoutSeparator />
52-
<MenuFlyoutItem Command="{StaticResource PropertiesCommand}" CommandParameter="{Binding}" />
42+
<MenuFlyoutItem
43+
Command="{StaticResource ShowPropertiesCommand}"
44+
CommandParameter="{Binding}"
45+
Icon="{ui:FontIcon Glyph=&#xE946;}"
46+
Text="{strings:Resources Key=Properties}" />
5347
<MenuFlyoutSeparator Visibility="{x:Bind Common.IsAdvancedModeEnabled}" />
5448
<MenuFlyoutItem
5549
CommandParameter="{Binding}"
@@ -94,6 +88,7 @@
9488
Margin="{StaticResource ContentPagePadding}"
9589
HorizontalAlignment="Right"
9690
AccessKey="{strings:KeyboardResources Key=CommandSortByKey}"
91+
AutomationProperties.Name="{x:Bind SortByText.Text}"
9792
Background="Transparent"
9893
BorderBrush="Transparent">
9994
<muxc:DropDownButton.Flyout>
@@ -132,7 +127,7 @@
132127
</MenuFlyout>
133128
</muxc:DropDownButton.Flyout>
134129
<StackPanel Orientation="Horizontal">
135-
<FontIcon Margin="0,0,8,0" Glyph="&#xE8cb;" />
130+
<FontIcon Margin="0,0,8,0" Glyph="&#xE8CB;" />
136131
<TextBlock x:Name="SortByText"><Run Text="{strings:Resources Key=SortBy}" /><Run Text=":&#160;" /></TextBlock>
137132
<TextBlock Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Text="{x:Bind GetSortByText(ViewModel.SortBy), Mode=OneWay}" />
138133
</StackPanel>
@@ -158,6 +153,7 @@
158153
ItemContainerStyle="{StaticResource ListViewItemFocusEngagementStyle}"
159154
ItemsSource="{x:Bind SongsSource.View, Mode=OneWay}"
160155
Loaded="SongListView_OnLoaded"
156+
ScrollViewer.IsVerticalScrollChainingEnabled="False"
161157
SelectionMode="None">
162158
<ListView.ItemTemplate>
163159
<DataTemplate>
@@ -225,11 +221,11 @@
225221
</triggers:IsEqualStateTrigger>
226222
</VisualState.StateTriggers>
227223
<VisualState.Setters>
228-
<Setter Target="SongListView.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
229-
<Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
230224
<Setter Target="ShufflePlayButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
231225
<Setter Target="SortByButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
232226
<Setter Target="SortByText.Visibility" Value="Collapsed" />
227+
<Setter Target="SongListView.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
228+
<Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
233229
</VisualState.Setters>
234230
</VisualState>
235231
</VisualStateGroup>

0 commit comments

Comments
 (0)