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>
huynhsontung · Oct 30, 2024 · a84db69 · a84db69
1 parent bd4e86b
commit a84db69
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 88 deletions.
diff --git a/Screenbox/Pages/AlbumsPage.xaml b/Screenbox/Pages/AlbumsPage.xaml
@@ -75,6 +75,7 @@
             Margin="{StaticResource ContentPagePadding}"
             HorizontalAlignment="Right"
             AccessKey="{strings:KeyboardResources Key=CommandSortByKey}"
+            AutomationProperties.Name="{x:Bind SortByText.Text}"
             Background="Transparent"
             BorderBrush="Transparent">
             <muxc:DropDownButton.Flyout>
@@ -107,7 +108,7 @@
                 </MenuFlyout>
             </muxc:DropDownButton.Flyout>
             <StackPanel Orientation="Horizontal">
-                <FontIcon Margin="0,0,8,0" Glyph="&#xE8cb;" />
+                <FontIcon Margin="0,0,8,0" Glyph="&#xE8CB;" />
                 <TextBlock x:Name="SortByText"><Run Text="{strings:Resources Key=SortBy}" /><Run Text=":&#160;" /></TextBlock>
                 <TextBlock Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Text="{x:Bind GetSortByText(ViewModel.SortBy), Mode=OneWay}" />
             </StackPanel>
@@ -133,6 +134,7 @@
                     ItemTemplate="{StaticResource AlbumGridViewItemTemplate}"
                     ItemsSource="{x:Bind AlbumsSource.View}"
                     Loaded="AlbumGridView_OnLoaded"
+                    ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                     SelectionMode="None">
                     <GridView.GroupStyle>
                         <GroupStyle
@@ -190,11 +192,11 @@
                         </triggers:IsEqualStateTrigger>
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="AlbumGridView.Padding" Value="{StaticResource GridViewContentPageMinimalPadding}" />
-                        <Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
                         <Setter Target="ShufflePlayButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
                         <Setter Target="SortByButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
                         <Setter Target="SortByText.Visibility" Value="Collapsed" />
+                        <Setter Target="AlbumGridView.Padding" Value="{StaticResource GridViewContentPageMinimalPadding}" />
+                        <Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>

diff --git a/Screenbox/Pages/ArtistsPage.xaml b/Screenbox/Pages/ArtistsPage.xaml
@@ -81,6 +81,7 @@
                     ItemTemplate="{StaticResource ArtistGridViewItemTemplate}"
                     ItemsSource="{x:Bind ArtistsSource.View}"
                     Loaded="ArtistGridView_OnLoaded"
+                    ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                     SelectionMode="None">
                     <GridView.GroupStyle>
                         <GroupStyle
@@ -134,10 +135,10 @@
                         </triggers:IsEqualStateTrigger>
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
+                        <Setter Target="ShufflePlayButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
+                        <!--<Setter Target="SortByButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />-->
                         <Setter Target="ArtistGridView.Padding" Value="{StaticResource GridViewContentPageMinimalPadding}" />
                         <Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
-                        <Setter Target="ShufflePlayButton.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
-                        <Setter Target="SortByButton.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>

diff --git a/Screenbox/Pages/HomePage.xaml b/Screenbox/Pages/HomePage.xaml
@@ -23,37 +23,29 @@
                 <ResourceDictionary Source="/Controls/Templates/GridViewItemTemplates.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <XamlUICommand
-                x:Key="PlayCommand"
-                Command="{x:Bind ViewModel.PlayCommand}"
-                IconSource="{ui:SymbolIconSource Symbol=Play}"
-                Label="{strings:Resources Key=Play}" />
-
-            <XamlUICommand
-                x:Key="PlayNextCommand"
-                Command="{x:Bind ViewModel.PlayNextCommand}"
-                IconSource="{ui:FontIconSource FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
-                                               Glyph=&#xF5EB;}"
-                Label="{strings:Resources Key=PlayNext}" />
-
-            <XamlUICommand
-                x:Key="RemoveCommand"
-                Command="{x:Bind ViewModel.RemoveCommand}"
-                IconSource="{ui:SymbolIconSource Symbol=Clear}"
-                Label="{strings:Resources Key=Remove}" />
-
-            <XamlUICommand
-                x:Key="PropertiesCommand"
-                Command="{StaticResource ShowPropertiesCommand}"
-                IconSource="{ui:FontIconSource Glyph=&#xE946;}"
-                Label="{strings:Resources Key=Properties}" />
-
             <MenuFlyout x:Name="ItemFlyout">
