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>

src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml

@@ -3,6 +3,7 @@
     x:Class="Microsoft.CmdPal.UI.ListPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
     xmlns:controls="using:CommunityToolkit.WinUI.Controls"
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:coreViewModels="using:Microsoft.CmdPal.Core.ViewModels"
@@ -11,8 +12,11 @@
     xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
     xmlns:local="using:Microsoft.CmdPal.UI"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
+    x:Name="PageRoot"
     Background="Transparent"
+    DataContext="{x:Bind ViewModel, Mode=OneWay}"
     mc:Ignorable="d">
 
     <Page.Resources>
@@ -23,6 +27,7 @@
             IsSourceGrouped="True"
             Source="{x:Bind ViewModel.Items, Mode=OneWay}" />-->
 
+        <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
         <converters:StringVisibilityConverter
             x:Key="StringVisibilityConverter"
             EmptyValue="Collapsed"
@@ -39,6 +44,14 @@
                 ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
         </DataTemplate>
 
+        <cmdpalUI:GridItemTemplateSelector
+            x:Key="GridItemTemplateSelector"
+            x:DataType="coreViewModels:ListItemViewModel"
+            Gallery="{StaticResource GalleryGridItemViewModelTemplate}"
+            GridProperties="{x:Bind ViewModel.GridProperties}"
+            Medium="{StaticResource MediumGridItemViewModelTemplate}"
+            Small="{StaticResource SmallGridItemViewModelTemplate}" />
+
         <!--  https://learn.microsoft.com/windows/apps/design/controls/itemsview#specify-the-look-of-the-items  -->
         <DataTemplate x:Key="ListItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
             <Grid
@@ -102,6 +115,145 @@
                 </ItemsControl>
             </Grid>
         </DataTemplate>
+
+        <!--  Grid item templates for visual grid representation  -->
+        <DataTemplate x:Key="SmallGridItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
+            <StackPanel
+                Width="60"
+                Height="60"
+                Padding="8,16"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                AutomationProperties.Name="{x:Bind Title}"
+                BorderThickness="0"
+                CornerRadius="8"
+                Orientation="Vertical"
+                ToolTipService.ToolTip="{x:Bind Title}">
+
+                <cpcontrols:IconBox
+                    x:Name="GridIconBorder"
+                    Width="28"
+                    Height="28"
+                    Margin="0"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorPrimary}"
+                    SourceKey="{x:Bind Icon, Mode=OneWay}"
+                    SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
+
+            </StackPanel>
+        </DataTemplate>
+
+        <DataTemplate x:Key="MediumGridItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
+            <StackPanel
+                Width="100"
+                Height="100"
+                Padding="8,16"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                AutomationProperties.Name="{x:Bind Title}"
+                BorderThickness="0"
+                CornerRadius="8"
+                Orientation="Vertical"
+                ToolTipService.ToolTip="{x:Bind Title}">
+
+                <cpcontrols:IconBox
+                    x:Name="GridIconBorder"
+                    Width="36"
+                    Height="36"
+                    Margin="0"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    CharacterSpacing="12"
+                    FontSize="14"
+                    Foreground="{ThemeResource TextFillColorPrimary}"
+                    SourceKey="{x:Bind Icon, Mode=OneWay}"
+                    SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
+
+                <TextBlock
+                    x:Name="TitleTextBlock"
+                    MaxHeight="40"
+                    Margin="0,8,0,4"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    CharacterSpacing="12"
+                    FontSize="12"
+                    Text="{x:Bind Title}"
+                    TextAlignment="Center"
+                    TextTrimming="WordEllipsis"
+                    TextWrapping="Wrap"
+                    Visibility="{Binding ElementName=PageRoot, Path=DataContext.GridProperties.ShowTitle, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
+            </StackPanel>
+        </DataTemplate>
+
+        <DataTemplate x:Key="GalleryGridItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
+            <StackPanel
+                Width="160"
+                Margin="4"
+                Padding="0"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                AutomationProperties.Name="{x:Bind Title}"
+                BorderThickness="0"
+                CornerRadius="4"
+                Orientation="Vertical"
+                ToolTipService.ToolTip="{x:Bind Title}">
+
+                <Grid
+                    Width="160"
+                    Height="160"
+                    Margin="0"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    CornerRadius="4">
+                    <Grid.RowDefinitions>
+                        <RowDefinition />
+                    </Grid.RowDefinitions>
+                    <Viewbox
+                        Grid.Row="1"
+                        HorizontalAlignment="Center"
+                        Stretch="UniformToFill"
+                        StretchDirection="Both">
+                        <cpcontrols:IconBox
+                            CornerRadius="4"
+                            Foreground="{ThemeResource TextFillColorPrimary}"
+                            SourceKey="{x:Bind Icon, Mode=OneWay}"
+                            SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
+                    </Viewbox>
+                </Grid>
+
+                <StackPanel Padding="4" Orientation="Vertical">
+                    <TextBlock
+                        x:Name="TitleTextBlock"
+                        MaxWidth="152"
+                        MaxHeight="40"
+                        Margin="0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        CharacterSpacing="12"
+                        FontSize="14"
+                        Foreground="{ThemeResource TextFillColorPrimary}"
+                        Text="{x:Bind Title}"
+                        TextAlignment="Center"
+                        TextTrimming="WordEllipsis"
+                        TextWrapping="NoWrap" />
+                    <TextBlock
+                        x:Name="SubTitleTextBlock"
+                        MaxWidth="152"
+                        MaxHeight="40"
+                        Margin="0,4,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        CharacterSpacing="11"
+                        FontSize="11"
+                        Foreground="{ThemeResource TextFillColorTertiary}"
+                        Text="{x:Bind Subtitle}"
+                        TextAlignment="Center"
+                        TextTrimming="WordEllipsis"
+                        TextWrapping="NoWrap" />
+                </StackPanel>
+            </StackPanel>
+        </DataTemplate>
     </Page.Resources>
 
     <Grid>
