Move horizontal TabView outside of PaneHolderPage

Files/App.xaml.cs

@@ -44,9 +44,7 @@ sealed partial class App : Application
 
         public static SemaphoreSlim SemaphoreSlim = new SemaphoreSlim(1, 1);
         public static StorageHistoryWrapper HistoryWrapper = new StorageHistoryWrapper();
-
         public static IBundlesSettings BundlesSettings = new BundlesSettingsViewModel();
-
         public static SettingsViewModel AppSettings { get; private set; }
         public static InteractionViewModel InteractionViewModel { get; private set; }
         public static JumpListManager JumpList { get; } = new JumpListManager();

Files/Converters/NavigationViewCompactConverter.cs

@@ -13,7 +13,7 @@ public object Convert(object value, Type targetType, object parameter, string la
 
         public object ConvertBack(object value, Type targetType, object parameter, string language)
         {
-            throw new NotImplementedException();
+            return (value as NavigationViewPaneDisplayMode?) == NavigationViewPaneDisplayMode.LeftCompact;
         }
     }
 }

Files/Files.csproj

@@ -285,6 +285,7 @@
     <Compile Include="UserControls\Widgets\Bundles.xaml.cs">
       <DependentUpon>Bundles.xaml</DependentUpon>
     </Compile>
+    <Compile Include="ViewModels\AdaptiveSidebarViewModel.cs" />
     <Compile Include="ViewModels\BaseJsonSettingsViewModel.cs" />
     <Compile Include="ViewModels\Bundles\BundleContainerViewModel.cs" />
     <Compile Include="ViewModels\Bundles\BundleItemViewModel.cs" />

Files/UserControls/MultitaskingControl/HorizontalMultitaskingControl.xaml

@@ -2,9 +2,6 @@
     x:Class="Files.UserControls.MultitaskingControl.HorizontalMultitaskingControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:Windows10version1903="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
-    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
-    xmlns:converters="using:Files.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Files.UserControls.MultitaskingControl"
     xmlns:local1="using:Files"
@@ -182,7 +179,9 @@
                             <Setter.Value>
                                 <TransitionCollection>
                                     <AddDeleteThemeTransition />
+                                    <ContentThemeTransition />
                                     <ReorderThemeTransition />
+                                    <EntranceThemeTransition IsStaggeringEnabled="False" />
                                 </TransitionCollection>
                             </Setter.Value>
                         </Setter>
@@ -360,7 +359,7 @@
                     </Style>
 
                     <Style x:Key="UndockedTabViewItemStyle" TargetType="muxc:TabViewItem">
-                        <Setter Property="HorizontalContentAlignment" Value="Left" />
+                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                         <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                         <Setter Property="Template">
                             <Setter.Value>
@@ -819,6 +818,7 @@
                         ContextFlyout="{StaticResource TabFlyout}"
                         CornerRadius="4"
                         Height="36"
+                        HorizontalAlignment="Stretch"
                         DragEnter="TabViewItem_DragEnter"
                         DragLeave="TabViewItem_DragLeave"
                         Drop="TabViewItem_Drop"

Files/UserControls/SidebarControl.xaml.cs

@@ -56,15 +56,27 @@ public sealed partial class SidebarControl : UserControl, INotifyPropertyChanged
         public bool IsOpen
         {
             get => (bool)GetValue(IsOpenProperty);
-            set => SetValue(IsOpenProperty, value);
+            set 
+            {
+                if (this.IsLoaded)
+                {
+                    SetValue(IsOpenProperty, value);
+                }
+            }
         }
 
         public static readonly DependencyProperty IsCompactProperty = DependencyProperty.Register(nameof(IsCompact), typeof(bool), typeof(SidebarControl), new PropertyMetadata(false));
 
         public bool IsCompact
         {
             get => (bool)GetValue(IsCompactProperty);
-            set => SetValue(IsCompactProperty, value);
+            set 
+            { 
+                if(this.IsLoaded)
+                {
+                    SetValue(IsCompactProperty, value);
+                }
+            }
         }
 
         public static readonly DependencyProperty EmptyRecycleBinCommandProperty = DependencyProperty.Register(nameof(EmptyRecycleBinCommand), typeof(ICommand), typeof(SidebarControl), new PropertyMetadata(null));
@@ -217,6 +229,18 @@ public void UnpinItem_Click(object sender, RoutedEventArgs e)
             }
         }
 
