src/Files.App/Views/Layouts/GridLayoutPage.xaml - main - githubmirror/Files

src/Files.App/Views/Layouts/GridLayoutPage.xaml
1 210 строк48 KB
yair100
Feature: Replaced 'folder not found' dialog with inline text (#18757)
21 июл 2026, 04:20
21 июл 2026, 04:20ffa2eac
<!--  Copyright (c) Files Community. Licensed under the MIT 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:controls="using:Files.App.Controls"
	xmlns:converters="using:Files.App.Converters"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:datamodels="using:Files.App.Data.Models"
	xmlns:ext="using:Files.App.Extensions"
	xmlns:filesystem="using:Files.App.Utils"
	xmlns:helpers="using:Files.App.Helpers"
	xmlns:i="using:Microsoft.Xaml.Interactivity"
	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"
	xmlns:uc="using:Files.App.UserControls"
	xmlns:wctanimations="using:CommunityToolkit.WinUI.Animations"
	xmlns:wctconverters="using:CommunityToolkit.WinUI.Converters"
	xmlns:wctlabs="using:CommunityToolkit.Labs.WinUI"
	x:Name="PageRoot"
	NavigationCacheMode="Enabled"
	mc:Ignorable="d">

	<i:Interaction.Behaviors>
		<i:EventTriggerBehavior EventName="PointerWheelChanged">
			<i:InvokeCommandAction Command="{x:Bind CommandsViewModel.PointerWheelChangedCommand}" />
		</i:EventTriggerBehavior>
		<i:EventTriggerBehavior EventName="PointerPressed">
			<i:InvokeCommandAction Command="{x:Bind CommandsViewModel.ItemPointerPressedCommand}" />
		</i: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" />

		<!--  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">
					<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  -->
						<wctlabs: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">
							<controls:ThemedIcon
								Width="12"
								Height="12"
								Style="{StaticResource App.ThemedIcons.Shortcut}" />
						</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>

						<Border
							x:Name="CloudDriveSyncStatusGlyph"
							Grid.Column="0"
							HorizontalAlignment="Left"
							x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
							x:Phase="2"
							Background="Transparent"
							ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}">
							<controls:ThemedIcon
								Width="16"
								Height="16"
								Margin="0,0,4,0"
								Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
						</Border>

						<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">
					<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="{Binding IconBoxSizeListView, ElementName=PageRoot, Mode=OneWay}"
							Height="{Binding IconBoxSizeListView, ElementName=PageRoot, Mode=OneWay}"
							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"
								Margin="2"
								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  -->
							<wctlabs: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" />
							<Viewbox
								x:Name="ShortcutGlyphElement"
								Width="10"
								Height="10"
								HorizontalAlignment="Left"
								VerticalAlignment="Bottom"
								x:Load="{x:Bind IsShortcut}">
								<controls:ThemedIcon Style="{StaticResource App.ThemedIcons.Shortcut}" />
							</Viewbox>
							<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  -->
					<Border
						x:Name="CloudDriveSyncStatusGlyph"
						Grid.Column="2"
						HorizontalAlignment="Center"
						VerticalAlignment="Center"
						x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
						x:Phase="2"
						Background="Transparent"
						ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}">
						<controls:ThemedIcon
							Width="16"
							Height="16"
							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
					</Border>

					<!--  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>

		<!--  Cards View  -->
		<DataTemplate x:Name="CardsBrowserTemplate" x:DataType="filesystem:ListedItem">
			<UserControl>
				<Grid
					Padding="0"
					HorizontalAlignment="Left"
					VerticalAlignment="Stretch"
					Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
					BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
					BorderThickness="1"
					CornerRadius="8"
					IsRightTapEnabled="True"
					Loaded="Grid_Loaded">
					<StackPanel Orientation="{Binding ElementName=PageRoot, Path=CardsViewOrientation, Mode=OneWay}">

						<!--  Preview  -->
						<Grid
							Width="{Binding ElementName=PageRoot, Path=CardsViewIconBoxWidth, Mode=OneWay}"
							Height="{Binding ElementName=PageRoot, Path=CardsViewIconBoxHeight, Mode=OneWay}"
							Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
							Opacity="{x:Bind Opacity, Mode=OneWay}"
							Tag="ItemImage">

							<ContentPresenter
								x:Name="PictureBorder"
								Height="{Binding ElementName=PageRoot, Path=CardsViewIconSize, Mode=OneWay}"
								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  -->
							<wctlabs:Shimmer
								x:Name="TypeUnknownGlyph"
								Width="{Binding ElementName=PageRoot, Path=CardsViewIconSize, Mode=OneWay}"
								Height="{Binding ElementName=PageRoot, Path=CardsViewIconSize, Mode=OneWay}"
								x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}" />

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

							<Viewbox
								x:Name="ShortcutGlyphElement"
								Width="16"
								Height="16"
								Margin="8"
								HorizontalAlignment="Right"
								VerticalAlignment="Top"
								x:Load="{x:Bind IsShortcut}"
								x:Phase="1">
								<controls:ThemedIcon
									Width="12"
									Height="12"
									Style="{StaticResource App.ThemedIcons.Shortcut}" />
							</Viewbox>

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

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

						<!--  Details  -->
						<Grid
							Width="{Binding ElementName=PageRoot, Path=CardsViewDetailsBoxWidth, Mode=OneWay}"
							Height="{Binding ElementName=PageRoot, Path=CardsViewDetailsBoxHeight, Mode=OneWay}"
							Padding="12,4,12,4">
							<Grid.RowDefinitions>
								<RowDefinition Height="*" />
								<RowDefinition Height="*" />
								<RowDefinition Height="*" />
								<RowDefinition Height="*" />
								<RowDefinition Height="*" />
							</Grid.RowDefinitions>

							<StackPanel
								Grid.Row="0"
								Grid.RowSpan="2"
								Orientation="Vertical"
								Spacing="4">

								<!--  Item Name  -->
								<TextBlock
									x:Name="ItemName"
									MaxLines="{Binding ElementName=PageRoot, Path=CardsViewItemNameMaxLines, Mode=OneWay}"
									Opacity="{x:Bind Opacity, Mode=OneWay}"
									Style="{ThemeResource App.Theme.BodyStrongTextBlockStyle}"
									Text="{x:Bind Name, Mode=OneWay}"
									TextTrimming="CharacterEllipsis"
									TextWrapping="Wrap" />

								<!--  Item Type  -->
								<TextBlock
									Foreground="{ThemeResource TextFillColorSecondaryBrush}"
									Style="{ThemeResource App.Theme.CaptionTextBlockStyle}"
									Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
									TextTrimming="CharacterEllipsis"
									TextWrapping="NoWrap" />

							</StackPanel>

							<!--  Item Name Edit Box  -->
							<TextBox
								x:Name="TileViewTextBoxItemName"
								Grid.Row="0"
								Grid.RowSpan="5"
								Margin="-2,0,-2,0"
								HorizontalAlignment="Stretch"
								BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
								Canvas.ZIndex="1"
								Text="{x:Bind Name, Mode=OneWay}"
								TextWrapping="Wrap"
								Visibility="Collapsed">
								<TextBox.Resources>
									<ResourceDictionary>
										<ResourceDictionary.ThemeDictionaries>
											<ResourceDictionary x:Key="Light">
												<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource ControlFillColorInputActive}" />
											</ResourceDictionary>
											<ResourceDictionary x:Key="Dark">
												<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#1E1E1E" />
											</ResourceDictionary>
											<ResourceDictionary x:Key="HighContrast">
												<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}" />
											</ResourceDictionary>
										</ResourceDictionary.ThemeDictionaries>
									</ResourceDictionary>
								</TextBox.Resources>
							</TextBox>

							<StackPanel
								Grid.Row="2"
								Grid.RowSpan="3"
								VerticalAlignment="Bottom"
								Orientation="Vertical"
								Spacing="4">

								<!--  Contextual Property  -->
								<TextBlock
									Foreground="{ThemeResource TextFillColorSecondaryBrush}"
									Style="{ThemeResource CaptionTextBlockStyle}"
									Text="{x:Bind ContextualProperty, Mode=OneWay}"
									TextTrimming="CharacterEllipsis"
									TextWrapping="NoWrap"
									Visibility="{Binding ElementName=PageRoot, Path=CardsViewShowContextualProperty, Mode=OneWay}" />

								<!--  Drive Storage Information  -->
								<ProgressBar
									x:Name="DriveStorageProgressBar"
									x:Load="{x:Bind ShowDriveStorageDetails, Mode=OneWay}"
									AutomationProperties.AccessibilityView="Raw"
									Maximum="{x:Bind MaxSpace.GigaBytes, Mode=OneWay}"
									Value="{x:Bind SpaceUsed.GigaBytes, Mode=OneWay}" />

								<!--  Item Size  -->
								<TextBlock
									Foreground="{ThemeResource TextFillColorSecondaryBrush}"
									Style="{ThemeResource CaptionTextBlockStyle}"
									Text="{x:Bind FileSize, Mode=OneWay}"
									TextTrimming="CharacterEllipsis"
									TextWrapping="NoWrap" />

								<Grid MinHeight="16">
									<!--  Item Tags  -->
									<ItemsRepeater
										x:Name="TagsRepeater"
										HorizontalAlignment="Left"
										VerticalAlignment="Center"
										x:Load="{x:Bind HasTags, Mode=OneWay, FallbackValue=False}"
										ItemsSource="{x:Bind FileTagsUI, Mode=OneWay}"
										Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}">
										<ItemsRepeater.Layout>
											<StackLayout Orientation="Horizontal" Spacing="-4" />
										</ItemsRepeater.Layout>
										<ItemsRepeater.ItemTemplate>
											<DataTemplate x:DataType="datamodels:TagViewModel">
												<Border
													x:Name="Tag"
													x:Phase="2"
													ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
													<controls:ThemedIcon
														Width="12"
														Height="12"
														IconColorType="Custom"
														IsFilled="True"
														Style="{StaticResource App.ThemedIcons.Tag}"
														Color="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}" />
												</Border>
											</DataTemplate>
										</ItemsRepeater.ItemTemplate>
									</ItemsRepeater>

									<!--  Item Status  -->
									<Border
										x:Name="CloudDriveSyncStatusGlyph"
										HorizontalAlignment="Right"
										VerticalAlignment="Center"
										x:Phase="2"
										Background="Transparent"
										ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
										Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
										<controls:ThemedIcon
											Width="16"
											Height="16"
											Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
									</Border>
								</Grid>
							</StackPanel>
						</Grid>

					</StackPanel>

					<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>

		<!--  Regular List Container Style  -->
		<Style
			x:Name="LocalListItemContainerStyle"
			BasedOn="{StaticResource DefaultGridViewItemStyle}"
			TargetType="GridViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="HorizontalAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="1" />
			<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="{ThemeResource GridViewItemCornerRadius}"
							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="Transparent"
							PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
							PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
							ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
							SelectedBackground="{ThemeResource GridViewItemBackgroundSelected}"
							SelectedBorderBrush="Transparent"
							SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
							SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
							SelectedDisabledBorderBrush="Transparent"
							SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
							SelectedInnerBorderBrush="Transparent"
							SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
							SelectedPointerOverBorderBrush="Transparent"
							SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
							SelectedPressedBorderBrush="Transparent"
							SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" />
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<!--  Compact List Container Style  -->
		<Style
			x:Name="LocalCompactListItemContainerStyle"
			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" />
			<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="{ThemeResource GridViewItemCornerRadius}"
							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="Transparent"
							PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
							PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
							ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
							SelectedBackground="{ThemeResource GridViewItemBackgroundSelected}"
							SelectedBorderBrush="Transparent"
							SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
							SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
							SelectedDisabledBorderBrush="Transparent"
							SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
							SelectedInnerBorderBrush="Transparent"
							SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
							SelectedPointerOverBorderBrush="Transparent"
							SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
							SelectedPressedBorderBrush="Transparent"
							SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" />
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<!--  Regular Container Style  -->
		<Style
			x:Name="LocalRegularItemContainerStyle"
			BasedOn="{StaticResource DefaultGridViewItemStyle}"
			TargetType="GridViewItem">
			<Setter Property="Background" Value="Transparent" />
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="HorizontalAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="1" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="GridViewItem">
						<ListViewItemPresenter
							x:Name="Root"
							HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
							VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
							CheckMode="{ThemeResource GridViewItemCheckMode}"
							ContentMargin="{TemplateBinding Padding}"
							ContentTransitions="{TemplateBinding ContentTransitions}"
							Control.IsTemplateFocusTarget="True"
							CornerRadius="8"
							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 App.Theme.CardBackgroundFillColorTertiaryBrush}"
							PointerOverBorderBrush="{ThemeResource GridViewItemPointerOverBorderBrush}"
							PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
							PressedBackground="{ThemeResource App.Theme.CardBackgroundFillColorTertiaryBrush}"
							ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
							SelectedBackground="{ThemeResource CardBackgroundFillColorDefaultBrush}"
							SelectedBorderBrush="{ThemeResource GridViewItemSelectedBorderBrush}"
							SelectedBorderThickness="{ThemeResource GridViewItemSelectedBorderThickness}"
							SelectedDisabledBackground="{ThemeResource GridViewItemBackgroundSelectedDisabled}"
							SelectedDisabledBorderBrush="{ThemeResource GridViewItemSelectedDisabledBorderBrush}"
							SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
							SelectedInnerBorderBrush="{ThemeResource GridViewItemSelectedInnerBorderBrush}"
							SelectedPointerOverBackground="{ThemeResource App.Theme.CardBackgroundFillColorTertiaryBrush}"
							SelectedPointerOverBorderBrush="{ThemeResource GridViewItemSelectedPointerOverBorderBrush}"
							SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
							SelectedPressedBorderBrush="{ThemeResource GridViewItemSelectedPressedBorderBrush}" />
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</local:BaseGroupableLayoutPage.Resources>

	<Grid x:Name="RootGrid" ContextFlyout="{x:Bind BaseContextMenuFlyout}">

		<!--  Empty Indicator  -->
		<uc:FolderEmptyIndicator
			Margin="0,125,0,0"
			HorizontalAlignment="Center"
			VerticalAlignment="Top"
			Canvas.ZIndex="0"
			EmptyTextType="{x:Bind ParentShellPageInstance.ShellViewModel.EmptyTextType, Mode=OneWay}" />

		<!--  Location Unavailable Indicator  -->
		<uc:LocationUnavailableIndicator
			Title="{x:Bind ParentShellPageInstance.ShellViewModel.LocationUnavailableTitle, Mode=OneWay}"
			MaxWidth="400"
			Margin="24,125,24,0"
			HorizontalAlignment="Center"
			VerticalAlignment="Top"
			Canvas.ZIndex="0"
			Glyph="{x:Bind ParentShellPageInstance.ShellViewModel.LocationUnavailableGlyph, Mode=OneWay}"
			Message="{x:Bind ParentShellPageInstance.ShellViewModel.LocationUnavailableMessage, Mode=OneWay}"
			Visibility="{x:Bind ParentShellPageInstance.ShellViewModel.IsLocationUnavailable, 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"
			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"
					ext:ScrollViewerMiddleClickExtensions.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"
					DragItemsCompleted="FileList_DragItemsCompleted"
					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"
										VerticalAlignment="Bottom"
										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>