1  <?xml version="1.0" encoding="utf-8" ?>
  2  <Page
  3      x:Class="Microsoft.CmdPal.UI.ListPage"
  4      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  5      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6      xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
  7      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
  8      xmlns:coreViewModels="using:Microsoft.CmdPal.Core.ViewModels"
  9      xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
 10      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 11      xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
 12      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 13      x:Name="PageRoot"
 14      Background="Transparent"
 15      DataContext="{x:Bind ViewModel, Mode=OneWay}"
 16      mc:Ignorable="d">
 17  
 18      <Page.Resources>
 19  
 20          <!--
 21              GridViewItemCornerRadius is the corner radius defined in GridView template; make
 22              it bigger to match the radii of the gallery
 23          -->
 24          <CornerRadius x:Key="GalleryGridViewItemContainerCornerRadius">6</CornerRadius>
 25          <CornerRadius x:Key="IconGridViewItemContainerCornerRadius">4</CornerRadius>
 26          <CornerRadius x:Key="GalleryGridViewItemRadius">4</CornerRadius>
 27          <CornerRadius x:Key="SmallGridViewItemCornerRadius">8</CornerRadius>
 28          <CornerRadius x:Key="MediumGridViewItemCornerRadius">8</CornerRadius>
 29  
 30          <x:Double x:Key="SmallGridSize">32</x:Double>
 31          <x:Double x:Key="MediumGridSize">48</x:Double>
 32          <x:Double x:Key="MediumGridContainerSize">100</x:Double>
 33          <x:Double x:Key="GalleryGridSize">160</x:Double>
 34  
 35          <x:Double x:Key="ListViewItemMinHeight">40</x:Double>
 36          <x:Double x:Key="ListViewSectionMinHeight">0</x:Double>
 37          <x:Double x:Key="ListViewSeparatorMinHeight">0</x:Double>
 38  
 39          <Style x:Key="IconGridViewItemStyle" TargetType="GridViewItem">
 40              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
 41              <Setter Property="VerticalContentAlignment" Value="Center" />
 42              <Setter Property="Template">
 43                  <Setter.Value>
 44                      <ControlTemplate TargetType="GridViewItem">
 45                          <ListViewItemPresenter
 46                              x:Name="Root"
 47                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
 48                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
 49                              CheckBoxBorderBrush="{ThemeResource GridViewItemCheckBoxBorderBrush}"
 50                              CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
 51                              CheckBoxCornerRadius="{ThemeResource GridViewItemCheckBoxCornerRadius}"
 52                              CheckBoxDisabledBorderBrush="{ThemeResource GridViewItemCheckBoxDisabledBorderBrush}"
 53                              CheckBoxDisabledBrush="{ThemeResource GridViewItemCheckBoxDisabledBrush}"
 54                              CheckBoxPointerOverBorderBrush="{ThemeResource GridViewItemCheckBoxPointerOverBorderBrush}"
 55                              CheckBoxPointerOverBrush="{ThemeResource GridViewItemCheckBoxPointerOverBrush}"
 56                              CheckBoxPressedBorderBrush="{ThemeResource GridViewItemCheckBoxPressedBorderBrush}"
 57                              CheckBoxPressedBrush="{ThemeResource GridViewItemCheckBoxPressedBrush}"
 58                              CheckBoxSelectedBrush="{ThemeResource GridViewItemCheckBoxSelectedBrush}"
 59                              CheckBoxSelectedDisabledBrush="{ThemeResource GridViewItemCheckBoxSelectedDisabledBrush}"
 60                              CheckBoxSelectedPointerOverBrush="{ThemeResource GridViewItemCheckBoxSelectedPointerOverBrush}"
 61                              CheckBoxSelectedPressedBrush="{ThemeResource GridViewItemCheckBoxSelectedPressedBrush}"
 62                              CheckBrush="{ThemeResource GridViewItemCheckBrush}"
 63                              CheckDisabledBrush="{ThemeResource GridViewItemCheckDisabledBrush}"
 64                              CheckMode="{ThemeResource GridViewItemCheckMode}"
 65                              CheckPressedBrush="{ThemeResource GridViewItemCheckPressedBrush}"
 66                              ContentMargin="{TemplateBinding Padding}"
 67                              ContentTransitions="{TemplateBinding ContentTransitions}"
 68                              Control.IsTemplateFocusTarget="True"
 69                              CornerRadius="{StaticResource IconGridViewItemContainerCornerRadius}"
 70                              DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
 71                              DragBackground="{ThemeResource GridViewItemDragBackground}"
 72                              DragForeground="{ThemeResource GridViewItemDragForeground}"
 73                              DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
 74                              FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
 75                              FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
 76                              FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
 77                              FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
 78                              FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
 79                              FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
 80                              PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
 81                              PointerOverBackground="{ThemeResource GridViewItemBackgroundPointerOver}"
 82                              PointerOverBorderBrush="{ThemeResource GridViewItemPointerOverBorderBrush}"
 83                              PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
 84                              PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
 85                              ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
 86                              SelectedBackground="{ThemeResource GridViewItemBackgroundSelected}"
 87                              SelectedBorderBrush="{ThemeResource GridViewItemSelectedBorderBrush}"
 88                              SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
 89                              SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
 90                              SelectedDisabledBorderBrush="{ThemeResource GridViewItemSelectedDisabledBorderBrush}"
 91                              SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
 92                              SelectedInnerBorderBrush="{ThemeResource GridViewItemSelectedInnerBorderBrush}"
 93                              SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
 94                              SelectedPointerOverBorderBrush="{ThemeResource GridViewItemSelectedPointerOverBorderBrush}"
 95                              SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
 96                              SelectedPressedBorderBrush="{ThemeResource GridViewItemSelectedPressedBorderBrush}"
 97                              SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" />
 98                      </ControlTemplate>
 99                  </Setter.Value>
