GridLayoutPage.xaml

<!--  Copyright (c) 2023 Files Community. Licensed under the MIT License. See the LICENSE.  -->
<local:BaseGroupableLayoutPage
	x:Class="Files.App.Views.Layouts.GridLayoutPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:cloud="using:Files.App.Utils.Cloud"
	xmlns:converters="using:Files.App.Converters"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:filesystem="using:Files.App.Utils"
	xmlns:helpers="using:Files.App.Helpers"
	xmlns:i="using:Microsoft.Xaml.Interactivity"
	xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
	xmlns:local="using:Files.App.Views.Layouts"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:storage="using:Files.App.Utils.Storage"
	xmlns:tui="using:CommunityToolkit.WinUI.UI"
	xmlns:uc="using:Files.App.UserControls"
	xmlns:wctanimations="using:CommunityToolkit.WinUI.UI.Animations"
	xmlns:wctconverters="using:CommunityToolkit.WinUI.UI.Converters"
	x:Name="PageRoot"
	NavigationCacheMode="Enabled"
	mc:Ignorable="d">

	<i:Interaction.Behaviors>
		<icore:EventTriggerBehavior EventName="PointerWheelChanged">
			<icore:InvokeCommandAction Command="{x:Bind CommandsViewModel.PointerWheelChangedCommand}" />
		</icore:EventTriggerBehavior>
		<icore:EventTriggerBehavior EventName="PointerPressed">
			<icore:InvokeCommandAction Command="{x:Bind CommandsViewModel.ItemPointerPressedCommand}" />
		</icore:EventTriggerBehavior>
	</i:Interaction.Behaviors>

	<local:BaseGroupableLayoutPage.Resources>
		<Style x:Key="VerticalLayoutGridView" TargetType="GridView">
			<Style.Setters>
				<Setter Property="ItemsPanel">
					<Setter.Value>
						<ItemsPanelTemplate>
							<ItemsWrapGrid Orientation="Vertical" />
						</ItemsPanelTemplate>
					</Setter.Value>
				</Setter>
				<!--  VerticalScrollMode is set to Auto because setting it to Disabled here causes an issue. (#14785)  -->
				<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
				<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
				<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
				<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
			</Style.Setters>
		</Style>

		<Style x:Key="HorizontalLayoutGridView" TargetType="GridView">
			<Style.Setters>
				<Setter Property="ItemsPanel">
					<Setter.Value>
						<ItemsPanelTemplate>
							<ItemsWrapGrid Orientation="Horizontal" />
						</ItemsPanelTemplate>
					</Setter.Value>
				</Setter>
				<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
				<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
				<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
				<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
			</Style.Setters>
		</Style>

		<converters:StringToBrushConverter x:Key="StringToBrushConverter" />
		<wctconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
		<wctconverters:BoolToVisibilityConverter
			x:Key="NegatedBoolToVisibilityConverter"
			FalseValue="Visible"
			TrueValue="Collapsed" />
		<wctconverters:EmptyObjectToObjectConverter
			x:Key="EmptyObjectToObjectConverter"
			EmptyValue="Collapsed"
			NotEmptyValue="Visible" />

		<wctconverters:BoolToObjectConverter
			x:Key="NegatedBoolToOpacityConverter"
			FalseValue="1"
			TrueValue="0" />
		<wctconverters:BoolToVisibilityConverter
			x:Key="BoolToVisibilityConverter"
			FalseValue="Collapsed"
			TrueValue="Visible" />
		<converters:BoolToSelectionModeConverter x:Key="BoolToSelectionModeConverter" />

		<!--  Override border on GridViewItem  -->
		<Thickness x:Key="GridViewItemSelectedBorderThickness">0</Thickness>
		<SolidColorBrush x:Key="GridViewItemSelectedInnerBorderBrush" Color="Transparent" />
		<SolidColorBrush x:Key="GridViewItemPointerOverBorderBrush" Color="Transparent" />

		<!--  Grid View  -->
		<DataTemplate x:Name="GridViewBrowserTemplate" x:DataType="filesystem:ListedItem">
			<UserControl>
				<Grid
					x:Name="GridViewBrowserListedItem"
					Width="{Binding ElementName=PageRoot, Path=ItemWidthGridView, Mode=OneWay}"
					Height="Auto"
					HorizontalAlignment="Stretch"
					VerticalAlignment="Stretch"
					tui:FrameworkElementExtensions.EnableActualSizeBinding="True"
					Background="Transparent"
					IsRightTapEnabled="True"
					Loaded="Grid_Loaded"
					PointerEntered="Grid_PointerEntered"
					ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto" />
						<RowDefinition Height="*" />
					</Grid.RowDefinitions>

					<Grid
						Grid.Row="0"
						Width="{Binding ElementName=PageRoot, Path=ItemWidthGridView, Mode=OneWay}"
						Height="{Binding ElementName=PageRoot, Path=ItemWidthGridView, Mode=OneWay}"
						Opacity="{x:Bind Opacity, Mode=OneWay}"
						Tag="ItemImage">

						<ContentPresenter
							x:Name="PictureBorder"
							Margin="12"
							HorizontalAlignment="Center"
							VerticalAlignment="Center"
							x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
							x:Phase="1"
							CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
							<Image
								x:Name="Picture"
								Source="{x:Bind FileImage, Mode=OneWay}"
								Stretch="Uniform" />
						</ContentPresenter>

						<!--  Loading indicator  -->
						<uc:Shimmer
							x:Name="TypeUnknownGlyph"
							Margin="12"
							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />

						<Image
							x:Name="IconOverlay"
							Width="32"
							Height="32"
							Margin="16"
							HorizontalAlignment="Left"
							VerticalAlignment="Bottom"
							x:Load="True"
							x:Phase="1"
							Source="{x:Bind IconOverlay, Mode=OneWay}"
							Stretch="Uniform" />

						<Viewbox
							x:Name="ShortcutGlyphElement"
							Width="16"
							Height="16"
							Margin="14"
							HorizontalAlignment="Left"
							VerticalAlignment="Bottom"
							x:Load="{x:Bind IsShortcut}"
							x:Phase="1">
							<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
						</Viewbox>

						<Image
							x:Name="ShieldOverlay"
							Width="16"
							Height="16"
							Margin="14"
							HorizontalAlignment="Right"
							VerticalAlignment="Bottom"
							x:Load="{x:Bind IsElevationRequired}"
							x:Phase="1"
							Source="{x:Bind ShieldIcon, Mode=OneWay}"
							Stretch="Uniform" />
					</Grid>

					<Grid
						Grid.Row="1"
						MaxWidth="{Binding ElementName=PageRoot, Path=ItemWidthGridView, Mode=OneWay}"
						Margin="4,0,4,8"
						HorizontalAlignment="Center"
						VerticalAlignment="Stretch">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition Width="*" />
						</Grid.ColumnDefinitions>

						<uc:OpacityIcon
							x:Name="CloudDriveSyncStatusGlyph"
							Grid.Column="0"
							Width="16"
							Height="16"
							Margin="0,0,4,0"
							HorizontalAlignment="Left"
							x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
							x:Phase="2"
							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />

						<Ellipse
							Grid.Column="1"
							Width="12"
							Height="12"
							Margin="0,0,4,0"
							x:Phase="2"
							Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
							ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
							Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />

						<TextBlock
							x:Name="ItemName"
							Grid.Column="2"
							Height="60"
							HorizontalAlignment="Stretch"
							VerticalAlignment="Stretch"
							Opacity="{x:Bind Opacity, Mode=OneWay}"
							Text="{x:Bind Name, Mode=OneWay}"
							TextAlignment="Center"
							TextTrimming="CharacterEllipsis"
							TextWrapping="Wrap" />

					</Grid>

					<CheckBox
						x:Name="SelectionCheckbox"
						Grid.RowSpan="2"
						Grid.ColumnSpan="2"
						Width="32"
						MinWidth="0"
						MinHeight="0"
						Margin="6"
						Padding="0"
						HorizontalAlignment="Left"
						VerticalAlignment="Top"
						AutomationProperties.AccessibilityView="Raw"
						Checked="ItemSelected_Checked"
						DoubleTapped="SelectionCheckbox_DoubleTapped"
						Opacity="0"
						Unchecked="ItemSelected_Unchecked" />

					<Popup x:Name="EditPopup" Grid.Row="1">
						<TextBox
							x:Name="GridViewTextBoxItemName"
							Width="{Binding ElementName=GridViewBrowserListedItem, Path=(tui:FrameworkElementExtensions.ActualWidth)}"
							Margin="0"
							HorizontalAlignment="Stretch"
							VerticalAlignment="Stretch"
							Background="{ThemeResource SolidBackgroundFillColorSecondary}"
							BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
							Text="{x:Bind Name, Mode=OneWay}"
							TextAlignment="Center"
							TextWrapping="Wrap" />
					</Popup>

					<VisualStateManager.VisualStateGroups>
						<VisualStateGroup x:Name="CheckboxVisibilityStates">
							<VisualState x:Name="HideCheckbox" />
							<VisualState x:Name="ShowCheckbox">
								<VisualState.Setters>
									<Setter Target="SelectionCheckbox.Opacity" Value="1" />
								</VisualState.Setters>
							</VisualState>
						</VisualStateGroup>
					</VisualStateManager.VisualStateGroups>
				</Grid>
			</UserControl>
		</DataTemplate>

		<!--  List View  -->
		<DataTemplate x:Name="ListViewBrowserTemplate" x:DataType="filesystem:ListedItem">
			<UserControl>
				<Grid
					x:Name="FilesRootGrid"
					Width="260"
					Height="{Binding RowHeightListView, ElementName=PageRoot, Mode=OneWay}"
					Padding="12,0,12,0"
					HorizontalAlignment="Stretch"
					VerticalAlignment="Center"
					CornerRadius="{StaticResource ControlCornerRadius}"
					IsRightTapEnabled="True"
					Loaded="Grid_Loaded"
					PointerEntered="Grid_PointerEntered"
					ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto" />
						<ColumnDefinition Width="*" />
						<ColumnDefinition Width="Auto" />
					</Grid.ColumnDefinitions>

					<!--  Item Thumbnail  -->
					<Grid
						Grid.Column="0"
						HorizontalAlignment="Left"
						VerticalAlignment="Stretch">

						<!--  Thumbnail  -->
						<Grid
							x:Name="IconBox"
							Width="24"
							Height="24"
							HorizontalAlignment="Center"
							VerticalAlignment="Center"
							AutomationProperties.Name="{helpers:ResourceString Name=FileBrowserThumbnailIconColumnGrid/AutomationProperties/Name}"
							Opacity="{x:Bind Opacity, Mode=OneWay}"
							TabFocusNavigation="Local"
							Tag="ItemImage">
							<ContentPresenter
								x:Name="PicturePresenter"
								Width="20"
								Height="20"
								HorizontalAlignment="Center"
								VerticalAlignment="Center"
								x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
								CornerRadius="{StaticResource DetailsLayoutThumbnailCornerRadius}">
								<Image
									x:Name="Picture"
									Source="{x:Bind FileImage, Mode=OneWay}"
									Stretch="Uniform" />
							</ContentPresenter>

							<!--  Loading indicator  -->
							<uc:Shimmer
								x:Name="TypeUnknownGlyph"
								Margin="2"
								x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />

							<Image
								x:Name="IconOverlay"
								Width="16"
								Height="16"
								Margin="2"
								HorizontalAlignment="Left"
								VerticalAlignment="Bottom"
								x:Load="True"
								Source="{x:Bind IconOverlay, Mode=OneWay}"
								Stretch="Uniform" />
							<Border
								x:Name="ShortcutGlyphElement"
								HorizontalAlignment="Left"
								VerticalAlignment="Bottom"
								x:Load="{x:Bind IsShortcut}">
								<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
							</Border>
							<Image
								x:Name="ShieldOverlay"
								Width="8"
								Height="8"
								HorizontalAlignment="Right"
								VerticalAlignment="Bottom"
								x:Load="{x:Bind IsElevationRequired}"
								Source="{x:Bind ShieldIcon, Mode=OneWay}"
								Stretch="Uniform" />
						</Grid>

						<!--  Selection Check Box  -->
						<CheckBox
							x:Name="SelectionCheckbox"
							Width="20"
							MinWidth="0"
							HorizontalAlignment="Center"
							AutomationProperties.AccessibilityView="Raw"
							Checked="ItemSelected_Checked"
							DoubleTapped="SelectionCheckbox_DoubleTapped"
							Opacity="0"
							Unchecked="ItemSelected_Unchecked" />
					</Grid>

					<!--  Item Name  -->
					<TextBlock
						x:Name="ItemName"
						Grid.Column="1"
						Margin="5,0,5,0"
						HorizontalAlignment="Left"
						VerticalAlignment="Center"
						Opacity="{x:Bind Opacity, Mode=OneWay}"
						Text="{x:Bind Name, Mode=OneWay}"
						TextTrimming="CharacterEllipsis"
						TextWrapping="NoWrap" />

					<!--  Rename Text Box  -->
					<TextBox
						x:Name="ListViewTextBoxItemName"
						Grid.Column="1"
						Margin="0"
						HorizontalAlignment="Stretch"
						VerticalAlignment="Center"
						BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
						TextAlignment="Left"
						TextWrapping="Wrap"
						Visibility="Collapsed">
						<TextBox.Resources>
							<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
						</TextBox.Resources>
					</TextBox>

					<!--  Cloud Status  -->
					<uc:OpacityIcon
						x:Name="CloudDriveSyncStatusGlyph"
						Grid.Column="2"
						Width="16"
						Height="16"
						HorizontalAlignment="Center"
						VerticalAlignment="Center"
						x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
						x:Phase="2"
						Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />

					<!--  Visual Status Managing  -->
					<VisualStateManager.VisualStateGroups>
						<VisualStateGroup x:Name="CheckboxVisibilityStates">
							<VisualState x:Name="HideCheckbox" />
							<VisualState x:Name="ShowCheckbox">
								<VisualState.Setters>
									<Setter Target="SelectionCheckbox.Opacity" Value="1" />
									<Setter Target="IconBox.Opacity" Value="0" />
								</VisualState.Setters>
							</VisualState>
						</VisualStateGroup>
					</VisualStateManager.VisualStateGroups>
				</Grid>
			</UserControl>
		</DataTemplate>

		<!--  Tiles View  -->
		<DataTemplate x:Name="TilesBrowserTemplate" x:DataType="filesystem:ListedItem">
			<UserControl>
				<Grid
					Width="{Binding ElementName=PageRoot, Path=ItemWidthTilesView, Mode=OneWay}"
					MaxHeight="68"
					Padding="0"
					HorizontalAlignment="Left"
					VerticalAlignment="Stretch"
					Background="Transparent"
					ColumnSpacing="4"
					IsRightTapEnabled="True"
					Loaded="Grid_Loaded"
					PointerEntered="Grid_PointerEntered"
					ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto" />
						<ColumnDefinition Width="68" />
						<ColumnDefinition Width="*" />
					</Grid.ColumnDefinitions>

					<StackPanel
						Width="20"
						Margin="8,4,0,4"
						HorizontalAlignment="Center"
						VerticalAlignment="Center"
						Orientation="Vertical">
						<Ellipse
							Width="12"
							Height="12"
							Margin="0,4,0,4"
							x:Phase="2"
							Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
							ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
							Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />

						<uc:OpacityIcon
							x:Name="CloudDriveSyncStatusGlyph"
							Width="16"
							Height="16"
							x:Phase="2"
							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}"
							Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
					</StackPanel>

					<CheckBox
						x:Name="SelectionCheckbox"
						Grid.ColumnSpan="2"
						Width="32"
						MinWidth="0"
						MinHeight="0"
						Margin="6"
						Padding="0"
						HorizontalAlignment="Left"
						VerticalAlignment="Top"
						AutomationProperties.AccessibilityView="Raw"
						Checked="ItemSelected_Checked"
						DoubleTapped="SelectionCheckbox_DoubleTapped"
						Opacity="0"
						Unchecked="ItemSelected_Unchecked" />

					<Grid
						Grid.Column="1"
						Height="60"
						Margin="0,4,0,4"
						Opacity="{x:Bind Opacity, Mode=OneWay}"
						Tag="ItemImage">

						<ContentPresenter
							x:Name="PictureBorder"
							HorizontalAlignment="Center"
							VerticalAlignment="Center"
							x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
							x:Phase="1"
							CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
							<Image
								x:Name="Picture"
								Width="60"
								Source="{x:Bind FileImage, Mode=OneWay}"
								Stretch="Uniform" />
						</ContentPresenter>

						<!--  Loading indicator  -->
						<uc:Shimmer
							x:Name="TypeUnknownGlyph"
							Width="60"
							Height="60"
							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />

						<Image
							x:Name="IconOverlay"
							Width="32"
							Height="32"
							Margin="2"
							HorizontalAlignment="Left"
							VerticalAlignment="Bottom"
							x:Load="True"
							x:Phase="1"
							Source="{x:Bind IconOverlay, Mode=OneWay}"
							Stretch="Uniform" />

						<Viewbox
							x:Name="ShortcutGlyphElement"
							Width="16"
							Height="16"
							HorizontalAlignment="Left"
							VerticalAlignment="Bottom"
							x:Load="{x:Bind IsShortcut}"
							x:Phase="1">
							<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
						</Viewbox>

						<Image
							x:Name="ShieldOverlay"
							Width="16"
							Height="16"
							HorizontalAlignment="Right"
							VerticalAlignment="Bottom"
							x:Load="{x:Bind IsElevationRequired}"
							x:Phase="1"
							Source="{x:Bind ShieldIcon, Mode=OneWay}"
							Stretch="Uniform" />
					</Grid>

					<Grid
						Grid.Column="2"
						Height="60"
						Margin="0,4,8,4"
						RowSpacing="4">
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
						</Grid.RowDefinitions>

						<TextBlock
							x:Name="ItemName"
							Grid.Row="0"
							HorizontalAlignment="Left"
							MaxLines="2"
							Opacity="{x:Bind Opacity, Mode=OneWay}"
							Text="{x:Bind Name, Mode=OneWay}"
							TextTrimming="CharacterEllipsis"
							TextWrapping="Wrap" />

						<TextBox
							x:Name="TileViewTextBoxItemName"
							Grid.Row="0"
							Grid.RowSpan="3"
							MaxHeight="60"
							HorizontalAlignment="Stretch"
							BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
							Canvas.ZIndex="1"
							Text="{x:Bind Name, Mode=OneWay}"
							TextWrapping="Wrap"
							Visibility="Collapsed">
							<TextBox.Resources>
								<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
							</TextBox.Resources>
						</TextBox>

						<TextBlock
							Grid.Row="1"
							HorizontalAlignment="Left"
							FontSize="12px"
							Opacity="0.6"
							Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
							TextTrimming="CharacterEllipsis"
							TextWrapping="NoWrap" />

						<TextBlock
							Grid.Row="2"
							HorizontalAlignment="Left"
							FontSize="12px"
							Opacity="0.6"
							Text="{x:Bind FileSize, Mode=OneWay}"
							TextTrimming="CharacterEllipsis"
							TextWrapping="NoWrap" />

					</Grid>

					<VisualStateManager.VisualStateGroups>
						<VisualStateGroup x:Name="CheckboxVisibilityStates">
							<VisualState x:Name="HideCheckbox" />
							<VisualState x:Name="ShowCheckbox">
								<VisualState.Setters>
									<Setter Target="SelectionCheckbox.Opacity" Value="1" />
								</VisualState.Setters>
							</VisualState>
						</VisualStateGroup>
					</VisualStateManager.VisualStateGroups>
				</Grid>
			</UserControl>
		</DataTemplate>

		<Style TargetType="GridViewHeaderItem">
			<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
			<Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
			<Setter Property="Background" Value="{ThemeResource GridViewHeaderItemBackground}" />
			<Setter Property="Margin" Value="0,0,0,4" />
			<Setter Property="Padding" Value="12,8,12,0" />
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
			<Setter Property="VerticalContentAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}" />
			<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
			<Setter Property="HorizontalAlignment" Value="Stretch" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="GridViewHeaderItem">
						<Grid
							x:Name="HeaderItemRootGrid"
							Margin="0,0,4,0"
							HorizontalAlignment="Stretch"
							Background="{TemplateBinding Background}"
							BorderBrush="{TemplateBinding BorderBrush}"
							BorderThickness="{TemplateBinding BorderThickness}"
							CornerRadius="{TemplateBinding CornerRadius}"
							PointerCanceled="StackPanel_PointerCanceled"
							PointerEntered="StackPanel_PointerEntered"
							PointerExited="StackPanel_PointerCanceled"
							PointerPressed="RootPanel_PointerPressed"
							PointerReleased="StackPanel_PointerCanceled">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto" />
								<ColumnDefinition Width="*" />
							</Grid.ColumnDefinitions>

							<ContentPresenter
								x:Name="ContentPresenter"
								Grid.Column="0"
								Margin="{TemplateBinding Padding}"
								HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
								VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
								Content="{TemplateBinding Content}"
								ContentTemplate="{TemplateBinding ContentTemplate}"
								ContentTransitions="{TemplateBinding ContentTransitions}" />

							<Rectangle
								Grid.Column="1"
								Height="1"
								HorizontalAlignment="Stretch"
								VerticalAlignment="Center"
								Stroke="{ThemeResource GridViewHeaderItemDividerStroke}"
								StrokeThickness="0.5" />

							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal" />
									<VisualState x:Name="PointerOver">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderItemRootGrid" Storyboard.TargetProperty="Background">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderItemRootGrid" Storyboard.TargetProperty="BorderBrush">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
										<VisualState.Setters>
											<!--<Setter Target="ContentPresenter.(local:AnimatedIcon.State)" Value="PointerOver" />-->
										</VisualState.Setters>
									</VisualState>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderItemRootGrid" Storyboard.TargetProperty="Background">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderItemRootGrid" Storyboard.TargetProperty="BorderBrush">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
										<VisualState.Setters>
											<!--<Setter Target="ContentPresenter.(local:AnimatedIcon.State)" Value="Pressed" />-->
										</VisualState.Setters>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<Style
			x:Name="DefaultItemContainerStyle"
			BasedOn="{StaticResource DefaultGridViewItemStyle}"
			TargetType="GridViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="HorizontalAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="1" />
		</Style>

		<Style
			x:Name="CompactListItemContainerStyle"
			BasedOn="{StaticResource DefaultGridViewItemStyle}"
			TargetType="GridViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="HorizontalAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="1" />
			<Setter Property="Margin" Value="0" />
		</Style>
	</local:BaseGroupableLayoutPage.Resources>

	<Grid x:Name="RootGrid" ContextFlyout="{x:Bind BaseContextMenuFlyout}">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<!--  Empty Indicator  -->
		<uc:FolderEmptyIndicator
			Grid.Row="3"
			Margin="0,125,0,0"
			HorizontalAlignment="Center"
			VerticalAlignment="Top"
			Canvas.ZIndex="0"
			EmptyTextType="{x:Bind ParentShellPageInstance.FilesystemViewModel.EmptyTextType, Mode=OneWay}" />

		<!--  Invalid Item Name Tip  -->
		<TeachingTip
			x:Name="FileNameTeachingTip"
			CloseButtonContent="{helpers:ResourceString Name=OK}"
			PreferredPlacement="Auto"
			Subtitle="{helpers:ResourceString Name=FileNameTeachingTip/Subtitle}"
			Visibility="Collapsed" />

		<!--  Grouping/Ungrouping  -->
		<SemanticZoom
			x:Name="RootGridZoom"
			Grid.Row="1"
			CanChangeViews="{x:Bind CollectionViewSource.IsSourceGrouped, Mode=OneWay}"
			ViewChangeStarted="SemanticZoom_ViewChangeStarted"
			Visibility="{x:Bind FolderSettings.IsLayoutModeChanging, Mode=OneWay, Converter={StaticResource NegatedBoolToVisibilityConverter}}">

			<!--  Main View  -->
			<SemanticZoom.ZoomedInView>
				<GridView
					x:Name="FileList"
					Padding="8"
					VerticalContentAlignment="Stretch"
					tui:ScrollViewerExtensions.EnableMiddleClickScrolling="{x:Bind IsMiddleClickToScrollEnabled, Mode=OneWay}"
					wctanimations:ItemsReorderAnimation.Duration="0:0:0.350"
					x:FieldModifier="public"
					AllowDrop="{x:Bind InstanceViewModel.IsPageTypeSearchResults, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
					CanDragItems="{x:Bind AllowItemDrag, Mode=OneWay}"
					ContainerContentChanging="FileList_ContainerContentChanging"
					DoubleTapped="FileList_DoubleTapped"
					DragEnter="ItemsLayout_DragEnter"
					DragItemsStarting="FileList_DragItemsStarting"
					DragLeave="ItemsLayout_DragLeave"
					DragOver="ItemsLayout_DragOver"
					Drop="ItemsLayout_Drop"
					FocusVisualPrimaryThickness="0"
					FocusVisualSecondaryThickness="0"
					IsDoubleTapEnabled="True"
					IsTabStop="True"
					ItemContainerTransitions="{x:Null}"
					ItemsSource="{x:Bind CollectionViewSource.View, Mode=OneWay}"
					Loaded="FileList_Loaded"
					PreviewKeyDown="FileList_PreviewKeyDown"
					ScrollViewer.IsHorizontalScrollChainingEnabled="False"
					SelectionChanged="FileList_SelectionChanged"
					SelectionMode="Extended"
					ShowsScrollingPlaceholders="True"
					Tapped="FileList_ItemTapped">

					<GridView.GroupStyle>
						<GroupStyle>
							<GroupStyle.HeaderTemplate>
								<DataTemplate x:DataType="storage:IGroupedCollectionHeader">
									<Grid
										Padding="0,0,0,4"
										AutomationProperties.Name="{x:Bind Model.Text}"
										ColumnSpacing="8"
										RowSpacing="8">
										<Grid.ColumnDefinitions>
											<ColumnDefinition Width="Auto" />
											<ColumnDefinition Width="Auto" />
											<ColumnDefinition Width="Auto" />
										</Grid.ColumnDefinitions>
										<Grid.RowDefinitions>
											<RowDefinition Height="Auto" />
											<RowDefinition Height="Auto" />
										</Grid.RowDefinitions>

										<TextBlock
											Grid.Row="0"
											Grid.Column="0"
											VerticalAlignment="Center"
											FontSize="16"
											Style="{StaticResource SubtitleTextBlockStyle}"
											Text="{x:Bind Model.Text, Mode=OneWay}" />

										<TextBlock
											Grid.Row="0"
											Grid.Column="1"
											VerticalAlignment="Center"
											Style="{StaticResource App.Theme.BodyTextBlockStyle}"
											Text="{x:Bind Model.CountText, Mode=OneWay}"
											Visibility="{x:Bind Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource NegatedBoolToVisibilityConverter}}" />

										<TextBlock
											Grid.Row="0"
											Grid.Column="2"
											VerticalAlignment="Center"
											FontSize="14"
											Style="{StaticResource SubheaderTextBlockStyle}"
											Text="{x:Bind Model.Subtext, Mode=OneWay}"
											Visibility="{x:Bind Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />

										<TextBlock
											Grid.Row="1"
											Grid.ColumnSpan="3"
											Style="{StaticResource App.Theme.BodyTextBlockStyle}"
											Text="{x:Bind Model.CountText, Mode=OneWay}"
											Visibility="{x:Bind Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />

									</Grid>
								</DataTemplate>
							</GroupStyle.HeaderTemplate>
						</GroupStyle>
					</GridView.GroupStyle>

				</GridView>
			</SemanticZoom.ZoomedInView>

			<!--  Grouped View  -->
			<SemanticZoom.ZoomedOutView>
				<ListView
					Padding="0,12,0,0"
					HorizontalAlignment="Stretch"
					VerticalContentAlignment="Center"
					ItemsSource="{x:Bind CollectionViewSource.View.CollectionGroups, Mode=OneWay}"
					SelectionMode="None">
					<ListView.ItemTemplate>
						<DataTemplate x:DataType="ICollectionViewGroup">
							<Grid
								Padding="8"
								VerticalAlignment="Center"
								AutomationProperties.Name="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Text, Mode=OneWay}"
								ColumnSpacing="12"
								RowSpacing="4">
								<Grid.ColumnDefinitions>
									<ColumnDefinition Width="Auto" />
									<ColumnDefinition Width="Auto" />
									<ColumnDefinition Width="Auto" />
									<ColumnDefinition Width="Auto" />
								</Grid.ColumnDefinitions>
								<Grid.RowDefinitions>
									<RowDefinition Height="*" />
									<RowDefinition Height="Auto" />
								</Grid.RowDefinitions>

								<Image
									Grid.Row="0"
									Grid.RowSpan="2"
									Grid.Column="0"
									Height="24"
									HorizontalAlignment="Center"
									VerticalAlignment="Center"
									Source="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.ImageSource, Mode=OneWay}"
									Stretch="Uniform" />

								<FontIcon
									Grid.Row="0"
									Grid.RowSpan="2"
									Grid.Column="0"
									HorizontalAlignment="Center"
									VerticalAlignment="Center"
									FontSize="24"
									Glyph="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Icon, Mode=OneWay}" />

								<TextBlock
									Grid.Row="0"
									Grid.Column="1"
									VerticalAlignment="Center"
									FontSize="16"
									Style="{StaticResource SubtitleTextBlockStyle}"
									Text="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Text, Mode=OneWay}" />

								<TextBlock
									Grid.Row="0"
									Grid.Column="2"
									VerticalAlignment="Center"
									Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
									Style="{StaticResource App.Theme.BodyTextBlockStyle}"
									Text="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.CountText, Mode=OneWay}"
									Visibility="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource NegatedBoolToVisibilityConverter}}" />

								<TextBlock
									Grid.Row="0"
									Grid.Column="3"
									VerticalAlignment="Center"
									FontSize="14"
									Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
									Style="{StaticResource SubheaderTextBlockStyle}"
									Text="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Subtext, Mode=OneWay}"
									Visibility="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />

								<TextBlock
									Grid.Row="1"
									Grid.Column="1"
									Grid.ColumnSpan="3"
									Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
									Style="{StaticResource App.Theme.BodyTextBlockStyle}"
									Text="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.CountText, Mode=OneWay}"
									Visibility="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />

							</Grid>
						</DataTemplate>
					</ListView.ItemTemplate>
				</ListView>
			</SemanticZoom.ZoomedOutView>

		</SemanticZoom>

		<!--  Selector  -->
		<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
			<Rectangle
				Name="SelectionRectangle"
				Canvas.Left="0"
				Canvas.Top="0"
				Width="0"
				Height="0"
				Fill="{ThemeResource SystemAccentColor}"
				Opacity=".5"
				Stroke="{ThemeResource SystemAccentColorLight1}"
				StrokeThickness="1" />
		</Canvas>

	</Grid>
</local:BaseGroupableLayoutPage>