Merge pull request #205 from huynhsontung/fix-settings

fix: settings page visual and XY navigability
huynhsontung · Oct 31, 2023 · bad9687 · bad9687
2 parents dee70e4 + 5f9c5f8
commit bad9687
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 27 deletions.
diff --git a/Screenbox/Controls/Interactions/SettingsExpanderXYNavigationBehavior.cs b/Screenbox/Controls/Interactions/SettingsExpanderXYNavigationBehavior.cs
@@ -0,0 +1,22 @@
+using CommunityToolkit.Labs.WinUI;
+using Microsoft.Toolkit.Uwp.UI;
+using Microsoft.Toolkit.Uwp.UI.Behaviors;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+
+namespace Screenbox.Controls.Interactions;
+internal class SettingsExpanderXYNavigationBehavior : BehaviorBase<SettingsExpander>
+{
+    public Control? XYFocusRight { get; set; }
+
+    protected override void OnAssociatedObjectLoaded()
+    {
+        base.OnAssociatedObjectLoaded();
+        if (XYFocusRight == null) return;
+        if (AssociatedObject.FindDescendant<ToggleButton>() is { } button)
+        {
+            button.XYFocusRight = XYFocusRight;
+            XYFocusRight.XYFocusRight = button;
+        }
+    }
+}
diff --git a/Screenbox/Pages/SettingsPage.xaml b/Screenbox/Pages/SettingsPage.xaml
@@ -26,8 +26,7 @@
 
             <x:Double x:Key="ToggleSwitchPreContentMargin">4</x:Double>
             <x:Double x:Key="ToggleSwitchPostContentMargin">4</x:Double>
-            <x:Double x:Key="SettingsCardWrapThreshold">400</x:Double>
-            <x:Double x:Key="SettingsCardSpacing">4</x:Double>
+            <Thickness x:Key="SettingsCardMargin">0,0,0,4</Thickness>
 
             <!--  SettingsExpander bottom corners radius temporary (hopefully) fix  -->
             <CornerRadius x:Key="SettingsCardBottomCornerRadius">0,0,3,3</CornerRadius>
@@ -37,16 +36,12 @@
                 x:Key="SettingsSectionHeaderTextBlockStyle"
                 BasedOn="{StaticResource BodyStrongTextBlockStyle}"
                 TargetType="TextBlock">
-                <Setter Property="Margin" Value="1,28,0,4" />
+                <Setter Property="Margin" Value="1,28,0,8" />
                 <Setter Property="AutomationProperties.HeadingLevel" Value="Level2" />
             </Style>
 
             <ThemeShadow x:Key="SharedShadow" />
             <converters:ResourceNameToResourceStringConverter x:Key="ResourceNameToResourceStringConverter" />
-            <muxc:StackLayout
-                x:Name="VerticalStackLayout"
-                Orientation="Vertical"
-                Spacing="12" />
 
             <XamlUICommand
                 x:Key="RemoveMusicFolderCommand"
@@ -119,9 +114,7 @@
             <StackPanel
                 x:Name="ContentRoot"
                 Margin="{x:Bind Common.FooterBottomPaddingMargin, Mode=OneWay}"
-                Padding="{StaticResource PageContentMargin}"
-                SizeChanged="ContentRoot_OnSizeChanged"
-                Spacing="{StaticResource SettingsCardSpacing}">
+                Padding="{StaticResource PageContentMargin}">
                 <StackPanel.ChildrenTransitions>
                     <RepositionThemeTransition IsStaggeringEnabled="False" />
                 </StackPanel.ChildrenTransitions>
@@ -131,18 +124,23 @@
 
                 <!--  Libraries section  -->
                 <TextBlock
-                    Margin="1,8,0,4"
+                    Margin="1,8,0,8"
                     Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                     Text="{strings:Resources Key=SettingsCategoryLibraries}"
                     Visibility="{x:Bind helpers:SystemInformationExtensions.IsDesktop}" />
                 <labs:SettingsExpander