+        public static GridLength GetSidebarCompactSize()
+        {
+            if (App.Current.Resources.TryGetValue("NavigationViewCompactPaneLength", out object paneLength))
+            {
+                if (paneLength is double paneLengthDouble)
+                {
+                    return new GridLength(paneLengthDouble);
+                }
+            }
+            return new GridLength(200);
+        }
+
         private void Sidebar_ItemInvoked(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewItemInvokedEventArgs args)
         {
             if (args.InvokedItem == null || args.InvokedItemContainer == null)

Files/ViewModels/AdaptiveSidebarViewModel.cs

@@ -0,0 +1,127 @@
+using Files.UserControls;
+using Files.Views;
+using Microsoft.Toolkit.Mvvm.ComponentModel;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Runtime.CompilerServices;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.UI.Core;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Files.ViewModels
+{
+    public class AdaptiveSidebarViewModel : ObservableObject, IDisposable
+    {
+        public static readonly GridLength CompactSidebarWidth = SidebarControl.GetSidebarCompactSize();
+        public event EventHandler<WindowCompactStateChangedEventArgs> WindowCompactStateChanged;
+        private bool isWindowCompactSize;
+
+        public bool IsWindowCompactSize
+        {
+            get => isWindowCompactSize;
+            set
+            {
+                if (isWindowCompactSize != value)
+                {
+                    isWindowCompactSize = value;
+                    WindowCompactStateChanged?.Invoke(this, new WindowCompactStateChangedEventArgs(isWindowCompactSize));
+
+                    OnPropertyChanged(nameof(IsWindowCompactSize));
+                    OnPropertyChanged(nameof(SidebarWidth));
+                    OnPropertyChanged(nameof(IsSidebarOpen));
+                }
+            }
+        }
+
+        public GridLength SidebarWidth
+        {
+            get => IsWindowCompactSize || !IsSidebarOpen ? CompactSidebarWidth : App.AppSettings.SidebarWidth;
+            set
+            {
+                if (IsWindowCompactSize || !IsSidebarOpen)
+                {
+                    return;
+                }
+                if (App.AppSettings.SidebarWidth != value)
+                {
+                    App.AppSettings.SidebarWidth = value;
+                    OnPropertyChanged(nameof(SidebarWidth));
+                }
+            }
+        }
+
+        public bool IsSidebarOpen
+        {
+            get => !IsWindowCompactSize && App.AppSettings.IsSidebarOpen;
+            set
+            {
+                if (IsWindowCompactSize)
+                {
+                    return;
+                }
+                if (App.AppSettings.IsSidebarOpen != value)
+                {
+                    App.AppSettings.IsSidebarOpen = value;
+                    OnPropertyChanged(nameof(SidebarWidth));
+                    OnPropertyChanged(nameof(IsSidebarOpen));
+                }
+            }
+        }
+
+        public AdaptiveSidebarViewModel()
+        {
+            Window.Current.SizeChanged += Current_SizeChanged;
+            App.AppSettings.PropertyChanged += AppSettings_PropertyChanged;
+            Current_SizeChanged(null, null);
+        }
+
+        private void AppSettings_PropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            switch (e.PropertyName)
+            {
+                case nameof(App.AppSettings.SidebarWidth):
+                    OnPropertyChanged(nameof(SidebarWidth));
+                    break;
+
+                case nameof(App.AppSettings.IsSidebarOpen):
+                    if (App.AppSettings.IsSidebarOpen != IsSidebarOpen)
+                    {
+                        OnPropertyChanged(nameof(IsSidebarOpen));
+                    }
+                    break;
+            }
+        }
+
+        private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
+        {
+            if ((Window.Current.Content as Frame).CurrentSourcePageType != typeof(Settings))
+            {
+                if (IsWindowCompactSize != Window.Current.Bounds.Width <= 750)
+                {
+                    IsWindowCompactSize = Window.Current.Bounds.Width <= 750;
+                }
+            }
+        }
+
+
+        public void Dispose()
+        {
+            Window.Current.SizeChanged -= Current_SizeChanged;
+            App.AppSettings.PropertyChanged -= AppSettings_PropertyChanged;
+        }
+    }
+
+    public class WindowCompactStateChangedEventArgs
+    {
+        public bool IsWindowCompact { get; set; }
+
+        public WindowCompactStateChangedEventArgs(bool isCompact)
+        {
+            IsWindowCompact = isCompact;
+        }
+    }
+}

Files/Views/MainPage.xaml

