More changes

src/settings-ui/QuickAccess.UI/QuickAccessXAML/Flyout/AppsListPage.xaml

@@ -29,12 +29,13 @@
                 <Button
                     x:Uid="Dashboard_SortBy"
                     VerticalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                     Style="{StaticResource SubtleButtonStyle}">
                     <ToolTipService.ToolTip>
                         <TextBlock x:Uid="Dashboard_SortBy_ToolTip" />
                     </ToolTipService.ToolTip>
                     <Button.Content>
-                        <FontIcon FontSize="16" Glyph="&#xE8CB;" />
+                        <FontIcon FontSize="14" Glyph="&#xE8CB;" />
                     </Button.Content>
                     <Button.Flyout>
                         <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -70,10 +71,12 @@
             </StackPanel>
         </Grid>
         <Grid Grid.Row="1">
-            <ScrollViewer
+            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
-                HorizontalScrollBarVisibility="Disabled"
+                <controls:ModuleList
-                VerticalScrollBarVisibility="Auto">
+                    Margin="8,0,12,0"
-                <controls:ModuleList IsItemClickable="False" ItemsSource="{x:Bind ViewModel.FlyoutMenuItems, Mode=OneWay}" />
+                    DividerThickness="0,0,0,0"
+                    IsItemClickable="False"
+                    ItemsSource="{x:Bind ViewModel.FlyoutMenuItems, Mode=OneWay}" />
             </ScrollViewer>
         </Grid>
     </Grid>

src/settings-ui/QuickAccess.UI/QuickAccessXAML/MainWindow.xaml

@@ -7,9 +7,9 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:winuiEx="using:WinUIEx"
     Title="PowerToys Quick Access (Preview)"
-    Width="386"
+    Width="400"
     Height="516"
-    MinWidth="386"
+    MinWidth="400"
     MinHeight="516"
     IsAlwaysOnTop="True"
     IsMaximizable="False"

src/settings-ui/Settings.UI.Controls/ModuleList/ModuleList.xaml

@@ -45,57 +45,20 @@
             </Setter>
         </Style>
     </UserControl.Resources>
-
+    <ItemsRepeater x:Name="DashboardView" ItemsSource="{x:Bind ItemsSource, Mode=OneWay}">
-    <controls:Card
-        x:Name="ModulesCard"
-        Title="{x:Bind Title, Mode=OneWay}"
-        MinWidth="400"
-        Padding="0"
-        VerticalAlignment="Top"
-        DividerVisibility="Collapsed">
-        <controls:Card.TitleContent>
-            <Button
-                x:Uid="Dashboard_SortBy"
-                Margin="0,0,4,0"
-                VerticalAlignment="Center"
-                Style="{StaticResource SubtleButtonStyle}">
-                <ToolTipService.ToolTip>
-                    <TextBlock x:Uid="Dashboard_SortBy_ToolTip" />
-                </ToolTipService.ToolTip>
-                <Button.Content>
-                    <FontIcon FontSize="16" Glyph="&#xE8CB;" />
-                </Button.Content>
-                <Button.Flyout>
-                    <MenuFlyout>
-                        <ToggleMenuFlyoutItem
-                            x:Uid="Dashboard_SortAlphabetical"
-                            Click="SortAlphabetical_Click"
-                            IsChecked="{x:Bind SortOption, Mode=OneWay, Converter={StaticResource ModuleListSortOptionToBooleanConverter}, ConverterParameter=Alphabetical}" />
-                        <ToggleMenuFlyoutItem
-                            x:Uid="Dashboard_SortByStatus"
-                            Click="SortByStatus_Click"
-                            IsChecked="{x:Bind SortOption, Mode=OneWay, Converter={StaticResource ModuleListSortOptionToBooleanConverter}, ConverterParameter=ByStatus}" />
-                    </MenuFlyout>
-                </Button.Flyout>
-            </Button>
-        </controls:Card.TitleContent>
-
-        <ItemsRepeater
-            x:Name="DashboardView"
-            Grid.Row="1"
-            ItemsSource="{x:Bind ItemsSource, Mode=OneWay}">
         <ItemsRepeater.Layout>
             <StackLayout Orientation="Vertical" Spacing="0" />
         </ItemsRepeater.Layout>
         <ItemsRepeater.ItemTemplate>
             <DataTemplate x:DataType="controls:ModuleListItem">
                 <tkcontrols:SettingsCard
+                    MinWidth="0"
                     MinHeight="0"
                     Padding="12,4,12,4"
                     tk:FrameworkElementExtensions.AncestorType="controls:ModuleList"
                     Background="Transparent"
                     BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-                        BorderThickness="0,1,0,0"
+                    BorderThickness="{Binding (tk:FrameworkElementExtensions.Ancestor).DividerThickness, RelativeSource={RelativeSource Self}}"
                     Click="OnSettingsCardClick"
                     CornerRadius="0"
                     IsClickEnabled="{Binding (tk:FrameworkElementExtensions.Ancestor).IsItemClickable, RelativeSource={RelativeSource Self}}"
@@ -141,5 +104,4 @@
             </DataTemplate>
         </ItemsRepeater.ItemTemplate>
     </ItemsRepeater>
-    </controls:Card>
 </UserControl>

src/settings-ui/Settings.UI.Controls/ModuleList/ModuleList.xaml.cs

