ColumnLayoutPage.xaml

<!--  Copyright (c) 2023 Files Community. Licensed under the MIT License. See the LICENSE.  -->
<local:BaseGroupableLayoutPage
	x:Class="Files.App.Views.Layouts.ColumnLayoutPage"
	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:local="using:Files.App.Views.Layouts"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:storage="using:Files.App.Utils.Storage"
	xmlns:uc="using:Files.App.UserControls"
	xmlns:wct="using:CommunityToolkit.WinUI.UI"
	xmlns:wctconverters="using:CommunityToolkit.WinUI.UI.Converters"
	x:Name="PageRoot"
	HighContrastAdjustment="None"
	mc:Ignorable="d">

	<local:BaseGroupableLayoutPage.Resources>

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

		<Style TargetType="ListViewHeaderItem">
			<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="ListViewHeaderItem">
						<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="CompactItemContainerStyle"
			BasedOn="{StaticResource DefaultListViewItemStyle}"
			TargetType="ListViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="1" />
			<Setter Property="Margin" Value="-2" />
			<Setter Property="Padding" Value="4,0" />
		</Style>

		<Style
			x:Name="RegularItemContainerStyle"
			BasedOn="{StaticResource DefaultListViewItemStyle}"
			TargetType="ListViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			<Setter Property="MinHeight" Value="1" />
			<Setter Property="Margin" Value="0" />
			<Setter Property="Padding" Value="4,0" />
		</Style>

	</local:BaseGroupableLayoutPage.Resources>

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

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

		<!--  Invalid Item Name Tip  -->
		<TeachingTip
			x:Name="FileNameTeachingTip"
			Grid.RowSpan="2"
			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>
				<ListView
					x:Name="FileList"
					wct:ScrollViewerExtensions.EnableMiddleClickScrolling="{x:Bind IsMiddleClickToScrollEnabled, Mode=OneWay}"
					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"
					DragItemsStarting="FileList_DragItemsStarting"
					DragOver="ItemsLayout_DragOver"
					Drop="ItemsLayout_Drop"
					FocusVisualPrimaryThickness="0"
					FocusVisualSecondaryThickness="0"
					Holding="FileList_Holding"
					IsDoubleTapEnabled="True"
					IsRightTapEnabled="True"
					IsTabStop="True"
					ItemsSource="{x:Bind CollectionViewSource.View, Mode=OneWay}"
					Loaded="FileList_Loaded"
					PreviewKeyDown="FileList_PreviewKeyDown"
					RightTapped="FileList_RightTapped"
					ScrollViewer.IsScrollInertiaEnabled="True"
					SelectionChanged="FileList_SelectionChanged"
					SelectionMode="Extended"
					Tapped="FileList_ItemTapped">

					<ListView.ItemContainerTransitions>
						<TransitionCollection>
							<AddDeleteThemeTransition />
						</TransitionCollection>
					</ListView.ItemContainerTransitions>

					<ListView.ItemTemplate>
						<DataTemplate x:DataType="filesystem:ListedItem">
							<Grid
								x:Name="FilesRootGrid"
								Height="{Binding RowHeight, 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="24" />
									<ColumnDefinition Width="*" />
									<ColumnDefinition Width="Auto" />
								</Grid.ColumnDefinitions>

								<!--  Thumbnail  -->
								<Grid
									Grid.Column="0"
									Width="24"
									Height="24"
									Opacity="{x:Bind Opacity, Mode=OneWay}"
									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"
										Visibility="{x:Bind IsShortcut}">
										<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
									</Border>
									<Image
										x:Name="ShieldOverlay"
										Width="8"
										Height="8"
										Margin="2"
										HorizontalAlignment="Right"
										VerticalAlignment="Bottom"
										x:Load="{x:Bind IsElevationRequired}"
										Source="{x:Bind ShieldIcon, Mode=OneWay}"
										Stretch="Uniform" />
								</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="Stretch"
									BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
									TextAlignment="Left"
									TextWrapping="Wrap"
									Visibility="Collapsed">
									<TextBox.Resources>
										<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
									</TextBox.Resources>
								</TextBox>

								<Grid Grid.Column="2">
									<StackPanel Orientation="Horizontal" Spacing="4">
										<!--  Cloud Status  -->
										<uc:OpacityIcon
											x:Name="CloudDriveSyncStatusGlyph"
											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}" />

										<!--  Tag  -->
										<Ellipse
											Width="12"
											Height="12"
											Margin="8,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}" />

										<!--  Open Folder Chevron  -->
										<FontIcon
											x:Name="OpenFolderChevron"
											HorizontalAlignment="Right"
											VerticalAlignment="Center"
											x:Load="{x:Bind IsFolder}"
											FontSize="12"
											Foreground="{ThemeResource TextFillColorSecondary}"
											Glyph="&#xE76C;" />

									</StackPanel>
								</Grid>

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

					<ListView.GroupStyle>
						<GroupStyle>
							<GroupStyle.HeaderTemplate>
								<DataTemplate x:DataType="storage:IGroupedCollectionHeader">
									<StackPanel
										Margin="0,0,0,4"
										VerticalAlignment="Top"
										AutomationProperties.Name="{x:Bind Model.Text}"
										Spacing="0">

										<StackPanel Orientation="Horizontal" Spacing="4">

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

											<TextBlock
												Margin="4,0,0,0"
												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
												VerticalAlignment="Center"
												FontSize="14"
												Style="{StaticResource SubheaderTextBlockStyle}"
												Text="{x:Bind Model.Subtext, Mode=OneWay}"
												Visibility="{x:Bind Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />

										</StackPanel>

										<TextBlock
											Margin="0,2,0,0"
											Style="{StaticResource App.Theme.BodyTextBlockStyle}"
											Text="{x:Bind Model.CountText, Mode=OneWay}"
											Visibility="{x:Bind Model.ShowCountTextBelow, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />

									</StackPanel>
								</DataTemplate>
							</GroupStyle.HeaderTemplate>
						</GroupStyle>
					</ListView.GroupStyle>

					<ListView.ItemsPanel>
						<ItemsPanelTemplate>
							<ItemsStackPanel AreStickyGroupHeadersEnabled="True" Orientation="Vertical" />
						</ItemsPanelTemplate>
					</ListView.ItemsPanel>

				</ListView>
			</SemanticZoom.ZoomedInView>

			<!--  Grouped View  -->
			<SemanticZoom.ZoomedOutView>
				<ListView
					HorizontalAlignment="Stretch"
					ItemsSource="{x:Bind CollectionViewSource.View.CollectionGroups, Mode=OneWay}"
					SelectionMode="None">
					<ListView.ItemTemplate>
						<DataTemplate x:DataType="ICollectionViewGroup">
							<StackPanel
								Margin="0,4,0,4"
								VerticalAlignment="Center"
								Orientation="Horizontal"
								Spacing="4">

								<!--  Group Image  -->
								<Image
									Height="36"
									Source="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.ImageSource, Mode=OneWay}"
									Stretch="Uniform" />

								<!--  Group Icon  -->
								<FontIcon FontSize="32" Glyph="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Icon, Mode=OneWay}" />

								<StackPanel
									VerticalAlignment="Center"
									AutomationProperties.Name="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Text, Mode=OneWay}"
									Orientation="Vertical">
									<StackPanel Orientation="Horizontal" Spacing="4">

										<!--  Header  -->
										<TextBlock
											VerticalAlignment="Center"
											FontSize="16"
											Style="{StaticResource SubtitleTextBlockStyle}"
											Text="{x:Bind ((storage:IGroupedCollectionHeader)Group).Model.Text, Mode=OneWay}" />

										<!--  Count  -->
										<TextBlock
											Margin="4,0,0,0"
											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}}" />

										<!--  Subheader  -->
										<TextBlock
											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}}" />

									</StackPanel>

									<TextBlock
										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}}" />

								</StackPanel>

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

		</SemanticZoom>

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

	</Grid>
</local:BaseGroupableLayoutPage>