CmdPal: Did someone say grid pages? (#40832)

Closes #38269

Still working on this one, but essentially allows a list page to become
a grid page by specifying a `GridProperties` property like so:

```C#
public AllAppsPage()
{
    PlaceholderText = Resources.search_installed_apps_placeholder;
    GridProperties = new MediumGridLayout();
}
```

> This is a very early version and very subject to change. Much to
clean, but feedback & suggestions are welcome.

## Current preview

### SmallGridLayout

<img width="998" height="607" alt="image"
src="https://github.com/user-attachments/assets/ebdf11fd-6c86-4fc3-bf49-bcbb5d32caa4"
/>


### MediumGridLayout

<img width="976" height="586" alt="image"
src="https://github.com/user-attachments/assets/82daa2e9-548e-4864-8885-1c486ca9f891"
/>

### GalleryGridLayout

<img width="988" height="600" alt="image"
src="https://github.com/user-attachments/assets/23ca486a-35c7-467a-b200-4f6ee5f4a95c"
/>

---------

Co-authored-by: Mike Griese <migrie@microsoft.com>
This commit is contained in:
Michael Jolley
2025-09-08 05:25:07 -05:00
committed by GitHub
parent 63042dad31
commit 1887c22e87
20 changed files with 595 additions and 105 deletions

View File

@@ -13,6 +13,7 @@ using Microsoft.CmdPal.UI.ViewModels;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
@@ -38,13 +39,21 @@ public sealed partial class ListPage : Page,
public static readonly DependencyProperty ViewModelProperty =
DependencyProperty.Register(nameof(ViewModel), typeof(ListViewModel), typeof(ListPage), new PropertyMetadata(null, OnViewModelChanged));
private ListViewBase ItemView
{
get
{
return ViewModel?.IsGridView == true ? ItemsGrid : ItemsList;
}
}
public ListPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Disabled;
this.ItemsList.Loaded += ItemsList_Loaded;
this.ItemsList.PreviewKeyDown += ItemsList_PreviewKeyDown;
this.ItemsList.PointerPressed += ItemsList_PointerPressed;
this.ItemView.Loaded += Items_Loaded;
this.ItemView.PreviewKeyDown += Items_PreviewKeyDown;
this.ItemView.PointerPressed += Items_PointerPressed;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
@@ -55,11 +64,11 @@ public sealed partial class ListPage : Page,
}
if (e.NavigationMode == NavigationMode.Back
|| (e.NavigationMode == NavigationMode.New && ItemsList.Items.Count > 0))
|| (e.NavigationMode == NavigationMode.New && ItemView.Items.Count > 0))
{
// Upon navigating _back_ to this page, immediately select the
// first item in the list
ItemsList.SelectedIndex = 0;
ItemView.SelectedIndex = 0;
}
// RegisterAll isn't AOT compatible
@@ -90,7 +99,6 @@ public sealed partial class ListPage : Page,
{
ViewModel?.SafeCleanup();
CleanupHelper.Cleanup(this);
Bindings.StopTracking();
}
// Clean-up event listeners
@@ -100,7 +108,7 @@ public sealed partial class ListPage : Page,
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("CodeQuality", "IDE0051:Remove unused private members", Justification = "VS is too aggressive at pruning methods bound in XAML")]
private void ItemsList_ItemClick(object sender, ItemClickEventArgs e)
private void Items_ItemClick(object sender, ItemClickEventArgs e)
{
if (e.ClickedItem is ListItemViewModel item)
{
@@ -123,9 +131,9 @@ public sealed partial class ListPage : Page,
}
}
private void ItemsList_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
private void Items_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
if (ItemsList.SelectedItem is ListItemViewModel vm)
if (ItemView.SelectedItem is ListItemViewModel vm)
{
var settings = App.Current.Services.GetService<SettingsModel>()!;
if (!settings.SingleClickActivates)
@@ -136,10 +144,10 @@ public sealed partial class ListPage : Page,
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("CodeQuality", "IDE0051:Remove unused private members", Justification = "VS is too aggressive at pruning methods bound in XAML")]
private void ItemsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
private void Items_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var vm = ViewModel;
var li = ItemsList.SelectedItem as ListItemViewModel;
var li = ItemView.SelectedItem as ListItemViewModel;
_ = Task.Run(() =>
{
vm?.UpdateSelectedItemCommand.Execute(li);
@@ -154,12 +162,12 @@ public sealed partial class ListPage : Page,
// here, then in Page_ItemsUpdated trying to select that cached item if
// it's in the list (otherwise, clear the cache), but that seems
// aggressively BODGY for something that mostly just works today.
if (ItemsList.SelectedItem is not null)
if (ItemView.SelectedItem is not null)
{
ItemsList.ScrollIntoView(ItemsList.SelectedItem);
ItemView.ScrollIntoView(ItemView.SelectedItem);
// Automation notification for screen readers
var listViewPeer = Microsoft.UI.Xaml.Automation.Peers.ListViewAutomationPeer.CreatePeerForElement(ItemsList);
var listViewPeer = Microsoft.UI.Xaml.Automation.Peers.ListViewAutomationPeer.CreatePeerForElement(ItemView);
if (listViewPeer is not null && li is not null)
{
var notificationText = li.Title;
@@ -172,10 +180,37 @@ public sealed partial class ListPage : Page,
}
}
private void ItemsList_Loaded(object sender, RoutedEventArgs e)
private void Items_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
// Find the ScrollViewer in the ListView
var listViewScrollViewer = FindScrollViewer(this.ItemsList);
if (e.OriginalSource is FrameworkElement element &&
element.DataContext is ListItemViewModel item)
{
if (ItemView.SelectedItem != item)
{
ItemView.SelectedItem = item;
}
ViewModel?.UpdateSelectedItemCommand.Execute(item);
var pos = e.GetPosition(element);
_ = DispatcherQueue.TryEnqueue(
() =>
{
WeakReferenceMessenger.Default.Send<OpenContextMenuMessage>(
new OpenContextMenuMessage(
element,
Microsoft.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.BottomEdgeAlignedLeft,
pos,
ContextMenuFilterLocation.Top));
});
}
}
private void Items_Loaded(object sender, RoutedEventArgs e)
{
// Find the ScrollViewer in the ItemView (ItemsList or ItemsGrid)
var listViewScrollViewer = FindScrollViewer(this.ItemView);
if (listViewScrollViewer is not null)
{
@@ -207,25 +242,25 @@ public sealed partial class ListPage : Page,
// And then have these commands manipulate that state being bound to the UI instead
// We may want to see how other non-list UIs need to behave to make this decision
// At least it's decoupled from the SearchBox now :)
if (ItemsList.SelectedIndex < ItemsList.Items.Count - 1)
if (ItemView.SelectedIndex < ItemView.Items.Count - 1)
{
ItemsList.SelectedIndex++;
ItemView.SelectedIndex++;
}
else
{
ItemsList.SelectedIndex = 0;
ItemView.SelectedIndex = 0;
}
}
public void Receive(NavigatePreviousCommand message)
{
if (ItemsList.SelectedIndex > 0)
if (ItemView.SelectedIndex > 0)
{
ItemsList.SelectedIndex--;
ItemView.SelectedIndex--;
}
else
{
ItemsList.SelectedIndex = ItemsList.Items.Count - 1;
ItemView.SelectedIndex = ItemView.Items.Count - 1;
}
}
@@ -235,7 +270,7 @@ public sealed partial class ListPage : Page,
{
ViewModel?.InvokeItemCommand.Execute(null);
}
else if (ItemsList.SelectedItem is ListItemViewModel item)
else if (ItemView.SelectedItem is ListItemViewModel item)
{
ViewModel?.InvokeItemCommand.Execute(item);
}
@@ -247,7 +282,7 @@ public sealed partial class ListPage : Page,
{
ViewModel?.InvokeSecondaryCommandCommand.Execute(null);
}
else if (ItemsList.SelectedItem is ListItemViewModel item)
else if (ItemView.SelectedItem is ListItemViewModel item)
{
ViewModel?.InvokeSecondaryCommandCommand.Execute(item);
}
@@ -283,19 +318,19 @@ public sealed partial class ListPage : Page,
//
// It's important to do this here, because once there's no selection
// (which can happen as the list updates) we won't get an
// ItemsList_SelectionChanged again to give us another chance to change
// ItemView_SelectionChanged again to give us another chance to change
// the selection from null -> something. Better to just update the
// selection once, at the end of all the updating.
if (ItemsList.SelectedItem is null)
if (ItemView.SelectedItem is null)
{
ItemsList.SelectedIndex = 0;
ItemView.SelectedIndex = 0;
}
// Always reset the selected item when the top-level list page changes
// its items
if (!sender.IsNested)
{
ItemsList.SelectedIndex = 0;
ItemView.SelectedIndex = 0;
}
}
@@ -304,7 +339,7 @@ public sealed partial class ListPage : Page,
var prop = e.PropertyName;
if (prop == nameof(ViewModel.FilteredItems))
{
Debug.WriteLine($"ViewModel.FilteredItems {ItemsList.SelectedItem}");
Debug.WriteLine($"ViewModel.FilteredItems {ItemView.SelectedItem}");
}
}
@@ -328,12 +363,12 @@ public sealed partial class ListPage : Page,
return null;
}
private void ItemsList_OnContextRequested(UIElement sender, ContextRequestedEventArgs e)
private void Items_OnContextRequested(UIElement sender, ContextRequestedEventArgs e)
{
var (item, element) = e.OriginalSource switch
{
// caused by keyboard shortcut (e.g. Context menu key or Shift+F10)
ListViewItem listViewItem => (ItemsList.ItemFromContainer(listViewItem) as ListItemViewModel, listViewItem),
SelectorItem selectorItem => (ItemView.ItemFromContainer(selectorItem) as ListItemViewModel, selectorItem),
// caused by right-click on the ListViewItem
FrameworkElement { DataContext: ListItemViewModel itemViewModel } frameworkElement => (itemViewModel, frameworkElement),
@@ -346,9 +381,9 @@ public sealed partial class ListPage : Page,
return;
}
if (ItemsList.SelectedItem != item)
if (ItemView.SelectedItem != item)
{
ItemsList.SelectedItem = item;
ItemView.SelectedItem = item;
}
ViewModel?.UpdateSelectedItemCommand.Execute(item);
@@ -371,14 +406,14 @@ public sealed partial class ListPage : Page,
e.Handled = true;
}
private void ItemsList_OnContextCanceled(UIElement sender, RoutedEventArgs e)
private void Items_OnContextCanceled(UIElement sender, RoutedEventArgs e)
{
_ = DispatcherQueue.TryEnqueue(() => WeakReferenceMessenger.Default.Send<CloseContextMenuMessage>());
}
private void ItemsList_PointerPressed(object sender, PointerRoutedEventArgs e) => _lastInputSource = InputSource.Pointer;
private void Items_PointerPressed(object sender, PointerRoutedEventArgs e) => _lastInputSource = InputSource.Pointer;
private void ItemsList_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
private void Items_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
{
if (e.Key is VirtualKey.Enter or VirtualKey.Space)
{