-                <MenuFlyoutItem Command="{StaticResource PlayCommand}" CommandParameter="{Binding}" />
-                <MenuFlyoutItem Command="{StaticResource PlayNextCommand}" CommandParameter="{Binding}" />
+                <MenuFlyoutItem
+                    Command="{x:Bind ViewModel.PlayCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:SymbolIcon Symbol=Play}"
+                    Text="{strings:Resources Key=Play}" />
+                <MenuFlyoutItem
+                    Command="{x:Bind ViewModel.PlayNextCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
+                                       Glyph=&#xF5EB;}"
+                    Text="{strings:Resources Key=PlayNext}" />
                 <MenuFlyoutSeparator />
-                <MenuFlyoutItem Command="{StaticResource RemoveCommand}" CommandParameter="{Binding}" />
-                <MenuFlyoutItem Command="{StaticResource PropertiesCommand}" CommandParameter="{Binding}" />
+                <MenuFlyoutItem
+                    Command="{x:Bind ViewModel.RemoveCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:SymbolIcon Symbol=Clear}"
+                    Text="{strings:Resources Key=Remove}" />
+                <MenuFlyoutItem
+                    Command="{StaticResource ShowPropertiesCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:FontIcon Glyph=&#xE946;}"
+                    Text="{strings:Resources Key=Properties}" />
                 <MenuFlyoutSeparator Visibility="{x:Bind Common.IsAdvancedModeEnabled}" />
                 <MenuFlyoutItem
                     CommandParameter="{Binding}"

diff --git a/Screenbox/Pages/MainPage.xaml b/Screenbox/Pages/MainPage.xaml
@@ -290,6 +290,16 @@
         </Grid>
 
         <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="WindowActivationStates">
+                <VisualState x:Name="Activated" />
+
+                <VisualState x:Name="Deactivated">
+                    <VisualState.Setters>
+                        <Setter Target="AppTitleText.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
             <VisualStateGroup x:Name="CriticalErrorStates">
                 <VisualState x:Name="CriticalErrorVisible">
                     <VisualState.StateTriggers>

diff --git a/Screenbox/Pages/MainPage.xaml.cs b/Screenbox/Pages/MainPage.xaml.cs
@@ -81,19 +81,18 @@ private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sende
             RightPaddingColumn.Width = new GridLength(Math.Max(sender.SystemOverlayLeftInset, sender.SystemOverlayRightInset));
         }
 
-        // Update the TitleBar based on the inactive/active state of the app
+        /// <summary>
+        /// Change the <see cref="VisualState"/> depending on whether the app is active or inactive.
+        /// </summary>
         private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
         {
-            SolidColorBrush defaultForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorPrimaryBrush"];
-            SolidColorBrush inactiveForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorDisabledBrush"];
-
             if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
             {
-                AppTitleText.Foreground = inactiveForegroundBrush;
+                VisualStateManager.GoToState(this, "Deactivated", true);
             }
             else
             {
-                AppTitleText.Foreground = defaultForegroundBrush;
+                VisualStateManager.GoToState(this, "Activated", true);
             }
         }
 

diff --git a/Screenbox/Pages/NetworkPage.xaml b/Screenbox/Pages/NetworkPage.xaml
@@ -47,8 +47,7 @@
         <!--  Network-Drive-is-empty content  -->
         <Grid
             x:Name="NoNetworkDrivePanel"
-            Grid.Row="1"
-            Grid.RowSpan="2"
+            Grid.Row="2"
             Margin="{x:Bind Common.FooterBottomPaddingMargin, Mode=OneWay}"
             Padding="{StaticResource ContentPagePadding}"
             HorizontalAlignment="Center"

diff --git a/Screenbox/Pages/PlayerPage.xaml b/Screenbox/Pages/PlayerPage.xaml
@@ -35,40 +35,53 @@
                     <Color x:Key="BackgroundAcrylicTintColor">#202020</Color>
                     <Color x:Key="BackgroundAcrylicTintFallbackColor">#C92C2C2C</Color>
                     <x:Double x:Key="BackgroundAcrylicTintOpacity">0.5</x:Double>
