<?xml version="1.0" encoding="utf-8" ?>
<Page
    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:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
    x:Name="PageRoot"
    Background="Transparent"
    DataContext="{x:Bind ViewModel, Mode=OneWay}"
    mc:Ignorable="d">

    <Page.Resources>

        <!--
            GridViewItemCornerRadius is the corner radius defined in GridView template; make
            it bigger to match the radii of the gallery
        -->
        <CornerRadius x:Key="GalleryGridViewItemContainerCornerRadius">6</CornerRadius>
        <CornerRadius x:Key="IconGridViewItemContainerCornerRadius">4</CornerRadius>
        <CornerRadius x:Key="GalleryGridViewItemRadius">4</CornerRadius>
        <CornerRadius x:Key="SmallGridViewItemCornerRadius">8</CornerRadius>
        <CornerRadius x:Key="MediumGridViewItemCornerRadius">8</CornerRadius>

        <x:Double x:Key="SmallGridSize">32</x:Double>
        <x:Double x:Key="MediumGridSize">48</x:Double>
        <x:Double x:Key="MediumGridContainerSize">100</x:Double>
        <x:Double x:Key="GalleryGridSize">160</x:Double>

        <!--
            BEAR LOADING: The list view is virtualized and the item container style is set to a fixed height
            to ensure the virtualization works correctly.
        -->
        <x:Double x:Key="SingleRowListViewItemHeight">44</x:Double>
        <x:Double x:Key="ListViewSectionHeight">28</x:Double>
        <x:Double x:Key="ListViewSeparatorHeight">28</x:Double>

        <Style x:Key="IconGridViewItemStyle" TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <ListViewItemPresenter
                            x:Name="Root"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            CheckBoxBorderBrush="{ThemeResource GridViewItemCheckBoxBorderBrush}"
                            CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
                            CheckBoxCornerRadius="{ThemeResource GridViewItemCheckBoxCornerRadius}"
                            CheckBoxDisabledBorderBrush="{ThemeResource GridViewItemCheckBoxDisabledBorderBrush}"
                            CheckBoxDisabledBrush="{ThemeResource GridViewItemCheckBoxDisabledBrush}"
                            CheckBoxPointerOverBorderBrush="{ThemeResource GridViewItemCheckBoxPointerOverBorderBrush}"
                            CheckBoxPointerOverBrush="{ThemeResource GridViewItemCheckBoxPointerOverBrush}"
                            CheckBoxPressedBorderBrush="{ThemeResource GridViewItemCheckBoxPressedBorderBrush}"
                            CheckBoxPressedBrush="{ThemeResource GridViewItemCheckBoxPressedBrush}"
                            CheckBoxSelectedBrush="{ThemeResource GridViewItemCheckBoxSelectedBrush}"
                            CheckBoxSelectedDisabledBrush="{ThemeResource GridViewItemCheckBoxSelectedDisabledBrush}"
                            CheckBoxSelectedPointerOverBrush="{ThemeResource GridViewItemCheckBoxSelectedPointerOverBrush}"
                            CheckBoxSelectedPressedBrush="{ThemeResource GridViewItemCheckBoxSelectedPressedBrush}"
                            CheckBrush="{ThemeResource GridViewItemCheckBrush}"
                            CheckDisabledBrush="{ThemeResource GridViewItemCheckDisabledBrush}"
                            CheckMode="{ThemeResource GridViewItemCheckMode}"
                            CheckPressedBrush="{ThemeResource GridViewItemCheckPressedBrush}"
                            ContentMargin="{TemplateBinding Padding}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Control.IsTemplateFocusTarget="True"
                            CornerRadius="{StaticResource IconGridViewItemContainerCornerRadius}"
                            DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                            DragBackground="{ThemeResource GridViewItemDragBackground}"
                            DragForeground="{ThemeResource GridViewItemDragForeground}"
                            DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                            FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                            FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                            FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                            FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                            FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                            PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
                            PointerOverBackground="{ThemeResource GridViewItemBackgroundPointerOver}"
                            PointerOverBorderBrush="{ThemeResource GridViewItemPointerOverBorderBrush}"
                            PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
                            PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
                            ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                            SelectedBackground="{ThemeResource GridViewItemBackgroundSelected}"
                            SelectedBorderBrush="{ThemeResource GridViewItemSelectedBorderBrush}"
                            SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
                            SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
                            SelectedDisabledBorderBrush="{ThemeResource GridViewItemSelectedDisabledBorderBrush}"
                            SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
                            SelectedInnerBorderBrush="{ThemeResource GridViewItemSelectedInnerBorderBrush}"
                            SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
                            SelectedPointerOverBorderBrush="{ThemeResource GridViewItemSelectedPointerOverBorderBrush}"
                            SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
                            SelectedPressedBorderBrush="{ThemeResource GridViewItemSelectedPressedBorderBrush}"
                            SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="GalleryGridViewItemStyle" TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <ListViewItemPresenter
                            x:Name="Root"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            CheckBoxBorderBrush="{ThemeResource GridViewItemCheckBoxBorderBrush}"
                            CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
                            CheckBoxCornerRadius="{ThemeResource GridViewItemCheckBoxCornerRadius}"
                            CheckBoxDisabledBorderBrush="{ThemeResource GridViewItemCheckBoxDisabledBorderBrush}"
                            CheckBoxDisabledBrush="{ThemeResource GridViewItemCheckBoxDisabledBrush}"
                            CheckBoxPointerOverBorderBrush="{ThemeResource GridViewItemCheckBoxPointerOverBorderBrush}"
                            CheckBoxPointerOverBrush="{ThemeResource GridViewItemCheckBoxPointerOverBrush}"
                            CheckBoxPressedBorderBrush="{ThemeResource GridViewItemCheckBoxPressedBorderBrush}"
                            CheckBoxPressedBrush="{ThemeResource GridViewItemCheckBoxPressedBrush}"
                            CheckBoxSelectedBrush="{ThemeResource GridViewItemCheckBoxSelectedBrush}"
                            CheckBoxSelectedDisabledBrush="{ThemeResource GridViewItemCheckBoxSelectedDisabledBrush}"
                            CheckBoxSelectedPointerOverBrush="{ThemeResource GridViewItemCheckBoxSelectedPointerOverBrush}"
                            CheckBoxSelectedPressedBrush="{ThemeResource GridViewItemCheckBoxSelectedPressedBrush}"
                            CheckBrush="{ThemeResource GridViewItemCheckBrush}"
                            CheckDisabledBrush="{ThemeResource GridViewItemCheckDisabledBrush}"
                            CheckMode="{ThemeResource GridViewItemCheckMode}"
                            CheckPressedBrush="{ThemeResource GridViewItemCheckPressedBrush}"
                            ContentMargin="{TemplateBinding Padding}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Control.IsTemplateFocusTarget="True"
                            CornerRadius="{StaticResource GalleryGridViewItemContainerCornerRadius}"
                            DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                            DragBackground="{ThemeResource GridViewItemDragBackground}"
                            DragForeground="{ThemeResource GridViewItemDragForeground}"
                            DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                            FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                            FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                            FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                            FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                            FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                            PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
                            PointerOverBackground="{ThemeResource GridViewItemBackgroundPointerOver}"
                            PointerOverBorderBrush="{ThemeResource GridViewItemPointerOverBorderBrush}"
                            PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
                            PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
                            ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                            SelectedBackground="{ThemeResource GridViewItemBackgroundSelected}"
                            SelectedBorderBrush="{ThemeResource GridViewItemSelectedBorderBrush}"
                            SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
                            SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
                            SelectedDisabledBorderBrush="{ThemeResource GridViewItemSelectedDisabledBorderBrush}"
                            SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
                            SelectedInnerBorderBrush="{ThemeResource GridViewItemSelectedInnerBorderBrush}"
                            SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
                            SelectedPointerOverBorderBrush="{ThemeResource GridViewItemSelectedPointerOverBorderBrush}"
                            SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
                            SelectedPressedBorderBrush="{ThemeResource GridViewItemSelectedPressedBorderBrush}"
                            SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style
            x:Key="GridViewSectionItemStyle"
            BasedOn="{StaticResource DefaultGridViewItemStyle}"
            TargetType="GridViewItem">
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="IsHoldingEnabled" Value="False" />
            <Setter Property="Padding" Value="4,0,12,0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Bottom" />
            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionHeight}" />
            <Setter Property="Height" Value="{StaticResource ListViewSectionHeight}" />
            <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
        </Style>

        <Style
            x:Key="GridViewSeparatorItemStyle"
            BasedOn="{StaticResource DefaultGridViewItemStyle}"
            TargetType="GridViewItem">
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="IsHoldingEnabled" Value="False" />
            <Setter Property="Padding" Value="4,0,12,0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorHeight}" />
            <Setter Property="Height" Value="{StaticResource ListViewSeparatorHeight}" />
            <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
        </Style>

        <ControlTemplate x:Key="ListViewItemWithoutVisualIndicatorTemplate" TargetType="ListViewItem">
            <ListViewItemPresenter
                x:Name="Root"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                CheckBoxBorderBrush="{ThemeResource ListViewItemCheckBoxBorderBrush}"
                CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                CheckBoxCornerRadius="{ThemeResource ListViewItemCheckBoxCornerRadius}"
                CheckBoxDisabledBorderBrush="{ThemeResource ListViewItemCheckBoxDisabledBorderBrush}"
                CheckBoxDisabledBrush="{ThemeResource ListViewItemCheckBoxDisabledBrush}"
                CheckBoxPointerOverBorderBrush="{ThemeResource ListViewItemCheckBoxPointerOverBorderBrush}"
                CheckBoxPointerOverBrush="{ThemeResource ListViewItemCheckBoxPointerOverBrush}"
                CheckBoxPressedBorderBrush="{ThemeResource ListViewItemCheckBoxPressedBorderBrush}"
                CheckBoxPressedBrush="{ThemeResource ListViewItemCheckBoxPressedBrush}"
                CheckBoxSelectedBrush="{ThemeResource ListViewItemCheckBoxSelectedBrush}"
                CheckBoxSelectedDisabledBrush="{ThemeResource ListViewItemCheckBoxSelectedDisabledBrush}"
                CheckBoxSelectedPointerOverBrush="{ThemeResource ListViewItemCheckBoxSelectedPointerOverBrush}"
                CheckBoxSelectedPressedBrush="{ThemeResource ListViewItemCheckBoxSelectedPressedBrush}"
                CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                CheckDisabledBrush="{ThemeResource ListViewItemCheckDisabledBrush}"
                CheckMode="{ThemeResource ListViewItemCheckMode}"
                CheckPressedBrush="{ThemeResource ListViewItemCheckPressedBrush}"
                ContentMargin="{TemplateBinding Padding}"
                ContentTransitions="{TemplateBinding ContentTransitions}"
                Control.IsTemplateFocusTarget="True"
                CornerRadius="{ThemeResource ListViewItemCornerRadius}"
                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                DragBackground="{ThemeResource ListViewItemDragBackground}"
                DragForeground="{ThemeResource ListViewItemDragForeground}"
                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                SelectedDisabledBackground="{ThemeResource ListViewItemBackgroundSelectedDisabled}"
                SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                SelectionIndicatorBrush="{ThemeResource ListViewItemSelectionIndicatorBrush}"
                SelectionIndicatorCornerRadius="{ThemeResource ListViewItemSelectionIndicatorCornerRadius}"
                SelectionIndicatorDisabledBrush="{ThemeResource ListViewItemSelectionIndicatorDisabledBrush}"
                SelectionIndicatorPointerOverBrush="{ThemeResource ListViewItemSelectionIndicatorPointerOverBrush}"
                SelectionIndicatorPressedBrush="{ThemeResource ListViewItemSelectionIndicatorPressedBrush}"
                SelectionIndicatorVisualEnabled="False" />
        </ControlTemplate>

        <Style
            x:Key="ListSingleRowItemContainerStyle"
            BasedOn="{StaticResource DefaultListViewItemStyle}"
            TargetType="ListViewItem">
            <Setter Property="MinHeight" Value="{StaticResource SingleRowListViewItemHeight}" />
            <Setter Property="Height" Value="{StaticResource SingleRowListViewItemHeight}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Template" Value="{StaticResource ListViewItemWithoutVisualIndicatorTemplate}" />
        </Style>

        <Style
            x:Key="ListSectionContainerStyle"
            BasedOn="{StaticResource DefaultListViewItemStyle}"
            TargetType="ListViewItem">
            <Setter Property="IsEnabled" Value="False" />
            <Setter Property="AllowFocusWhenDisabled" Value="False" />
            <Setter Property="AllowFocusOnInteraction" Value="False" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="IsHoldingEnabled" Value="False" />
            <Setter Property="AllowDrop" Value="False" />
            <Setter Property="Padding" Value="16,0,12,0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Bottom" />
            <Setter Property="MinHeight" Value="{StaticResource ListViewSectionHeight}" />
            <Setter Property="Height" Value="{StaticResource ListViewSectionHeight}" />
        </Style>

        <Style
            x:Key="ListSeparatorContainerStyle"
            BasedOn="{StaticResource DefaultListViewItemStyle}"
            TargetType="ListViewItem">
            <Setter Property="IsEnabled" Value="False" />
            <Setter Property="AllowFocusWhenDisabled" Value="False" />
            <Setter Property="AllowFocusOnInteraction" Value="False" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="IsHoldingEnabled" Value="False" />
            <Setter Property="AllowDrop" Value="False" />
            <Setter Property="Padding" Value="16,0,12,0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorHeight}" />
            <Setter Property="Height" Value="{StaticResource ListViewSeparatorHeight}" />
        </Style>

        <DataTemplate x:Key="TagTemplate" x:DataType="viewModels:TagViewModel">
            <!--
                Tags are immutable, so we don't have to worry about binding mode.
            -->
            <cpcontrols:Tag
                AutomationProperties.Name="{x:Bind Text}"
                BackgroundColor="{x:Bind Background}"
                FontSize="12"
                ForegroundColor="{x:Bind Foreground}"
                Icon="{x:Bind Icon}"
                Text="{x:Bind Text}"
                ToolTipService.ToolTip="{x:Bind ToolTip}" />
        </DataTemplate>

        <cmdpalUI:ListItemTemplateSelector
            x:Key="ListItemTemplateSelector"
            x:DataType="viewModels:ListItemViewModel"
            ListItem="{StaticResource ListItemSingleRowViewModelTemplate}"
            Section="{StaticResource ListSectionViewModelTemplate}"
            Separator="{StaticResource ListSeparatorViewModelTemplate}" />

        <cmdpalUI:ListItemContainerStyleSelector
            x:Key="ListItemContainerStyleSelector"
            Default="{StaticResource ListSingleRowItemContainerStyle}"
            Section="{StaticResource ListSectionContainerStyle}"
            Separator="{StaticResource ListSeparatorContainerStyle}" />

        <cmdpalUI:GridItemTemplateSelector
            x:Key="GridItemTemplateSelector"
            x:DataType="viewModels:ListItemViewModel"
            Gallery="{StaticResource GalleryGridItemViewModelTemplate}"
            GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
            Medium="{StaticResource MediumGridItemViewModelTemplate}"
            Section="{StaticResource ListSectionViewModelTemplate}"
            Separator="{StaticResource GridSeparatorViewModelTemplate}"
            Small="{StaticResource SmallGridItemViewModelTemplate}" />

        <cmdpalUI:GridItemContainerStyleSelector
            x:Key="GridItemContainerStyleSelector"
            Gallery="{StaticResource GalleryGridViewItemStyle}"
            GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
            Medium="{StaticResource IconGridViewItemStyle}"
            Section="{StaticResource GridViewSectionItemStyle}"
            Separator="{StaticResource GridViewSeparatorItemStyle}"
            Small="{StaticResource IconGridViewItemStyle}" />

        <DataTemplate x:Key="ListItemSingleRowViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}" ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="28" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <cpcontrols:IconBox
                    x:Name="IconBorder"
                    Grid.Column="0"
                    Width="20"
                    Height="20"
                    AutomationProperties.AccessibilityView="Raw"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    SourceKey="{x:Bind Icon, Mode=OneWay}"
                    SourceRequested="{x:Bind help:IconProvider.SourceRequested20}" />

                <!--
                    Title and subtitle are intentionally in a nested Grid instead in the outer container,
                    to avoid pushing the following element (tags) out of bounds.
                -->
                <Grid Grid.Column="1" ColumnSpacing="12">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <TextBlock
                        Grid.Column="0"
                        VerticalAlignment="Center"
                        CharacterSpacing="12"
                        FontSize="14"
                        MaxLines="1"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{x:Bind Title, Mode=OneWay}"
                        TextTrimming="CharacterEllipsis"
                        TextWrapping="NoWrap" />

                    <TextBlock
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        CharacterSpacing="12"
                        FontSize="14"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        MaxLines="1"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{x:Bind Subtitle, Mode=OneWay}"
                        TextTrimming="CharacterEllipsis"
                        TextWrapping="NoWrap"
                        Visibility="{x:Bind ShowSubtitle, Mode=OneWay}" />
                </Grid>

                <!--
                    An 8px right margin is added to visually match the spacing between the icon
                    and the left margin of the list.
                    ItemRepeater is a lightweight control (compared to ItemsControl).
                -->
                <ItemsRepeater
                    Grid.Column="2"
                    Margin="0,0,8,0"
                    VerticalAlignment="Center"
                    IsHitTestVisible="False"
                    IsTabStop="False"
                    ItemTemplate="{StaticResource TagTemplate}"
                    ItemsSource="{x:Bind Tags, Mode=OneWay}"
                    Visibility="{x:Bind HasTags, Mode=OneWay}">
                    <ItemsRepeater.Layout>
                        <StackLayout Orientation="Horizontal" Spacing="4" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="ListSeparatorViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <Grid ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="28" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Rectangle
                    Grid.Column="1"
                    Height="1"
                    Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="ListSectionViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <Grid
                Margin="0,8,0,0"
                VerticalAlignment="Center"
                cpcontrols:WrapPanel.IsFullLine="True"
                ColumnSpacing="8"
                IsTabStop="False"
                IsTapEnabled="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Column="0"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Style="{ThemeResource CaptionTextBlockStyle}"
                    Text="{x:Bind Section}" />
            </Grid>
        </DataTemplate>

        <!--  Grid item templates for visual grid representation  -->
        <DataTemplate x:Key="SmallGridItemViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <StackPanel
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
                BorderThickness="0"
                CornerRadius="{StaticResource SmallGridViewItemCornerRadius}"
                Orientation="Vertical"
                ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">

                <cpcontrols:IconBox
                    x:Name="GridIconBorder"
                    Width="{StaticResource SmallGridSize}"
                    Height="{StaticResource SmallGridSize}"
                    Margin="0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="{ThemeResource TextFillColorPrimary}"
                    SourceKey="{x:Bind Icon, Mode=OneWay}"
                    SourceRequested="{x:Bind help:IconProvider.SourceRequested32}" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="MediumGridItemViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <Grid
                Width="{StaticResource MediumGridContainerSize}"
                Height="{StaticResource MediumGridContainerSize}"
                Padding="8"
                AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
                CornerRadius="{StaticResource MediumGridViewItemCornerRadius}"
                ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <cpcontrols:IconBox
                    x:Name="GridIconBorder"
                    Grid.Row="0"
                    Width="{StaticResource MediumGridSize}"
                    Height="{StaticResource MediumGridSize}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    CharacterSpacing="12"
                    FontSize="14"
                    Foreground="{ThemeResource TextFillColorPrimary}"
                    SourceKey="{x:Bind Icon, Mode=OneWay}"
                    SourceRequested="{x:Bind help:IconProvider.SourceRequested64}" />
                <TextBlock
                    x:Name="TitleTextBlock"
                    Grid.Row="1"
                    Height="32"
                    Margin="0,8,0,0"
                    HorizontalAlignment="Center"
                    CharacterSpacing="12"
                    FontSize="12"
                    Text="{x:Bind Title, Mode=OneWay}"
                    TextAlignment="Center"
                    TextTrimming="WordEllipsis"
                    TextWrapping="Wrap"
                    Visibility="{x:Bind LayoutShowsTitle, Mode=OneWay}" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="GalleryGridItemViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <StackPanel
                Width="{StaticResource GalleryGridSize}"
                Margin="4"
                Padding="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
                BorderThickness="0"
                CornerRadius="{StaticResource GalleryGridViewItemRadius}"
                Orientation="Vertical"
                ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">

                <Grid
                    Width="{StaticResource GalleryGridSize}"
                    Height="{StaticResource GalleryGridSize}"
                    Margin="0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    CornerRadius="{StaticResource GalleryGridViewItemRadius}">
                    <Viewbox
                        HorizontalAlignment="Center"
                        Stretch="UniformToFill"
                        StretchDirection="Both">
                        <cpcontrols:IconBox
                            CornerRadius="4"
                            Foreground="{ThemeResource TextFillColorPrimary}"
                            SourceKey="{x:Bind Icon, Mode=OneWay}"
                            SourceRequested="{x:Bind help:IconProvider.SourceRequested256}" />
                    </Viewbox>
                </Grid>

                <StackPanel
                    Padding="4"
                    Orientation="Vertical"
                    Spacing="4"
                    Visibility="{x:Bind help:BindTransformers.VisibleWhenAny(ShowTitle, ShowSubtitle)}">
                    <TextBlock
                        x:Name="TitleTextBlock"
                        MaxWidth="152"
                        MaxHeight="40"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        CharacterSpacing="12"
                        FontSize="14"
                        Foreground="{ThemeResource TextFillColorPrimary}"
                        Text="{x:Bind Title, Mode=OneWay}"
                        TextAlignment="Center"
                        TextTrimming="WordEllipsis"
                        TextWrapping="NoWrap"
                        Visibility="{x:Bind ShowTitle, Mode=OneWay}" />
                    <TextBlock
                        x:Name="SubTitleTextBlock"
                        MaxWidth="152"
                        MaxHeight="40"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        CharacterSpacing="11"
                        FontSize="11"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Text="{x:Bind Subtitle, Mode=OneWay}"
                        TextAlignment="Center"
                        TextTrimming="WordEllipsis"
                        TextWrapping="NoWrap"
                        Visibility="{x:Bind ShowSubtitle, Mode=OneWay}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="GridSeparatorViewModelTemplate" x:DataType="viewModels:ListItemViewModel">
            <Rectangle Height="1" Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <controls:SwitchPresenter
            HorizontalAlignment="Stretch"
            TargetType="x:Boolean"
            Value="{x:Bind ViewModel.ShowEmptyContent, Mode=OneWay}">
            <controls:Case Value="False">
                <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"
                            CanDragItems="True"
                            ContextCanceled="Items_OnContextCanceled"
                            ContextRequested="Items_OnContextRequested"
                            DoubleTapped="Items_DoubleTapped"
                            DragItemsCompleted="Items_DragItemsCompleted"
                            DragItemsStarting="Items_DragItemsStarting"
                            IsDoubleTapEnabled="True"
                            IsItemClickEnabled="True"
                            ItemClick="Items_ItemClick"
                            ItemContainerStyleSelector="{StaticResource ListItemContainerStyleSelector}"
                            ItemTemplateSelector="{StaticResource ListItemTemplateSelector}"
                            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="16,16"
                            CanDragItems="True"
                            ContextCanceled="Items_OnContextCanceled"
                            ContextRequested="Items_OnContextRequested"
                            DoubleTapped="Items_DoubleTapped"
                            DragItemsCompleted="Items_DragItemsCompleted"
                            DragItemsStarting="Items_DragItemsStarting"
                            IsDoubleTapEnabled="True"
                            IsItemClickEnabled="True"
                            ItemClick="Items_ItemClick"
                            ItemContainerStyleSelector="{StaticResource GridItemContainerStyleSelector}"
                            ItemTemplateSelector="{StaticResource GridItemTemplateSelector}"
                            ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
                            RightTapped="Items_RightTapped"
                            SelectionChanged="Items_SelectionChanged">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <cpcontrols:WrapPanel
                                        HorizontalSpacing="8"
                                        Orientation="Horizontal"
                                        VerticalSpacing="8" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemContainerTransitions>
                                <TransitionCollection />
                            </GridView.ItemContainerTransitions>
                        </GridView>
                    </controls:Case>
                </controls:SwitchPresenter>
            </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:IconProvider.SourceRequested64}" />
                    <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:Case>
        </controls:SwitchPresenter>
    </Grid>
</Page>