@@ -110,66 +262,50 @@
             TargetType="x:Boolean"
             Value="{x:Bind ViewModel.ShowEmptyContent, Mode=OneWay}">
             <controls:Case Value="False">
-                <ListView
-                    x:Name="ItemsList"
-                    Padding="0,2,0,0"
-                    ContextCanceled="ItemsList_OnContextCanceled"
-                    ContextRequested="ItemsList_OnContextRequested"
-                    DoubleTapped="ItemsList_DoubleTapped"
-                    IsDoubleTapEnabled="True"
-                    IsItemClickEnabled="True"
-                    ItemClick="ItemsList_ItemClick"
-                    ItemTemplate="{StaticResource ListItemViewModelTemplate}"
-                    ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
-                    SelectionChanged="ItemsList_SelectionChanged">
-                    <ListView.ItemContainerTransitions>
-                        <TransitionCollection />
-                    </ListView.ItemContainerTransitions>
-                    <!--<ListView.GroupStyle>
-                        <GroupStyle HidesIfEmpty="True">
-                            <GroupStyle.HeaderTemplate>
-                                <DataTemplate>
-                                    <TextBlock
-                                        Margin="0,16,0,0"
-                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                        Text="{Binding Key, Mode=OneWay}" />
-                                </DataTemplate>
-                            </GroupStyle.HeaderTemplate>
-                        </GroupStyle>
-                    </ListView.GroupStyle>-->
-                </ListView>
-            </controls:Case>
-            <controls:Case Value="True">
-                <StackPanel
-                    Margin="24"
-                    HorizontalAlignment="Center"
-                    VerticalAlignment="Center"
-                    Orientation="Vertical"
-                    Spacing="4">
-                    <cpcontrols:IconBox
-                        x:Name="IconBorder"
-                        Width="48"
-                        Height="48"
-                        Margin="8"
-                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                        SourceKey="{x:Bind ViewModel.EmptyContent.Icon, Mode=OneWay}"
-                        SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
-                    <TextBlock
-                        Margin="0,4,0,0"
-                        HorizontalAlignment="Center"
-                        FontWeight="SemiBold"
-                        Text="{x:Bind ViewModel.EmptyContent.Title, Mode=OneWay}"
-                        TextAlignment="Center"
-                        TextWrapping="Wrap" />
-                    <TextBlock
-                        HorizontalAlignment="Center"
-                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                        Text="{x:Bind ViewModel.EmptyContent.Subtitle, Mode=OneWay}"
-                        TextAlignment="Center"
-                        TextWrapping="Wrap" />
-                </StackPanel>
+                <controls:SwitchPresenter
+                    HorizontalAlignment="Stretch"
+                    TargetType="x:Boolean"
+                    Value="{x:Bind ViewModel.IsGridView, Mode=OneWay}">
+                    <controls:Case Value="False">
+                        <ListView
+                            x:Name="ItemsList"
+                            Padding="0,2,0,0"
+                            ContextCanceled="Items_OnContextCanceled"
+                            ContextRequested="Items_OnContextRequested"
+                            DoubleTapped="Items_DoubleTapped"
+                            IsDoubleTapEnabled="True"
+                            IsItemClickEnabled="True"
+                            ItemClick="Items_ItemClick"
+                            ItemTemplate="{StaticResource ListItemViewModelTemplate}"
+                            ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
+                            RightTapped="Items_RightTapped"
+                            SelectionChanged="Items_SelectionChanged">
+                            <ListView.ItemContainerTransitions>
+                                <TransitionCollection />
+                            </ListView.ItemContainerTransitions>
+                        </ListView>
+                    </controls:Case>
+                    <controls:Case Value="True">
+                        <GridView
+                            x:Name="ItemsGrid"
+                            Padding="8"
+                            ContextCanceled="Items_OnContextCanceled"
+                            ContextRequested="Items_OnContextRequested"
+                            DoubleTapped="Items_DoubleTapped"
+                            IsDoubleTapEnabled="True"
+                            IsItemClickEnabled="True"
+                            ItemClick="Items_ItemClick"
+                            ItemTemplateSelector="{StaticResource GridItemTemplateSelector}"
+                            ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
+                            RightTapped="Items_RightTapped"
+                            SelectionChanged="Items_SelectionChanged">
+                            <GridView.ItemContainerTransitions>
+                                <TransitionCollection />
+                            </GridView.ItemContainerTransitions>
+                        </GridView>
+                    </controls:Case>
+                </controls:SwitchPresenter>
             </controls:Case>
         </controls:SwitchPresenter>
-
     </Grid>
 </Page>