+                    Margin="{StaticResource SettingsCardMargin}"
                     Description="{x:Bind strings:Resources.LocationSpecified(ViewModel.MusicLocations.Count), Mode=OneWay, FallbackValue={x:Null}}"
                     Header="{strings:Resources Key=SettingsMusicLibraryLocationsHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xe8d6;}"
                     ItemTemplate="{StaticResource MusicLibraryLocationTemplate}"
                     ItemsSource="{x:Bind ViewModel.MusicLocations, Mode=OneWay}"
                     Visibility="{x:Bind helpers:SystemInformationExtensions.IsDesktop}">
+                    <interactivity:Interaction.Behaviors>
+                        <interactions:SettingsExpanderXYNavigationBehavior XYFocusRight="{x:Bind AddMusicFolderButton}" />
+                    </interactivity:Interaction.Behaviors>
                     <Button
+                        x:Name="AddMusicFolderButton"
                         AutomationProperties.Name="{strings:Resources Key=AddFolder}"
                         Command="{x:Bind ViewModel.AddMusicFolderCommand}"
                         ToolTipService.ToolTip="{strings:Resources Key=AddMusicFolderToolTip}">
@@ -153,13 +151,18 @@
                     </Button>
                 </labs:SettingsExpander>
                 <labs:SettingsExpander
+                    Margin="{StaticResource SettingsCardMargin}"
                     Description="{x:Bind strings:Resources.LocationSpecified(ViewModel.VideoLocations.Count), Mode=OneWay, FallbackValue={x:Null}}"
                     Header="{strings:Resources Key=SettingsVideoLibraryLocationsHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xe8b2;}"
                     ItemTemplate="{StaticResource VideosLibraryLocationTemplate}"
                     ItemsSource="{x:Bind ViewModel.VideoLocations, Mode=OneWay}"
                     Visibility="{x:Bind helpers:SystemInformationExtensions.IsDesktop}">
+                    <interactivity:Interaction.Behaviors>
+                        <interactions:SettingsExpanderXYNavigationBehavior XYFocusRight="{x:Bind AddVideoFolderButton}" />
+                    </interactivity:Interaction.Behaviors>
                     <Button
+                        x:Name="AddVideoFolderButton"
                         AutomationProperties.Name="{strings:Resources Key=AddFolder}"
                         Command="{x:Bind ViewModel.AddVideosFolderCommand}"
                         ToolTipService.ToolTip="{strings:Resources Key=AddVideoFolderToolTip}">
@@ -173,10 +176,14 @@
                 <!--  General section  -->
                 <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="{strings:Resources Key=SettingsCategoryGeneral}" />
                 <labs:SettingsExpander
+                    Margin="{StaticResource SettingsCardMargin}"
                     Description="{strings:Resources Key=SettingsShowRecentDescription}"
                     Header="{strings:Resources Key=SettingsShowRecentHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xe8b7;}">
-                    <ToggleSwitch IsOn="{x:Bind ViewModel.ShowRecent, Mode=TwoWay}" />
+                    <interactivity:Interaction.Behaviors>
+                        <interactions:SettingsExpanderXYNavigationBehavior XYFocusRight="{x:Bind ShowRecentToggleSwitch}" />
+                    </interactivity:Interaction.Behaviors>
+                    <ToggleSwitch x:Name="ShowRecentToggleSwitch" IsOn="{x:Bind ViewModel.ShowRecent, Mode=TwoWay}" />
                     <labs:SettingsExpander.Items>
                         <labs:SettingsCard CornerRadius="{StaticResource SettingsCardBottomCornerRadius}" Header="{strings:Resources Key=SettingsClearRecentHeader}">
                             <Button Command="{x:Bind ViewModel.ClearRecentHistoryCommand}" Content="{strings:Resources Key=Clear}" />
@@ -187,6 +194,7 @@
                 <!--  Player section  -->
                 <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="{strings:Resources Key=SettingsCategoryPlayer}" />
                 <labs:SettingsCard
+                    Margin="{StaticResource SettingsCardMargin}"
                     Description="{strings:Resources Key=SettingsAutoResizeDescription}"
                     Header="{strings:Resources Key=SettingsAutoResizeHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xe799;}"