@@ -9,15 +9,19 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 {
     public sealed partial class ModuleList : UserControl
     {
-        private object? _sortButton;
-
         public ModuleList()
         {
             this.InitializeComponent();
-            _sortButton = ModulesCard.TitleContent;
-            UpdateHeaderVisibility();
         }
 
+        public Thickness DividerThickness
+        {
+            get => (Thickness)GetValue(DividerThicknessProperty);
+            set => SetValue(DividerThicknessProperty, value);
+        }
+
+        public static readonly DependencyProperty DividerThicknessProperty = DependencyProperty.Register(nameof(DividerThickness), typeof(Thickness), typeof(ModuleList), new PropertyMetadata(new Thickness(0, 1, 0, 0)));
+
         public bool IsItemClickable
         {
             get => (bool)GetValue(IsItemClickableProperty);
@@ -42,46 +46,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
         public static readonly DependencyProperty SortOptionProperty = DependencyProperty.Register(nameof(SortOption), typeof(ModuleListSortOption), typeof(ModuleList), new PropertyMetadata(ModuleListSortOption.Alphabetical));
 
-        public string Title
-        {
-            get => (string)GetValue(TitleProperty);
-            set => SetValue(TitleProperty, value);
-        }
-
-        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(nameof(Title), typeof(string), typeof(ModuleList), new PropertyMetadata(default(string), OnTitleChanged));
-
-        private static void OnTitleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((ModuleList)d).UpdateHeaderVisibility();
-        }
-
-        private void UpdateHeaderVisibility()
-        {
-            if (ModulesCard == null)
-            {
-                return;
-            }
-
-            if (string.IsNullOrEmpty(Title))
-            {
-                ModulesCard.TitleContent = null;
-            }
-            else
-            {
-                ModulesCard.TitleContent = _sortButton;
-            }
-        }
-
-        private void SortAlphabetical_Click(object sender, RoutedEventArgs e)
-        {
-            SortOption = ModuleListSortOption.Alphabetical;
-        }
-
-        private void SortByStatus_Click(object sender, RoutedEventArgs e)
-        {
-            SortOption = ModuleListSortOption.ByStatus;
-        }
-
         private void OnSettingsCardClick(object sender, RoutedEventArgs e)
         {
             if (sender is FrameworkElement element && element.Tag is ModuleListItem item)

src/settings-ui/Settings.UI.Controls/Primitives/Card.xaml.cs

@@ -34,7 +34,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             set => SetValue(ContentProperty, value);
         }
 
-        public static readonly DependencyProperty DividerVisibilityProperty = DependencyProperty.Register(nameof(DividerVisibility), typeof(Visibility), typeof(Card), new PropertyMetadata(defaultValue: null));
+        public static readonly DependencyProperty DividerVisibilityProperty = DependencyProperty.Register(nameof(DividerVisibility), typeof(Visibility), typeof(Card), new PropertyMetadata(defaultValue: Visibility.Visible));
 
         public Visibility DividerVisibility
         {
@@ -66,7 +66,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             else
             {
                 VisualStateManager.GoToState(this, "TitleGridVisible", true);
-                DividerVisibility = Visibility.Visible;
             }
         }
     }

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml

@@ -224,14 +224,46 @@
                                 Visibility="{x:Bind ViewModel.ShortcutModules.Count, Mode=OneWay, Converter={StaticResource DoubleToInvertedVisibilityConverter}}" />
                         </Grid>
                     </controls:Card>
-                    <controls:ModuleList
+                    <controls:Card
-                        x:Name="ModulesCard"
                         x:Uid="UtilitiesHeader"
                         Grid.RowSpan="2"
                         Grid.Column="1"
+                        MinWidth="400"
+                        Padding="0"
                         VerticalAlignment="Top"
+                        DividerVisibility="Collapsed">
+                        <controls:Card.TitleContent>
+                            <Button
+                                x:Uid="Dashboard_SortBy"
+                                Margin="0,0,4,0"
+                                VerticalAlignment="Center"
+                                Style="{StaticResource SubtleButtonStyle}">
+                                <ToolTipService.ToolTip>
+                                    <TextBlock x:Uid="Dashboard_SortBy_ToolTip" />
+                                </ToolTipService.ToolTip>
+                                <Button.Content>
+                                    <FontIcon FontSize="16" Glyph="&#xE8CB;" />
+                                </Button.Content>
+                                <Button.Flyout>
+                                    <MenuFlyout>
+                                        <ToggleMenuFlyoutItem
+                                            x:Uid="Dashboard_SortAlphabetical"
+                                            Click="SortAlphabetical_Click"
+                                            IsChecked="{x:Bind ViewModel.DashboardSortOrder, Mode=OneWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Alphabetical}" />
+                                        <ToggleMenuFlyoutItem
+                                            x:Uid="Dashboard_SortByStatus"
+                                            Click="SortByStatus_Click"
+                                            IsChecked="{x:Bind ViewModel.DashboardSortOrder, Mode=OneWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=ByStatus}" />
+                                    </MenuFlyout>
+                                </Button.Flyout>
+                            </Button>
+                        </controls:Card.TitleContent>
+                        <controls:ModuleList
+                            x:Name="ModulesCard"
+                            Grid.Row="1"
                             ItemsSource="{x:Bind ViewModel.AllModules, Mode=OneWay}"
                             SortOption="{x:Bind ViewModel.DashboardSortOrder, Mode=TwoWay, Converter={StaticResource EnumToModuleListSortOptionConverter}}" />
+                    </controls:Card>
                 </Grid>
             </Grid>
         </ScrollViewer>

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml.cs

@@ -61,5 +61,15 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
             App.GetOobeWindow().Activate();
         }
+
+        private void SortAlphabetical_Click(object sender, RoutedEventArgs e)
+        {
+            ViewModel.DashboardSortOrder = DashboardSortOrder.Alphabetical;
+        }
+
+        private void SortByStatus_Click(object sender, RoutedEventArgs e)
+        {
+            ViewModel.DashboardSortOrder = DashboardSortOrder.ByStatus;
+        }
     }
 }