Feature: Added a List View layout

src/Files.App/Actions/Display/LayoutAction.cs

@@ -20,6 +20,24 @@ public override RichGlyph Glyph
 		public override HotKey HotKey
 			=> new(Keys.Number1, KeyModifiers.CtrlShift);
 	}
+
+	internal class LayoutListAction : ToggleLayoutAction
+	{
+		protected override LayoutTypes LayoutType
+			=> LayoutTypes.List;
+
+		public override string Label
+			=> "List".GetLocalizedResource();
+
+		public override string Description
+			=> "LayoutListDescription".GetLocalizedResource();
+
+		public override RichGlyph Glyph
+			=> new(opacityStyle: "ColorIconListLayout");
+
+		public override HotKey HotKey
+			=> new(Keys.Number2, KeyModifiers.CtrlShift);
+	}
 
 	internal class LayoutTilesAction : ToggleLayoutAction
 	{
@@ -36,7 +54,7 @@ public override RichGlyph Glyph
 			=> new(opacityStyle: "ColorIconTilesLayout");
 
 		public override HotKey HotKey
-			=> new(Keys.Number2, KeyModifiers.CtrlShift);
+			=> new(Keys.Number3, KeyModifiers.CtrlShift);
 	}
 
 	internal class LayoutGridSmallAction : ToggleLayoutAction
@@ -54,7 +72,7 @@ public override RichGlyph Glyph
 			=> new(opacityStyle: "ColorIconGridSmallLayout");
 
 		public override HotKey HotKey
-			=> new(Keys.Number3, KeyModifiers.CtrlShift);
+			=> new(Keys.Number4, KeyModifiers.CtrlShift);
 	}
 
 	internal class LayoutGridMediumAction : ToggleLayoutAction
@@ -72,7 +90,7 @@ public override RichGlyph Glyph
 			=> new(opacityStyle: "ColorIconGridMediumLayout");
 
 		public override HotKey HotKey
-			=> new(Keys.Number4, KeyModifiers.CtrlShift);
+			=> new(Keys.Number5, KeyModifiers.CtrlShift);
 	}
 
 	internal class LayoutGridLargeAction : ToggleLayoutAction
@@ -90,7 +108,7 @@ public override RichGlyph Glyph
 			=> new(opacityStyle: "ColorIconGridLargeLayout");
 
 		public override HotKey HotKey
-			=> new(Keys.Number5, KeyModifiers.CtrlShift);
+			=> new(Keys.Number6, KeyModifiers.CtrlShift);
 	}
 
 	internal class LayoutColumnsAction : ToggleLayoutAction
@@ -108,7 +126,7 @@ public override RichGlyph Glyph
 			=> new(opacityStyle: "ColorIconColumnsLayout");
 
 		public override HotKey HotKey
-			=> new(Keys.Number6, KeyModifiers.CtrlShift);
+			=> new(Keys.Number7, KeyModifiers.CtrlShift);
 	}
 
 	internal class LayoutAdaptiveAction : ToggleLayoutAction
@@ -129,7 +147,7 @@ public override RichGlyph Glyph
 			=> new("\uF576");
 
 		public override HotKey HotKey