-                    <StaticResource x:Key="HeaderBackgroundGradientBrush" ResourceKey="HeaderBackgroundLinearGradient" />
-                    <StaticResource x:Key="ControlsBackgroundGradientBrush" ResourceKey="ControlsBackgroundLinearGradient" />
+
+                    <LinearGradientBrush x:Key="HeaderBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0" Color="{StaticResource SystemAltMediumColor}" />
+                            <GradientStop Offset="0.5" Color="{StaticResource SystemAltLowColor}" />
+                            <GradientStop Offset="1" Color="#00000000" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                    <LinearGradientBrush x:Key="PlayerControlsBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0" Color="#00000000" />
+                            <GradientStop Offset="1" Color="{StaticResource SystemAltMediumColor}" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <Color x:Key="BackgroundAcrylicTintColor">#FCFCFC</Color>
                     <Color x:Key="BackgroundAcrylicTintFallbackColor">#C9F9F9F9</Color>
                     <x:Double x:Key="BackgroundAcrylicTintOpacity">0.45</x:Double>
-                    <StaticResource x:Key="HeaderBackgroundGradientBrush" ResourceKey="HeaderBackgroundLinearGradient" />
-                    <StaticResource x:Key="ControlsBackgroundGradientBrush" ResourceKey="ControlsBackgroundLinearGradient" />
+
+                    <LinearGradientBrush x:Key="HeaderBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0" Color="{StaticResource SystemAltMediumColor}" />
+                            <GradientStop Offset="0.5" Color="{StaticResource SystemAltLowColor}" />
+                            <GradientStop Offset="1" Color="#00FFFFFF" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
+                    <LinearGradientBrush x:Key="PlayerControlsBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <LinearGradientBrush.GradientStops>
+                            <GradientStop Offset="0" Color="#00FFFFFF" />
+                            <GradientStop Offset="1" Color="{StaticResource SystemAltMediumColor}" />
+                        </LinearGradientBrush.GradientStops>
+                    </LinearGradientBrush>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <StaticResource x:Key="BackgroundAcrylicTintColor" ResourceKey="SystemColorWindowColor" />
                     <StaticResource x:Key="BackgroundAcrylicTintFallbackColor" ResourceKey="SystemColorWindowColor" />
                     <x:Double x:Key="BackgroundAcrylicTintOpacity">1</x:Double>
-                    <StaticResource x:Key="HeaderBackgroundGradientBrush" ResourceKey="SystemColorWindowColorBrush" />
-                    <StaticResource x:Key="ControlsBackgroundGradientBrush" ResourceKey="SystemColorWindowColorBrush" />
+
                     <StaticResource x:Key="ProgressBarBackground" ResourceKey="SystemColorButtonTextColorBrush" />
                     <Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>
+
+                    <StaticResource x:Key="HeaderBackgroundBrush" ResourceKey="SystemColorWindowColorBrush" />
+                    <StaticResource x:Key="PlayerControlsBackgroundBrush" ResourceKey="SystemColorWindowColorBrush" />
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
-            <LinearGradientBrush x:Key="HeaderBackgroundLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
-                <LinearGradientBrush.GradientStops>
-                    <GradientStop Offset="0" Color="{StaticResource SystemChromeBlackMediumLowColor}" />
-                    <GradientStop Offset="1" Color="#00000000" />
-                </LinearGradientBrush.GradientStops>
-            </LinearGradientBrush>
-            <LinearGradientBrush x:Name="ControlsBackgroundLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
-                <LinearGradientBrush.GradientStops>
-                    <GradientStop Offset="0" Color="#00000000" />
-                    <GradientStop Offset="1" Color="{StaticResource SystemChromeBlackMediumLowColor}" />
-                </LinearGradientBrush.GradientStops>
-            </LinearGradientBrush>
-
             <ctConverters:BoolToObjectConverter
                 x:Key="FilledPlayPauseGlyphConverter"
                 FalseValue="&#xE62E;"
@@ -161,7 +174,7 @@
             Grid.Column="0"
             Height="72"
             MinHeight="32"
-            Background="{ThemeResource HeaderBackgroundGradientBrush}"
+            Background="{ThemeResource HeaderBackgroundBrush}"
             Canvas.ZIndex="3" />
 
         <Grid
@@ -580,7 +593,7 @@
             x:Name="PlayerControlsBackground"
             Grid.Row="2"
             Grid.Column="0"
-            Background="{ThemeResource ControlsBackgroundGradientBrush}"
+            Background="{ThemeResource PlayerControlsBackgroundBrush}"
             Tapped="PlayerControlsBackground_OnTapped" />
 
         <controls:PlayerControls