@@ -5,12 +5,20 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:i="using:Microsoft.Xaml.Interactivity"
-    xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:icore="using:Microsoft.Xaml.Interactions.Core" 
+    xmlns:converters="using:Files.Converters" 
+    xmlns:usercontrols="using:Files.UserControls.MultitaskingControl" 
+    xmlns:local1="using:Files" xmlns:viewmodels="using:Files.ViewModels"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     KeyboardAcceleratorPlacementMode="Hidden"
     NavigationCacheMode="Required"
     mc:Ignorable="d">
-
+    <Page.DataContext>
+        <viewmodels:MainPageViewModel/>
+    </Page.DataContext>
+    <Page.Resources>
+        <converters:WidthToRightMargin x:Key="WidthToRightMarginConverter" />
+    </Page.Resources>
     <Page.KeyboardAccelerators>
         <KeyboardAccelerator
             Key="Number1"
@@ -141,6 +149,31 @@
     </Page.KeyboardAccelerators>
 
     <Grid TabFocusNavigation="Cycle">
-        <ContentPresenter Content="{x:Bind ViewModel.SelectedTabItem.Control, Mode=OneWay}" />
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition
+                x:Name="SidebarColumn"
+                Width="{x:Bind SidebarAdaptiveViewModel.SidebarWidth, Mode=OneWay}" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+        <Grid
+            x:Name="DragArea"
+            Margin="38,0,0,0"
+            Grid.ColumnSpan="2"
+            Canvas.ZIndex="3"
+            Height="40"
+            VerticalAlignment="Top"
+            HorizontalAlignment="Stretch"
+            Background="Transparent"
+            Loaded="DragArea_Loaded" />
+        <Grid x:Name="RightMarginGrid" Padding="2,0,0,0"
+            Canvas.ZIndex="4" VerticalAlignment="Top" Grid.Column="1">
+            <usercontrols:HorizontalMultitaskingControl
+                    x:Name="horizontalMultitaskingControl"
+                    x:FieldModifier="public"
+                    Height="50"
+                    x:Load="{x:Bind converters:MultiBooleanConverter.OrConvert(AppSettings.IsHorizontalTabStripOn, local1:App.InteractionViewModel.IsHorizontalTabStripVisible), Mode=OneWay}"
+                    Loaded="HorizontalMultitaskingControl_Loaded" />
+        </Grid>
+        <ContentPresenter Grid.ColumnSpan="2" Content="{x:Bind ((viewmodels:MainPageViewModel)DataContext).SelectedTabItem.Control, Mode=OneWay}" />
     </Grid>
 </Page>

Files/Views/MainPage.xaml.cs

@@ -1,4 +1,5 @@
-using Files.ViewModels;
+using Files.UserControls.MultitaskingControl;
+using Files.ViewModels;
 using Windows.ApplicationModel.Core;
 using Windows.ApplicationModel.Resources.Core;
 using Windows.UI.ViewManagement;
@@ -13,22 +14,23 @@ namespace Files.Views
     /// </summary>
     public sealed partial class MainPage : Page
     {
+        public SettingsViewModel AppSettings => App.AppSettings;
+
         public MainPageViewModel ViewModel
         {
             get => (MainPageViewModel)DataContext;
             set => DataContext = value;
         }
 
+        public AdaptiveSidebarViewModel SidebarAdaptiveViewModel = new AdaptiveSidebarViewModel();
         public MainPage()
         {
             this.InitializeComponent();
 
-            this.ViewModel = new MainPageViewModel();
-
             ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.Auto;
             var CoreTitleBar = CoreApplication.GetCurrentView().TitleBar;
             CoreTitleBar.ExtendViewIntoTitleBar = true;
-
+            CoreTitleBar.LayoutMetricsChanged += TitleBar_LayoutMetricsChanged;
             var flowDirectionSetting = ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
 
             if (flowDirectionSetting == "RTL")
@@ -38,6 +40,24 @@ public MainPage()
             AllowDrop = true;
         }
 
+        private void TitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
+        {
+            RightMarginGrid.Margin = new Thickness(0, 0, sender.SystemOverlayRightInset, 0);
+        }
+
+        private void DragArea_Loaded(object sender, RoutedEventArgs e)
+        {
+            Window.Current.SetTitleBar(sender as Grid);
+        }
+
+        private void HorizontalMultitaskingControl_Loaded(object sender, RoutedEventArgs e)
+        {
+            if (!(MainPageViewModel.MultitaskingControl is HorizontalMultitaskingControl))
+            {
+                MainPageViewModel.MultitaskingControl = horizontalMultitaskingControl;
+            }
+        }
+
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
             ViewModel.OnNavigatedTo(e);