100              </Setter>
101          </Style>
102  
103          <Style x:Key="GalleryGridViewItemStyle" TargetType="GridViewItem">
104              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
105              <Setter Property="VerticalContentAlignment" Value="Center" />
106              <Setter Property="Margin" Value="0" />
107              <Setter Property="Template">
108                  <Setter.Value>
109                      <ControlTemplate TargetType="GridViewItem">
110                          <ListViewItemPresenter
111                              x:Name="Root"
112                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
113                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
114                              CheckBoxBorderBrush="{ThemeResource GridViewItemCheckBoxBorderBrush}"
115                              CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
116                              CheckBoxCornerRadius="{ThemeResource GridViewItemCheckBoxCornerRadius}"
117                              CheckBoxDisabledBorderBrush="{ThemeResource GridViewItemCheckBoxDisabledBorderBrush}"
118                              CheckBoxDisabledBrush="{ThemeResource GridViewItemCheckBoxDisabledBrush}"
119                              CheckBoxPointerOverBorderBrush="{ThemeResource GridViewItemCheckBoxPointerOverBorderBrush}"
120                              CheckBoxPointerOverBrush="{ThemeResource GridViewItemCheckBoxPointerOverBrush}"
121                              CheckBoxPressedBorderBrush="{ThemeResource GridViewItemCheckBoxPressedBorderBrush}"
122                              CheckBoxPressedBrush="{ThemeResource GridViewItemCheckBoxPressedBrush}"
123                              CheckBoxSelectedBrush="{ThemeResource GridViewItemCheckBoxSelectedBrush}"
124                              CheckBoxSelectedDisabledBrush="{ThemeResource GridViewItemCheckBoxSelectedDisabledBrush}"
125                              CheckBoxSelectedPointerOverBrush="{ThemeResource GridViewItemCheckBoxSelectedPointerOverBrush}"
126                              CheckBoxSelectedPressedBrush="{ThemeResource GridViewItemCheckBoxSelectedPressedBrush}"
127                              CheckBrush="{ThemeResource GridViewItemCheckBrush}"
128                              CheckDisabledBrush="{ThemeResource GridViewItemCheckDisabledBrush}"
129                              CheckMode="{ThemeResource GridViewItemCheckMode}"
130                              CheckPressedBrush="{ThemeResource GridViewItemCheckPressedBrush}"
131                              ContentMargin="{TemplateBinding Padding}"
132                              ContentTransitions="{TemplateBinding ContentTransitions}"
133                              Control.IsTemplateFocusTarget="True"
134                              CornerRadius="{StaticResource GalleryGridViewItemContainerCornerRadius}"
135                              DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
136                              DragBackground="{ThemeResource GridViewItemDragBackground}"
137                              DragForeground="{ThemeResource GridViewItemDragForeground}"
138                              DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
139                              FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
140                              FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
141                              FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
142                              FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
143                              FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
144                              FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
145                              PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
146                              PointerOverBackground="{ThemeResource GridViewItemBackgroundPointerOver}"
147                              PointerOverBorderBrush="{ThemeResource GridViewItemPointerOverBorderBrush}"
148                              PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
149                              PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
150                              ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
151                              SelectedBackground="{ThemeResource GridViewItemBackgroundSelected}"
152                              SelectedBorderBrush="{ThemeResource GridViewItemSelectedBorderBrush}"
153                              SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
154                              SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
155                              SelectedDisabledBorderBrush="{ThemeResource GridViewItemSelectedDisabledBorderBrush}"
156                              SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
157                              SelectedInnerBorderBrush="{ThemeResource GridViewItemSelectedInnerBorderBrush}"
158                              SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
159                              SelectedPointerOverBorderBrush="{ThemeResource GridViewItemSelectedPointerOverBorderBrush}"
160                              SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
161                              SelectedPressedBorderBrush="{ThemeResource GridViewItemSelectedPressedBorderBrush}"
162                              SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" />
163                      </ControlTemplate>
164                  </Setter.Value>
165              </Setter>
166          </Style>
167  
168          <Style
169              x:Key="GridViewSectionItemStyle"
170              BasedOn="{StaticResource DefaultGridViewItemStyle}"
171              TargetType="GridViewItem">
172              <Setter Property="IsHitTestVisible" Value="False" />
173              <Setter Property="IsTabStop" Value="False" />
174              <Setter Property="IsHoldingEnabled" Value="False" />
175              <Setter Property="Padding" Value="4,8,12,0" />
176              <Setter Property="Margin" Value="0" />
177              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
178              <Setter Property="VerticalContentAlignment" Value="Bottom" />
179              <Setter Property="MinHeight" Value="{StaticResource ListViewSectionMinHeight}" />
180              <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
181          </Style>
182  
183          <Style
184              x:Key="GridViewSeparatorItemStyle"
185              BasedOn="{StaticResource DefaultGridViewItemStyle}"
186              TargetType="GridViewItem">
187              <Setter Property="IsHitTestVisible" Value="False" />
188              <Setter Property="IsTabStop" Value="False" />
189              <Setter Property="IsHoldingEnabled" Value="False" />
190              <Setter Property="Padding" Value="4,4,12,4" />
191              <Setter Property="Margin" Value="0" />
192              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
193              <Setter Property="VerticalContentAlignment" Value="Center" />
194              <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorMinHeight}" />
195              <Setter Property="cpcontrols:WrapPanel.IsFullLine" Value="True" />
196          </Style>
197  
198          <Style
199              x:Key="ListDefaultContainerStyle"
200              BasedOn="{StaticResource DefaultListViewItemStyle}"
201              TargetType="ListViewItem">
202              <Setter Property="MinHeight" Value="{StaticResource ListViewItemMinHeight}" />
203          </Style>
204  
205          <Style
206              x:Key="ListSectionContainerStyle"
207              BasedOn="{StaticResource DefaultListViewItemStyle}"
208              TargetType="ListViewItem">
209              <Setter Property="IsHitTestVisible" Value="False" />
210              <Setter Property="IsTabStop" Value="False" />
211              <Setter Property="IsHoldingEnabled" Value="False" />
212              <Setter Property="Padding" Value="16,8,12,0" />
213              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
214              <Setter Property="VerticalContentAlignment" Value="Bottom" />
215              <Setter Property="MinHeight" Value="{StaticResource ListViewSectionMinHeight}" />
216              <Setter Property="AllowDrop" Value="False" />
217          </Style>
218  
219          <Style
220              x:Key="ListSeparatorContainerStyle"
221              BasedOn="{StaticResource DefaultListViewItemStyle}"
222              TargetType="ListViewItem">
223              <Setter Property="IsHitTestVisible" Value="False" />
224              <Setter Property="IsTabStop" Value="False" />
225              <Setter Property="IsHoldingEnabled" Value="False" />
226              <Setter Property="Padding" Value="16,4,12,4" />
227              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
228              <Setter Property="VerticalContentAlignment" Value="Center" />
229              <Setter Property="MinHeight" Value="{StaticResource ListViewSeparatorMinHeight}" />
230          </Style>
231  
232          <DataTemplate x:Key="TagTemplate" x:DataType="coreViewModels:TagViewModel">
233              <cpcontrols:Tag
234                  AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
235                  BackgroundColor="{x:Bind Background, Mode=OneWay}"
236                  FontSize="12"
237                  ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
238                  Icon="{x:Bind Icon, Mode=OneWay}"
239                  Text="{x:Bind Text, Mode=OneWay}"
240                  ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
241          </DataTemplate>
242  
243          <cmdpalUI:ListItemTemplateSelector
244              x:Key="ListItemTemplateSelector"
245              x:DataType="coreViewModels:ListItemViewModel"
246              ListItem="{StaticResource ListItemViewModelTemplate}"
247              Section="{StaticResource ListSectionViewModelTemplate}"
248              Separator="{StaticResource ListSeparatorViewModelTemplate}" />
249  
250          <cmdpalUI:ListItemContainerStyleSelector
251              x:Key="ListItemContainerStyleSelector"
252              Default="{StaticResource ListDefaultContainerStyle}"
253              Section="{StaticResource ListSectionContainerStyle}"
254              Separator="{StaticResource ListSeparatorContainerStyle}" />
255  
256          <cmdpalUI:GridItemTemplateSelector
257              x:Key="GridItemTemplateSelector"
258              x:DataType="coreViewModels:ListItemViewModel"
259              Gallery="{StaticResource GalleryGridItemViewModelTemplate}"
260              GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
261              Medium="{StaticResource MediumGridItemViewModelTemplate}"
262              Section="{StaticResource ListSectionViewModelTemplate}"
263              Separator="{StaticResource GridSeparatorViewModelTemplate}"
264              Small="{StaticResource SmallGridItemViewModelTemplate}" />
265  
266          <cmdpalUI:GridItemContainerStyleSelector
267              x:Key="GridItemContainerStyleSelector"
268              Gallery="{StaticResource GalleryGridViewItemStyle}"
269              GridProperties="{x:Bind ViewModel.GridProperties, Mode=OneWay}"
270              Medium="{StaticResource IconGridViewItemStyle}"
271              Section="{StaticResource GridViewSectionItemStyle}"
272              Separator="{StaticResource GridViewSeparatorItemStyle}"
273              Small="{StaticResource IconGridViewItemStyle}" />
274  
275          <!--  https://learn.microsoft.com/windows/apps/design/controls/itemsview#specify-the-look-of-the-items  -->
276          <DataTemplate x:Key="ListItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
277              <Grid
278                  Padding="0,12,0,12"
279                  AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
280                  ColumnSpacing="12">
281                  <Grid.ColumnDefinitions>
282                      <ColumnDefinition Width="28" />
283                      <ColumnDefinition Width="*" />
284                      <ColumnDefinition Width="Auto" />
285                  </Grid.ColumnDefinitions>
286  
287                  <cpcontrols:IconBox
288                      x:Name="IconBorder"
289                      Grid.Column="0"
290                      Width="20"
291                      Height="20"
292                      Margin="4,0,4,0"
293                      AutomationProperties.AccessibilityView="Raw"
294                      Foreground="{ThemeResource TextFillColorSecondaryBrush}"
295                      SourceKey="{x:Bind Icon, Mode=OneWay}"
296                      SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested20}" />
297  
298                  <StackPanel
299                      Grid.Column="1"
300                      VerticalAlignment="Center"
301                      Orientation="Vertical"
302                      Spacing="1">
303                      <TextBlock
304                          VerticalAlignment="Center"
305                          CharacterSpacing="12"
306                          FontSize="14"
307                          Text="{x:Bind Title, Mode=OneWay}"
308                          TextTrimming="CharacterEllipsis"
309                          TextWrapping="NoWrap" />
310                      <TextBlock
311                          VerticalAlignment="Center"
312                          Foreground="{ThemeResource TextFillColorSecondaryBrush}"
313                          Style="{StaticResource CaptionTextBlockStyle}"
314                          Text="{x:Bind Subtitle, Mode=OneWay}"
315                          TextTrimming="CharacterEllipsis"
316                          TextWrapping="NoWrap"
317                          Visibility="{x:Bind ShowSubtitle, Mode=OneWay}" />
318                  </StackPanel>
319  
320                  <ItemsControl
321                      Grid.RowSpan="2"
322                      Grid.Column="2"
323                      Margin="0,0,8,0"
324                      VerticalAlignment="Center"
325                      IsHitTestVisible="False"
326                      IsTabStop="False"
327                      ItemTemplate="{StaticResource TagTemplate}"
328                      ItemsSource="{x:Bind Tags, Mode=OneWay}"
329                      Visibility="{x:Bind HasTags, Mode=OneWay}">
330                      <ItemsControl.ItemsPanel>
331                          <ItemsPanelTemplate>
332                              <StackPanel Orientation="Horizontal" Spacing="4" />
333                          </ItemsPanelTemplate>
334                      </ItemsControl.ItemsPanel>
335                  </ItemsControl>
336              </Grid>
337          </DataTemplate>
338  
339          <DataTemplate x:Key="ListSeparatorViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
340              <Grid ColumnSpacing="12">
341                  <Grid.ColumnDefinitions>
342                      <ColumnDefinition Width="28" />
343                      <ColumnDefinition Width="*" />
344                  </Grid.ColumnDefinitions>
345                  <Rectangle
346                      Grid.Column="1"
347                      Height="1"
348                      Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
349              </Grid>
350          </DataTemplate>
351  
352          <DataTemplate x:Key="ListSectionViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
353              <Grid
354                  Margin="0,8,0,0"
355                  VerticalAlignment="Center"
356                  cpcontrols:WrapPanel.IsFullLine="True"
357                  ColumnSpacing="8"
358                  IsTabStop="False"
359                  IsTapEnabled="True">
360                  <Grid.ColumnDefinitions>
361                      <ColumnDefinition Width="Auto" />
362                      <ColumnDefinition Width="*" />
363                  </Grid.ColumnDefinitions>
364                  <TextBlock
365                      Grid.Column="0"
366                      Foreground="{ThemeResource TextFillColorSecondaryBrush}"
367                      Style="{ThemeResource CaptionTextBlockStyle}"
368                      Text="{x:Bind Section}" />
369              </Grid>
370          </DataTemplate>
371  
372          <!--  Grid item templates for visual grid representation  -->
373          <DataTemplate x:Key="SmallGridItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
374              <StackPanel
375                  HorizontalAlignment="Center"
376                  VerticalAlignment="Center"
377                  AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
378                  BorderThickness="0"
379                  CornerRadius="{StaticResource SmallGridViewItemCornerRadius}"
380                  Orientation="Vertical"
381                  ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">
382  
383                  <cpcontrols:IconBox
384                      x:Name="GridIconBorder"
385                      Width="{StaticResource SmallGridSize}"
386                      Height="{StaticResource SmallGridSize}"
387                      Margin="0"
388                      HorizontalAlignment="Center"
389                      VerticalAlignment="Center"
390                      Foreground="{ThemeResource TextFillColorPrimary}"
391                      SourceKey="{x:Bind Icon, Mode=OneWay}"
392                      SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested32}" />
393              </StackPanel>
394          </DataTemplate>
395  
396          <DataTemplate x:Key="MediumGridItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
397              <Grid
398                  Width="{StaticResource MediumGridContainerSize}"
399                  Height="{StaticResource MediumGridContainerSize}"
400                  Padding="8"
401                  AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
402                  CornerRadius="{StaticResource MediumGridViewItemCornerRadius}"
403                  ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">
404                  <Grid.RowDefinitions>
405                      <RowDefinition Height="*" />
406                      <RowDefinition Height="Auto" />
407                  </Grid.RowDefinitions>
408                  <cpcontrols:IconBox
409                      x:Name="GridIconBorder"
410                      Grid.Row="0"
411                      Width="{StaticResource MediumGridSize}"
412                      Height="{StaticResource MediumGridSize}"
413                      HorizontalAlignment="Center"
414                      VerticalAlignment="Center"
415                      CharacterSpacing="12"
416                      FontSize="14"
417                      Foreground="{ThemeResource TextFillColorPrimary}"
418                      SourceKey="{x:Bind Icon, Mode=OneWay}"
419                      SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested64}" />
420                  <TextBlock
421                      x:Name="TitleTextBlock"
422                      Grid.Row="1"
423                      Height="32"
424                      Margin="0,8,0,0"
425                      HorizontalAlignment="Center"
426                      CharacterSpacing="12"
427                      FontSize="12"
428                      Text="{x:Bind Title, Mode=OneWay}"
429                      TextAlignment="Center"
430                      TextTrimming="WordEllipsis"
431                      TextWrapping="Wrap"
432                      Visibility="{x:Bind LayoutShowsTitle, Mode=OneWay}" />
433              </Grid>
434          </DataTemplate>
435  
436          <DataTemplate x:Key="GalleryGridItemViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
437              <StackPanel
438                  Width="{StaticResource GalleryGridSize}"
439                  Margin="4"
440                  Padding="0"
441                  HorizontalAlignment="Center"
442                  VerticalAlignment="Center"
443                  AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
444                  BorderThickness="0"
445                  CornerRadius="{StaticResource GalleryGridViewItemRadius}"
446                  Orientation="Vertical"
447                  ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">
448  
449                  <Grid
450                      Width="{StaticResource GalleryGridSize}"
451                      Height="{StaticResource GalleryGridSize}"
452                      Margin="0"
453                      HorizontalAlignment="Center"
454                      VerticalAlignment="Center"
455                      CornerRadius="{StaticResource GalleryGridViewItemRadius}">
456                      <Viewbox
457                          HorizontalAlignment="Center"
458                          Stretch="UniformToFill"
459                          StretchDirection="Both">
460                          <cpcontrols:IconBox
461                              CornerRadius="4"
462                              Foreground="{ThemeResource TextFillColorPrimary}"
463                              SourceKey="{x:Bind Icon, Mode=OneWay}"
464                              SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested256}" />
465                      </Viewbox>
466                  </Grid>
467  
468                  <StackPanel
469                      Padding="4"
470                      Orientation="Vertical"
471                      Spacing="4"
472                      Visibility="{x:Bind help:BindTransformers.VisibleWhenAny(ShowTitle, ShowSubtitle)}">
473                      <TextBlock
474                          x:Name="TitleTextBlock"
475                          MaxWidth="152"
476                          MaxHeight="40"
477                          HorizontalAlignment="Left"
478                          VerticalAlignment="Center"
479                          CharacterSpacing="12"
480                          FontSize="14"
481                          Foreground="{ThemeResource TextFillColorPrimary}"
482                          Text="{x:Bind Title, Mode=OneWay}"
483                          TextAlignment="Center"
484                          TextTrimming="WordEllipsis"
485                          TextWrapping="NoWrap"
486                          Visibility="{x:Bind ShowTitle, Mode=OneWay}" />
487                      <TextBlock
488                          x:Name="SubTitleTextBlock"
489                          MaxWidth="152"
490                          MaxHeight="40"
491                          HorizontalAlignment="Left"
492                          VerticalAlignment="Center"
493                          CharacterSpacing="11"
494                          FontSize="11"
495                          Foreground="{ThemeResource TextFillColorSecondaryBrush}"
496                          Text="{x:Bind Subtitle, Mode=OneWay}"
497                          TextAlignment="Center"
498                          TextTrimming="WordEllipsis"
499                          TextWrapping="NoWrap"
500                          Visibility="{x:Bind ShowSubtitle, Mode=OneWay}" />
501                  </StackPanel>
502              </StackPanel>
503          </DataTemplate>
504  
505          <DataTemplate x:Key="GridSeparatorViewModelTemplate" x:DataType="coreViewModels:ListItemViewModel">
506              <Rectangle Height="1" Fill="{ThemeResource DividerStrokeColorDefaultBrush}" />
507          </DataTemplate>
508      </Page.Resources>
509  
510      <Grid>
511          <controls:SwitchPresenter
512              HorizontalAlignment="Stretch"
513              TargetType="x:Boolean"
514              Value="{x:Bind ViewModel.ShowEmptyContent, Mode=OneWay}">
515              <controls:Case Value="False">
516                  <controls:SwitchPresenter
517                      HorizontalAlignment="Stretch"
518                      TargetType="x:Boolean"
519                      Value="{x:Bind ViewModel.IsGridView, Mode=OneWay}">
520                      <controls:Case Value="False">
521                          <ListView
522                              x:Name="ItemsList"
523                              Padding="0,2,0,0"
524                              CanDragItems="True"
525                              ContextCanceled="Items_OnContextCanceled"
526                              ContextRequested="Items_OnContextRequested"
527                              DoubleTapped="Items_DoubleTapped"
528                              DragItemsCompleted="Items_DragItemsCompleted"
529                              DragItemsStarting="Items_DragItemsStarting"
530                              IsDoubleTapEnabled="True"
531                              IsItemClickEnabled="True"
532                              ItemClick="Items_ItemClick"
533                              ItemContainerStyleSelector="{StaticResource ListItemContainerStyleSelector}"
534                              ItemTemplateSelector="{StaticResource ListItemTemplateSelector}"
535                              ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
536                              RightTapped="Items_RightTapped"
537                              SelectionChanged="Items_SelectionChanged">
538                              <ListView.ItemContainerTransitions>
539                                  <TransitionCollection />
540                              </ListView.ItemContainerTransitions>
541                          </ListView>
542                      </controls:Case>
543                      <controls:Case Value="True">
544                          <GridView
545                              x:Name="ItemsGrid"
546                              Padding="16,16"
547                              CanDragItems="True"
548                              ContextCanceled="Items_OnContextCanceled"
549                              ContextRequested="Items_OnContextRequested"
550                              DoubleTapped="Items_DoubleTapped"
551                              DragItemsCompleted="Items_DragItemsCompleted"
552                              DragItemsStarting="Items_DragItemsStarting"
553                              IsDoubleTapEnabled="True"
554                              IsItemClickEnabled="True"
555                              ItemClick="Items_ItemClick"
556                              ItemContainerStyleSelector="{StaticResource GridItemContainerStyleSelector}"
557                              ItemTemplateSelector="{StaticResource GridItemTemplateSelector}"
558                              ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
559                              RightTapped="Items_RightTapped"
560                              SelectionChanged="Items_SelectionChanged">
561                              <GridView.ItemsPanel>
562                                  <ItemsPanelTemplate>
563                                      <cpcontrols:WrapPanel
564                                          HorizontalSpacing="8"
565                                          Orientation="Horizontal"
566                                          VerticalSpacing="8" />
567                                  </ItemsPanelTemplate>
568                              </GridView.ItemsPanel>
569                              <GridView.ItemContainerTransitions>
570                                  <TransitionCollection />
571                              </GridView.ItemContainerTransitions>
572                          </GridView>
573                      </controls:Case>
574                  </controls:SwitchPresenter>
575              </controls:Case>
576              <controls:Case Value="True">
577                  <StackPanel
578                      Margin="24"
579                      HorizontalAlignment="Center"
580                      VerticalAlignment="Center"
581                      Orientation="Vertical"
582                      Spacing="4">
583                      <cpcontrols:IconBox
584                          x:Name="IconBorder"
585                          Width="48"
586                          Height="48"
587                          Margin="8"
588                          Foreground="{ThemeResource TextFillColorSecondaryBrush}"
589                          SourceKey="{x:Bind ViewModel.EmptyContent.Icon, Mode=OneWay}"
590                          SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested64}" />
591                      <TextBlock
592                          Margin="0,4,0,0"
593                          HorizontalAlignment="Center"
594                          FontWeight="SemiBold"
595                          Text="{x:Bind ViewModel.EmptyContent.Title, Mode=OneWay}"
596                          TextAlignment="Center"
597                          TextWrapping="Wrap" />
598                      <TextBlock
599                          HorizontalAlignment="Center"
600                          Foreground="{ThemeResource TextFillColorSecondaryBrush}"
601                          Text="{x:Bind ViewModel.EmptyContent.Subtitle, Mode=OneWay}"
602                          TextAlignment="Center"
603                          TextWrapping="Wrap" />
604                  </StackPanel>
605              </controls:Case>
606          </controls:SwitchPresenter>
607      </Grid>
608  </Page>