@@ -203,6 +211,7 @@
                     </ComboBox>
                 </labs:SettingsCard>
                 <labs:SettingsCard
+                    Margin="{StaticResource SettingsCardMargin}"
                     Description="{strings:Resources Key=SettingsVolumeBoostDescription}"
                     Header="{strings:Resources Key=SettingsVolumeBoostHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xe767;}">
@@ -219,6 +228,7 @@
                     </ComboBox>
                 </labs:SettingsCard>
                 <labs:SettingsExpander
+                    Margin="{StaticResource SettingsCardMargin}"
                     Header="{strings:Resources Key=SettingsGesturesHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xeda4;}"
                     IsExpanded="True"
@@ -239,10 +249,14 @@
                 <!--  Advanced section  -->
                 <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="{strings:Resources Key=SettingsCategoryAdvanced}" />
                 <labs:SettingsExpander
+                    Margin="{StaticResource SettingsCardMargin}"
                     Description="{strings:Resources Key=SettingsAdvancedModeDescription}"
                     Header="{strings:Resources Key=SettingsAdvancedModeHeader}"
                     HeaderIcon="{ui:FontIcon Glyph=&#xe756;}"
                     IsExpanded="{x:Bind AdvancedModeToggleSwitch.IsOn, Mode=OneWay}">
+                    <interactivity:Interaction.Behaviors>
+                        <interactions:SettingsExpanderXYNavigationBehavior XYFocusRight="{x:Bind AdvancedModeToggleSwitch}" />
+                    </interactivity:Interaction.Behaviors>
                     <ToggleSwitch x:Name="AdvancedModeToggleSwitch" IsOn="{x:Bind ViewModel.AdvancedMode, Mode=TwoWay}" />
                     <labs:SettingsExpander.Items>
                         <labs:SettingsCard Header="{strings:Resources Key=SettingsGlobalArgumentsHeader}" IsEnabled="{x:Bind AdvancedModeToggleSwitch.IsOn, Mode=OneWay}">

diff --git a/Screenbox/Pages/SettingsPage.xaml.cs b/Screenbox/Pages/SettingsPage.xaml.cs
@@ -1,12 +1,9 @@
 using CommunityToolkit.Mvvm.DependencyInjection;
 using Screenbox.Core.ViewModels;
 using System;
-using System.Collections.Generic;
 using System.Linq;
 using System.Numerics;
-using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
 using Windows.UI.Xaml.Navigation;
 
 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
@@ -43,17 +40,5 @@ protected override async void OnNavigatedTo(NavigationEventArgs e)
             base.OnNavigatedTo(e);
             await ViewModel.LoadLibraryLocations();
         }
-
-        private void ContentRoot_OnSizeChanged(object sender, SizeChangedEventArgs e)
-        {
-            StackPanel panel = (StackPanel)sender;
-            ButtonBase? settingsCard = panel.Children.OfType<ButtonBase>().FirstOrDefault();
-            if (settingsCard == null) return;
-            IEnumerable<TextBlock> sectionHeaders = panel.Children.OfType<TextBlock>();
-            foreach (TextBlock sectionHeader in sectionHeaders)
-            {
-                sectionHeader.Width = settingsCard.ActualWidth;
-            }
-        }
     }
 }
diff --git a/Screenbox/Screenbox.csproj b/Screenbox/Screenbox.csproj
@@ -165,6 +165,7 @@
     <Compile Include="Controls\Interactions\BringIntoViewWithOffsetBehavior.cs" />
     <Compile Include="Controls\Interactions\GamepadXYNavigationBehavior.cs" />
     <Compile Include="Controls\Interactions\FocusOnItemClickBehavior.cs" />
+    <Compile Include="Controls\Interactions\SettingsExpanderXYNavigationBehavior.cs" />
     <Compile Include="Controls\Interactions\SplitButtonXYNavigationBehavior.cs" />
     <Compile Include="Controls\Interactions\ThumbnailGridViewBehavior.cs" />
     <Compile Include="Controls\Interactions\AlternatingListViewBehavior.cs" />