diff --git a/Screenbox/Pages/SongsPage.xaml b/Screenbox/Pages/SongsPage.xaml
@@ -26,30 +26,24 @@
                 <TextBlock Text="{Binding Key}" TextTrimming="CharacterEllipsis" />
             </DataTemplate>
 
-            <XamlUICommand
-                x:Key="PlayCommand"
-                Command="{x:Bind ViewModel.PlayCommand}"
-                IconSource="{ui:SymbolIconSource Symbol=Play}"
-                Label="{strings:Resources Key=Play}" />
-
-            <XamlUICommand
-                x:Key="PlayNextCommand"
-                Command="{x:Bind ViewModel.PlayNextCommand}"
-                IconSource="{ui:FontIconSource FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
-                                               Glyph=&#xF5EB;}"
-                Label="{strings:Resources Key=PlayNext}" />
-
-            <XamlUICommand
-                x:Key="PropertiesCommand"
-                Command="{StaticResource ShowPropertiesCommand}"
-                IconSource="{ui:FontIconSource Glyph=&#xE946;}"
-                Label="{strings:Resources Key=Properties}" />
-
             <MenuFlyout x:Name="ItemFlyout">
-                <MenuFlyoutItem Command="{StaticResource PlayCommand}" CommandParameter="{Binding}" />
-                <MenuFlyoutItem Command="{StaticResource PlayNextCommand}" CommandParameter="{Binding}" />
+                <MenuFlyoutItem
+                    Command="{x:Bind ViewModel.PlayCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:SymbolIcon Symbol=Play}"
+                    Text="{strings:Resources Key=Play}" />
+                <MenuFlyoutItem
+                    Command="{x:Bind ViewModel.PlayNextCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
+                                       Glyph=&#xF5EB;}"
+                    Text="{strings:Resources Key=PlayNext}" />
                 <MenuFlyoutSeparator />
-                <MenuFlyoutItem Command="{StaticResource PropertiesCommand}" CommandParameter="{Binding}" />
+                <MenuFlyoutItem
+                    Command="{StaticResource ShowPropertiesCommand}"
+                    CommandParameter="{Binding}"
+                    Icon="{ui:FontIcon Glyph=&#xE946;}"
+                    Text="{strings:Resources Key=Properties}" />
                 <MenuFlyoutSeparator Visibility="{x:Bind Common.IsAdvancedModeEnabled}" />
                 <MenuFlyoutItem
                     CommandParameter="{Binding}"
@@ -94,6 +88,7 @@
             Margin="{StaticResource ContentPagePadding}"
             HorizontalAlignment="Right"
             AccessKey="{strings:KeyboardResources Key=CommandSortByKey}"
+            AutomationProperties.Name="{x:Bind SortByText.Text}"
             Background="Transparent"
             BorderBrush="Transparent">
             <muxc:DropDownButton.Flyout>
@@ -132,7 +127,7 @@
                 </MenuFlyout>
             </muxc:DropDownButton.Flyout>
             <StackPanel Orientation="Horizontal">
-                <FontIcon Margin="0,0,8,0" Glyph="&#xE8cb;" />
+                <FontIcon Margin="0,0,8,0" Glyph="&#xE8CB;" />
                 <TextBlock x:Name="SortByText"><Run Text="{strings:Resources Key=SortBy}" /><Run Text=":&#160;" /></TextBlock>
                 <TextBlock Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Text="{x:Bind GetSortByText(ViewModel.SortBy), Mode=OneWay}" />
             </StackPanel>
@@ -158,6 +153,7 @@
                     ItemContainerStyle="{StaticResource ListViewItemFocusEngagementStyle}"
                     ItemsSource="{x:Bind SongsSource.View, Mode=OneWay}"
                     Loaded="SongListView_OnLoaded"
+                    ScrollViewer.IsVerticalScrollChainingEnabled="False"
                     SelectionMode="None">
                     <ListView.ItemTemplate>
                         <DataTemplate>
@@ -225,11 +221,11 @@
                         </triggers:IsEqualStateTrigger>
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="SongListView.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
-                        <Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
                         <Setter Target="ShufflePlayButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
                         <Setter Target="SortByButton.Margin" Value="{StaticResource ContentPageMinimalPadding}" />
                         <Setter Target="SortByText.Visibility" Value="Collapsed" />
+                        <Setter Target="SongListView.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
+                        <Setter Target="GroupOverview.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>