-			=> new(Keys.Number7, KeyModifiers.CtrlShift);
+			=> new(Keys.Number8, KeyModifiers.CtrlShift);
 
 		protected override void OnContextChanged(string propertyName)
 		{

src/Files.App/Data/Commands/CommandCodes.cs

@@ -111,6 +111,7 @@ public enum CommandCodes
 		LayoutDecreaseSize,
 		LayoutIncreaseSize,
 		LayoutDetails,
+		LayoutList,
 		LayoutTiles,
 		LayoutGridSmall,
 		LayoutGridMedium,

src/Files.App/Data/Commands/Manager/CommandManager.cs

@@ -111,6 +111,7 @@ public IRichCommand this[HotKey hotKey]
 		public IRichCommand LayoutDecreaseSize => commands[CommandCodes.LayoutDecreaseSize];
 		public IRichCommand LayoutIncreaseSize => commands[CommandCodes.LayoutIncreaseSize];
 		public IRichCommand LayoutDetails => commands[CommandCodes.LayoutDetails];
+		public IRichCommand LayoutList => commands[CommandCodes.LayoutList];
 		public IRichCommand LayoutTiles => commands[CommandCodes.LayoutTiles];
 		public IRichCommand LayoutGridSmall => commands[CommandCodes.LayoutGridSmall];
 		public IRichCommand LayoutGridMedium => commands[CommandCodes.LayoutGridMedium];
@@ -281,6 +282,7 @@ public CommandManager()
 			[CommandCodes.LayoutDecreaseSize] = new LayoutDecreaseSizeAction(),
 			[CommandCodes.LayoutIncreaseSize] = new LayoutIncreaseSizeAction(),
 			[CommandCodes.LayoutDetails] = new LayoutDetailsAction(),
+			[CommandCodes.LayoutList] = new LayoutListAction(),
 			[CommandCodes.LayoutTiles] = new LayoutTilesAction(),
 			[CommandCodes.LayoutGridSmall] = new LayoutGridSmallAction(),
 			[CommandCodes.LayoutGridMedium] = new LayoutGridMediumAction(),

src/Files.App/Data/Commands/Manager/ICommandManager.cs

@@ -97,6 +97,7 @@ public interface ICommandManager : IEnumerable<IRichCommand>
 		IRichCommand LayoutDecreaseSize { get; }
 		IRichCommand LayoutIncreaseSize { get; }
 		IRichCommand LayoutDetails { get; }
+		IRichCommand LayoutList { get; }
 		IRichCommand LayoutTiles { get; }
 		IRichCommand LayoutGridSmall { get; }
 		IRichCommand LayoutGridMedium { get; }

src/Files.App/Data/Contexts/DisplayPage/DisplayPageContext.cs

@@ -27,6 +27,9 @@ public LayoutTypes LayoutType
 					case LayoutTypes.Details:
 						viewModel.ToggleLayoutModeDetailsView(true);
 						break;
+					case LayoutTypes.List:
+						viewModel.ToggleLayoutModeList(true);
+						break;
 					case LayoutTypes.Tiles:
 						viewModel.ToggleLayoutModeTiles(true);
 						break;
@@ -245,6 +248,7 @@ private LayoutTypes GetLayoutType()
 			return viewModel.LayoutMode switch
 			{
 				FolderLayoutModes.DetailsView => LayoutTypes.Details,
+				FolderLayoutModes.ListView => LayoutTypes.List,
 				FolderLayoutModes.TilesView => LayoutTypes.Tiles,
 				FolderLayoutModes.GridView => viewModel.GridViewSizeKind switch
 				{

src/Files.App/Data/Contexts/DisplayPage/LayoutTypes.cs

@@ -7,6 +7,7 @@ public enum LayoutTypes : ushort
 	{
 		None,
 		Details,
+		List,
 		Tiles,
 		GridSmall,
 		GridMedium,

src/Files.App/Helpers/Layout/LayoutPreferencesManager.cs

@@ -48,14 +48,21 @@ public int GridViewSize
 				// Size down
 				if (value < LayoutPreferencesItem.GridViewSize)
 				{
-					// Size down from tiles to list
-					if (LayoutMode == FolderLayoutModes.TilesView)
+					// Size down from List to Details
+					if (LayoutMode == FolderLayoutModes.ListView)
 					{
 						LayoutPreferencesItem.IsAdaptiveLayoutOverridden = true;
 						LayoutMode = FolderLayoutModes.DetailsView;
 						LayoutModeChangeRequested?.Invoke(this, new LayoutModeEventArgs(LayoutMode, GridViewSize));
 					}
-					// Size down from grid to tiles
+					// Size down from Tiles to List
+					else if (LayoutMode == FolderLayoutModes.TilesView)
+					{
+						LayoutPreferencesItem.IsAdaptiveLayoutOverridden = true;
+						LayoutMode = FolderLayoutModes.ListView;
+						LayoutModeChangeRequested?.Invoke(this, new LayoutModeEventArgs(LayoutMode, GridViewSize));
+					}
+					// Size down from Grid to Tiles
 					else if (LayoutMode == FolderLayoutModes.GridView && value < Constants.Browser.GridViewBrowser.GridViewSizeSmall)
 					{
 						LayoutPreferencesItem.IsAdaptiveLayoutOverridden = true;
@@ -87,14 +94,21 @@ public int GridViewSize
 				// Size up
 				else if (value > LayoutPreferencesItem.GridViewSize)
 				{
-					// Size up from list to tiles
+					// Size up from Details to List
 					if (LayoutMode == FolderLayoutModes.DetailsView)
+					{
+						LayoutPreferencesItem.IsAdaptiveLayoutOverridden = true;
+						LayoutMode = FolderLayoutModes.ListView;
+						LayoutModeChangeRequested?.Invoke(this, new LayoutModeEventArgs(LayoutMode, GridViewSize));
+					}
+					// Size up from List to Tiles
+					else if (LayoutMode == FolderLayoutModes.ListView)
 					{
 						LayoutPreferencesItem.IsAdaptiveLayoutOverridden = true;
 						LayoutMode = FolderLayoutModes.TilesView;
 						LayoutModeChangeRequested?.Invoke(this, new LayoutModeEventArgs(LayoutMode, GridViewSize));
 					}
-					else // Size up from tiles to grid
+					else // Size up from Tiles to Grid
 					{
 						// Set grid size to allow immediate UI update
 						var newValue = (LayoutMode == FolderLayoutModes.TilesView) ? Constants.Browser.GridViewBrowser.GridViewSizeSmall : (value <= Constants.Browser.GridViewBrowser.GridViewSizeLarge) ? value : Constants.Browser.GridViewBrowser.GridViewSizeLarge;
@@ -309,6 +323,8 @@ public uint GetIconSize()
 			{
 				FolderLayoutModes.DetailsView
 					=> Constants.DefaultIconSizes.Large,
+				FolderLayoutModes.ListView
+					=> Constants.DefaultIconSizes.Large,
 				FolderLayoutModes.ColumnView
 					=> Constants.DefaultIconSizes.Large,
 				FolderLayoutModes.TilesView
@@ -338,6 +354,7 @@ public Type GetLayoutType(string path, bool changeLayoutMode = true)
 			return (preferencesItem.LayoutMode) switch
 			{
 				FolderLayoutModes.DetailsView => typeof(DetailsLayoutPage),
+				FolderLayoutModes.ListView => typeof(GridLayoutPage),
 				FolderLayoutModes.TilesView => typeof(GridLayoutPage),
 				FolderLayoutModes.GridView => typeof(GridLayoutPage),
 				FolderLayoutModes.ColumnView => typeof(ColumnsLayoutPage),
@@ -414,6 +431,16 @@ public void ToggleLayoutModeTiles(bool manuallySet)
 
 			LayoutModeChangeRequested?.Invoke(this, new LayoutModeEventArgs(FolderLayoutModes.TilesView, GridViewSize));
 		}
+
+		public void ToggleLayoutModeList(bool manuallySet)
+		{
+			IsAdaptiveLayoutEnabled &= !manuallySet;
+
+			// List View
+			LayoutMode = FolderLayoutModes.ListView;
+
+			LayoutModeChangeRequested?.Invoke(this, new LayoutModeEventArgs(FolderLayoutModes.ListView, GridViewSize));
+		}
 
 		public void ToggleLayoutModeDetailsView(bool manuallySet)
 		{

src/Files.App/Helpers/MenuFlyout/ContextFlyoutItemHelper.cs

@@ -114,6 +114,10 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(
 						{
 							IsToggle = true
 						}.Build(),
+						new ContextMenuFlyoutItemViewModelBuilder(commands.LayoutList)
+						{
+							IsToggle = true
+						}.Build(),
 						new ContextMenuFlyoutItemViewModelBuilder(commands.LayoutGridSmall)
 						{
 							IsToggle = true

src/Files.App/ResourceDictionaries/PathIcons.xaml

@@ -1747,6 +1747,60 @@
 				</Setter>
 			</Style>
 
+			<Style x:Key="ColorIconListLayout" TargetType="local:OpacityIcon">
+				<Setter Property="Template">
+					<Setter.Value>
+						<ControlTemplate>
+							<Viewbox Stretch="Fill">
+								<Grid>
+									<Path
+										x:Name="Path1"
+										Data="M5.25 4C4.55964 4 4 4.55964 4 5.25V9.75C4 10.4404 4.55964 11 5.25 11H9.75C10.4404 11 11 10.4404 11 9.75V5.25C11 4.55964 10.4404 4 9.75 4H5.25Z"
+										Fill="{ThemeResource Local.IconAltBrush}" />
+									<Path
+										x:Name="Path2"
+										Data="M5.25 17C4.55964 17 4 17.5596 4 18.25V22.75C4 23.4404 4.55964 24 5.25 24H9.75C10.4404 24 11 23.4404 11 22.75V18.25C11 17.5596 10.4404 17 9.75 17H5.25Z"
+										Fill="{ThemeResource Local.IconAltBrush}" />
+									<Path
+										x:Name="Path3"
+										Data="M9.75 16C10.9926 16 12 17.0074 12 18.25V22.75C12 23.9926 10.9926 25 9.75 25H5.25C4.00736 25 3 23.9926 3 22.75V18.25C3 17.0074 4.00736 16 5.25 16H9.75ZM9.75 17.5H5.25C4.83579 17.5 4.5 17.8358 4.5 18.25V22.75C4.5 23.1642 4.83579 23.5 5.25 23.5H9.75C10.1642 23.5 10.5 23.1642 10.5 22.75V18.25C10.5 17.8358 10.1642 17.5 9.75 17.5Z"
+										Fill="{ThemeResource Local.IconBaseBrush}" />
+									<Path
+										x:Name="Path4"
+										Data="M9.75 3C10.9926 3 12 4.00736 12 5.25V9.75C12 10.9926 10.9926 12 9.75 12H5.25C4.00736 12 3 10.9926 3 9.75V5.25C3 4.00736 4.00736 3 5.25 3H9.75ZM9.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V9.75C4.5 10.1642 4.83579 10.5 5.25 10.5H9.75C10.1642 10.5 10.5 10.1642 10.5 9.75V5.25C10.5 4.83579 10.1642 4.5 9.75 4.5Z"
+										Fill="{ThemeResource Local.IconBaseBrush}" />
+									<Path
+										x:Name="Path5"
+										Data="M14 7.25C14 6.83579 14.3358 6.5 14.75 6.5H24.25C24.6642 6.5 25 6.83579 25 7.25C25 7.66421 24.6642 8 24.25 8H14.75C14.3358 8 14 7.66421 14 7.25Z"
+										Fill="{ThemeResource Local.IconBaseBrush}" />
+									<Path
+										x:Name="Path6"
+										Data="M14.75 19.5C14.3358 19.5 14 19.8358 14 20.25C14 20.6642 14.3358 21 14.75 21H24.25C24.6642 21 25 20.6642 25 20.25C25 19.8358 24.6642 19.5 24.25 19.5H14.75Z"
+										Fill="{ThemeResource Local.IconBaseBrush}" />
+								</Grid>
+
+								<VisualStateManager.VisualStateGroups>
+									<VisualStateGroup>
+										<VisualState x:Name="Normal" />
+										<VisualState x:Name="Disabled" />
+										<VisualState x:Name="Selected">
+											<VisualState.Setters>
+												<Setter Target="Path1.Fill" Value="Transparent" />
+												<Setter Target="Path2.Fill" Value="Transparent" />
+												<Setter Target="Path3.Fill" Value="{ThemeResource Local.AccentContrastFillColorBrush}" />
+												<Setter Target="Path4.Fill" Value="{ThemeResource Local.AccentContrastFillColorBrush}" />
+												<Setter Target="Path5.Fill" Value="{ThemeResource Local.AccentContrastFillColorBrush}" />
+												<Setter Target="Path6.Fill" Value="{ThemeResource Local.AccentContrastFillColorBrush}" />
+											</VisualState.Setters>
+										</VisualState>
+									</VisualStateGroup>
+								</VisualStateManager.VisualStateGroups>
+							</Viewbox>
+						</ControlTemplate>
+					</Setter.Value>
+				</Setter>
+			</Style>
+
 			<Style x:Key="ColorIconTilesLayout" TargetType="local:OpacityIcon">
 				<Setter Property="Template">
 					<Setter.Value>

src/Files.App/Strings/en-US/Resources.resw

@@ -2568,6 +2568,12 @@
   <data name="LayoutTilesDescription" xml:space="preserve">
     <value>Switch to tiles view</value>
   </data>
+  <data name="LayoutListDescription" xml:space="preserve">
+    <value>Switch to list view</value>
+  </data>
+  <data name="List" xml:space="preserve">
+    <value>List</value>
+  </data>
   <data name="LayoutGridSmallDescription" xml:space="preserve">
     <value>Switch to grid view with small icons</value>
   </data>

src/Files.App/UserControls/InnerNavigationToolbar.xaml

@@ -625,6 +625,7 @@
 									<RowDefinition MinHeight="30" />
 									<RowDefinition MinHeight="30" />
 									<RowDefinition MinHeight="30" />
+									<RowDefinition MinHeight="30" />
 								</Grid.RowDefinitions>
 								<Grid.ColumnDefinitions>
 									<ColumnDefinition Width="40" />
@@ -634,7 +635,7 @@
 									<ColumnDefinition MaxWidth="100" />
 								</Grid.ColumnDefinitions>
 
-								<!--  Detailsl Layout  -->
+								<!--  Details Layout  -->
 								<RadioButton
 									Grid.Row="0"
 									Grid.Column="0"
@@ -730,6 +731,38 @@
 									Tapped="{x:Bind Commands.LayoutTiles.ExecuteTapped}"
 									Text="{x:Bind Commands.LayoutTiles.Label}" />
 
+								<!--  List Layout  -->
+								<RadioButton
+									Grid.Row="3"
+									Grid.Column="0"
+									Width="36"
+									Height="32"
+									MinWidth="0"
+									Padding="0"
+									HorizontalContentAlignment="Center"
+									VerticalContentAlignment="Center"
+									AutomationProperties.Name="{x:Bind Commands.LayoutList.AutomationName}"
+									Command="{x:Bind Commands.LayoutList}"
+									CornerRadius="{StaticResource ControlCornerRadius}"
+									GroupName="LayoutRadio"
+									IsChecked="{x:Bind ViewModel.IsListLayout, Mode=OneWay}"
+									Style="{StaticResource DefaultToggleButtonStyle}"
+									ToolTipService.ToolTip="{x:Bind Commands.LayoutList.LabelWithHotKey, Mode=OneWay}">
+									<local:OpacityIcon
+										Width="16"
+										Height="16"
+										IsSelected="{x:Bind ViewModel.IsListLayout, Mode=OneWay}"
+										Style="{x:Bind Commands.LayoutList.OpacityStyle}" />
+								</RadioButton>
+
+								<TextBlock
+									x:Name="NavToolbarListHeader"
+									Grid.Row="3"
+									Grid.Column="1"
+									VerticalAlignment="Center"
+									Tapped="{x:Bind Commands.LayoutList.ExecuteTapped}"
+									Text="{x:Bind Commands.LayoutList.Label}" />
+
 								<!--  Grid Small Layout  -->
 								<RadioButton
 									Grid.Row="0"
@@ -798,7 +831,7 @@
 								<Border
 									Grid.RowSpan="4"
 									Grid.Column="2"
-									Height="120"
+									Height="140"
 									HorizontalAlignment="Center"
 									VerticalAlignment="Center"
 									BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"

src/Files.App/ViewModels/UserControls/ToolbarViewModel.cs

@@ -953,6 +953,7 @@ private void FolderSettings_PropertyChanged(object? sender, PropertyChangedEvent
 				case nameof(LayoutPreferencesManager.LayoutMode):
 					LayoutOpacityIcon = instanceViewModel.FolderSettings.LayoutMode switch
 					{
+						FolderLayoutModes.ListView => Commands.LayoutList.OpacityStyle!,
 						FolderLayoutModes.TilesView => Commands.LayoutTiles.OpacityStyle!,
 						FolderLayoutModes.ColumnView => Commands.LayoutColumns.OpacityStyle!,
 						FolderLayoutModes.GridView =>
@@ -964,6 +965,7 @@ private void FolderSettings_PropertyChanged(object? sender, PropertyChangedEvent
 						_ => Commands.LayoutDetails.OpacityStyle!
 					};
 					OnPropertyChanged(nameof(IsTilesLayout));
+					OnPropertyChanged(nameof(IsListLayout));
 					OnPropertyChanged(nameof(IsColumnLayout));
 					OnPropertyChanged(nameof(IsGridSmallLayout));
 					OnPropertyChanged(nameof(IsGridMediumLayout));
@@ -1022,7 +1024,8 @@ public List<ListedItem> SelectedItems
 		public bool IsGridSmallLayout => instanceViewModel.FolderSettings.LayoutMode is FolderLayoutModes.GridView && instanceViewModel.FolderSettings.GridViewSize <= Constants.Browser.GridViewBrowser.GridViewSizeSmall;
 		public bool IsGridMediumLayout => instanceViewModel.FolderSettings.LayoutMode is FolderLayoutModes.GridView && !IsGridSmallLayout && instanceViewModel.FolderSettings.GridViewSize <= Constants.Browser.GridViewBrowser.GridViewSizeMedium;
 		public bool IsGridLargeLayout => instanceViewModel.FolderSettings.LayoutMode is FolderLayoutModes.GridView && !IsGridSmallLayout && !IsGridMediumLayout;
-		public bool IsDetailsLayout => !IsTilesLayout && !IsColumnLayout && !IsGridSmallLayout && !IsGridMediumLayout && !IsGridLargeLayout;
+		public bool IsDetailsLayout => !IsListLayout && !IsTilesLayout && !IsColumnLayout && !IsGridSmallLayout && !IsGridMediumLayout && !IsGridLargeLayout;
+		public bool IsListLayout => instanceViewModel.FolderSettings.LayoutMode is FolderLayoutModes.ListView;
 
 		public string ExtractToText
 			=> IsSelectionArchivesOnly ? SelectedItems.Count > 1 ? string.Format("ExtractToChildFolder".GetLocalizedResource(), $"*{Path.DirectorySeparatorChar}") : string.Format("ExtractToChildFolder".GetLocalizedResource() + "\\", Path.GetFileNameWithoutExtension(selectedItems.First().Name)) : "ExtractToChildFolder".GetLocalizedResource();