Init

Wino.Mail.ViewModels/MailListPageViewModel.cs

@@ -120,6 +120,12 @@ namespace Wino.Mail.ViewModels
         [ObservableProperty]
         private string barMessage;
 
+        [ObservableProperty]
+        private double mailListLength = 300;
+
+        [ObservableProperty]
+        private double maxMailListLength = 1200;
+
         [ObservableProperty]
         private string barTitle;
 

Wino.Mail/Converters/GridLengthConverter.cs

@@ -0,0 +1,27 @@
+using System;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml;
+
+namespace Wino.Converters
+{
+    public class GridLengthConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            if (value is double doubleValue)
+            {
+                return new GridLength(doubleValue);
+            }
+            return new GridLength(1, GridUnitType.Auto);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            if (value is GridLength gridLength)
+            {
+                return gridLength.Value;
+            }
+            return 0.0;
+        }
+    }
+}

Wino.Mail/Styles/Converters.xaml

@@ -4,4 +4,5 @@
     xmlns:converters="using:Wino.Converters">
     <converters:ReverseBooleanToVisibilityConverter x:Key="ReverseBooleanToVisibilityConverter" />
     <converters:ReverseBooleanConverter x:Key="ReverseBooleanConverter" />
+    <converters:GridLengthConverter x:Key="GridLengthConverter" />
 </ResourceDictionary>

Wino.Mail/Views/MailListPage.xaml

@@ -6,6 +6,7 @@
     xmlns:collections="using:CommunityToolkit.Mvvm.Collections"
     xmlns:controls="using:Wino.Controls"
     xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
+    xmlns:converters="using:Wino.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:domain="using:Wino.Core.Domain"
     xmlns:enums="using:Wino.Core.Domain.Enums"
@@ -20,9 +21,8 @@
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
     xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
     xmlns:wino="using:Wino"
-    xmlns:converters="using:Wino.Converters"
     x:Name="root"
-    Loaded="MailListPageLoaded"
+    SizeChanged="Page_SizeChanged"
     mc:Ignorable="d">
 
     <Page.Resources>
@@ -181,11 +181,11 @@
                 <DataTemplate x:DataType="viewModelData:ThreadMailItemViewModel">
                     <controls:WinoExpander
                         x:Name="ThreadExpander"
+                        Padding="0"
                         HorizontalAlignment="Stretch"
                         HorizontalContentAlignment="Stretch"
                         BackgroundSizing="InnerBorderEdge"
                         BorderThickness="0"
-                        Padding="0"
                         IsExpanded="{x:Bind IsThreadExpanded, Mode=TwoWay}">
                         <muxc:Expander.Header>
                             <controls:MailItemDisplayInformationControl
@@ -276,9 +276,9 @@
 
             <AutoSuggestBox
                 x:Name="SearchBar"
+                Margin="2,0,-2,0"
                 VerticalAlignment="Center"
                 BorderBrush="Transparent"
-                Margin="2,0,-2,0"
                 GotFocus="SearchBoxFocused"
                 LostFocus="SearchBarUnfocused"
                 PlaceholderText="{x:Bind domain:Translator.SearchBarPlaceholder}"
@@ -296,23 +296,20 @@
 
     <Grid x:Name="RootGrid" Padding="0,0,0,7">
         <Grid.ColumnDefinitions>
-            <ColumnDefinition
+            <ColumnDefinition x:Name="MailListColumn" Width="{x:Bind ViewModel.MailListLength, Mode=OneWay, Converter={StaticResource GridLengthConverter}}" />
-                x:Name="ReaderColumn"
-                Width="*"
-                MaxWidth="{x:Bind ViewModel.StatePersistanceService.MailListPaneLength, Mode=OneWay}" />
             <ColumnDefinition x:Name="RendererColumn" Width="*" />
         </Grid.ColumnDefinitions>
 
         <!--  Mail Items  -->
         <Border
-            x:Name="ReaderGridContainer"
+            x:Name="MailListContainer"
             Grid.Column="0"
             Padding="5,0,0,0"
             Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="7">
-            <Grid x:Name="ReaderGrid">
+            <Grid x:Name="MailListGrid">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
@@ -615,11 +612,11 @@
                     <SemanticZoom x:Name="SemanticZoomContainer" CanChangeViews="{x:Bind ViewModel.PreferencesService.IsSemanticZoomEnabled, Mode=OneWay}">
                         <SemanticZoom.ZoomedInView>
                             <listview:WinoListView
-                                ui:ScrollViewerExtensions.VerticalScrollBarMargin="0"
                                 x:Name="MailListView"
                                 HorizontalContentAlignment="Stretch"
-                                ui:ScrollViewerExtensions.EnableMiddleClickScrolling="True"
                                 ui:ListViewExtensions.ItemContainerStretchDirection="Horizontal"
+                                ui:ScrollViewerExtensions.EnableMiddleClickScrolling="True"
+                                ui:ScrollViewerExtensions.VerticalScrollBarMargin="0"
                                 ItemDeletedCommand="{x:Bind ViewModel.MailOperationCommand}"
                                 ItemTemplateSelector="{StaticResource MailItemDisplaySelector}"
                                 ItemsSource="{x:Bind MailCollectionViewSource.View, Mode=OneWay}"
@@ -695,74 +692,38 @@
 
             </Grid>
         </Border>
+        <controls1:PropertySizer
+            Grid.Column="1"
+            Width="16"
+            HorizontalAlignment="Left"
+            Binding="{x:Bind ViewModel.MailListLength, Mode=TwoWay}"
+            Canvas.ZIndex="20"
+            ManipulationCompleted="PropertySizer_ManipulationCompleted"
+            Maximum="{x:Bind ViewModel.MaxMailListLength, Mode=OneWay}"
+            Minimum="270"
+            Opacity="0" />
 
-        <Grid Grid.Column="1" x:Name="RenderingGrid">
+        <Grid x:Name="RenderingGrid" Grid.Column="1">
             <!--  Mail Rendering Frame  -->
             <Frame x:Name="RenderingFrame" IsNavigationStackEnabled="False" />
 
             <!--  No Mail Selected Message  -->
             <StackPanel
                 x:Name="NoMailSelectedPanel"
-                Opacity="0.5"
-                Spacing="6"
                 HorizontalAlignment="Center"
-                VerticalAlignment="Center">
+                VerticalAlignment="Center"
+                Opacity="0.5"
+                Spacing="6">
 
-                <controls:WinoFontIcon Icon="Mail" FontSize="80" />
+                <controls:WinoFontIcon FontSize="80" Icon="Mail" />
 
                 <TextBlock
+                    x:Name="CountTextBlock"
                     HorizontalAlignment="Center"
                     FontSize="31"
-                    Text="{x:Bind ViewModel.SelectedMessageText, Mode=OneWay}"
                     Style="{StaticResource SubheaderTextBlockStyle}"
-                    x:Name="CountTextBlock" />
+                    Text="{x:Bind ViewModel.SelectedMessageText, Mode=OneWay}" />
             </StackPanel>
         </Grid>
-
-
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="AdaptiveStates" CurrentStateChanged="AdaptivenessChanged">
-                <VisualState x:Name="NormalState">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{x:Bind helpers:XamlHelpers.MailListAdaptivityConverter(ViewModel.StatePersistanceService.MailListPaneLength), Mode=OneWay}" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-
-                <VisualState x:Name="NarrowState">
-                    <VisualState.Setters>
-                        <Setter Target="ReaderGrid.MaxWidth" Value="10000" />
-                    </VisualState.Setters>
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-            </VisualStateGroup>
-
-            <!--  Pane open adjustments  -->
-            <VisualStateGroup x:Name="PaneStates">
-                <VisualState x:Name="PaneOpened">
-                    <VisualState.Setters>
-                        <!--<Setter Target="RootGrid.Margin" Value="-6,0,0,0" />-->
-                        <Setter Target="ReaderGrid.Margin" Value="-4,0,0,0" />
-                    </VisualState.Setters>
-                    <VisualState.StateTriggers>
-                        <StateTrigger IsActive="{x:Bind PreferencesService.IsNavigationPaneOpened, Mode=OneWay}" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-                <VisualState x:Name="PaneClosed" />
-            </VisualStateGroup>
-
-            <!--  Mail reader states  -->
-            <VisualStateGroup x:Name="ReaderStates">
-                <VisualState x:Name="ReaderActive">
-                    <VisualState.Setters>
-                        <Setter Target="ReaderGrid.CornerRadius" Value="0" />
-                    </VisualState.Setters>
-                    <VisualState.StateTriggers>
-                        <StateTrigger IsActive="{x:Bind StatePersistanceService.IsReadingMail, Mode=OneWay}" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
     </Grid>
 </abstract:MailListPageAbstract>

Wino.Mail/Views/MailListPage.xaml.cs

@@ -42,6 +42,7 @@ namespace Wino.Views
     {
         private const string NarrowVisualStateKey = "NarrowState";
         private const string AdaptivenessStatesKey = "AdaptiveStates";
+        private const int RENDERING_COLUMN_MIN_WIDTH = 300;
 
         private IStatePersistanceService StatePersistanceService { get; } = App.Current.Services.GetService<IStatePersistanceService>();
         private IPreferencesService PreferencesService { get; } = App.Current.Services.GetService<IPreferencesService>();
@@ -147,77 +148,6 @@ namespace Wino.Views
             MailListView.ClearSelections();
         }
 
-        #region Mostly UI
-
-        private void UpdateAdaptiveness()
-        {
-
-            bool shouldDisplayNoMessagePanel, shouldDisplayMailingList, shouldDisplayRenderingFrame;
-
-            // This is the smallest state UI can get.
-            // Either mailing list or rendering grid is visible.
-            if (StatePersistanceService.IsReaderNarrowed)
-            {
-                // Start visibility checks by no message panel.
-
-                bool isMultiSelectionEnabled = ViewModel.IsMultiSelectionModeEnabled || KeyPressService.IsCtrlKeyPressed();
-
-                shouldDisplayMailingList = isMultiSelectionEnabled ? true : (!ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections);
-                shouldDisplayNoMessagePanel = shouldDisplayMailingList ? false : !ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections;
-                shouldDisplayRenderingFrame = shouldDisplayMailingList ? false : !shouldDisplayNoMessagePanel;
-            }
-            else
-            {
-                shouldDisplayMailingList = true;
-                shouldDisplayNoMessagePanel = !ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections;
-                shouldDisplayRenderingFrame = !shouldDisplayNoMessagePanel;
-            }
-
-            ReaderGridContainer.Visibility = shouldDisplayMailingList ? Visibility.Visible : Visibility.Collapsed;
-            RenderingFrame.Visibility = shouldDisplayRenderingFrame ? Visibility.Visible : Visibility.Collapsed;
-            NoMailSelectedPanel.Visibility = shouldDisplayNoMessagePanel ? Visibility.Visible : Visibility.Collapsed;
-
-            if (StatePersistanceService.IsReaderNarrowed)
-            {
-                if (RenderingFrame.Visibility == Visibility.Visible && ReaderGridContainer.Visibility == Visibility.Collapsed)
-                {
-                    // Extend rendering frame to full width.
-                    Grid.SetColumn(RenderingGrid, 0);
-                    Grid.SetColumnSpan(RenderingGrid, 2);
-
-                    Grid.SetColumn(ReaderGrid, 0);
-                    Grid.SetColumnSpan(ReaderGrid, 2);
-                }
-                else if (RenderingFrame.Visibility == Visibility.Collapsed && NoMailSelectedPanel.Visibility == Visibility.Collapsed)
-                {
-                    // Only mail list is available.
-                    // Extend the mailing list.
-                    Grid.SetColumn(ReaderGridContainer, 0);
-                    Grid.SetColumnSpan(ReaderGridContainer, 2);
-                }
-            }
-            else
-            {
-                // Mailing list is always visible on the first part.
-
-                Grid.SetColumn(ReaderGridContainer, 0);
-                Grid.SetColumnSpan(ReaderGridContainer, 1);
-
-                // Rendering grid should take the rest of the space.
-                Grid.SetColumn(RenderingGrid, 1);
-                Grid.SetColumnSpan(RenderingGrid, 1);
-            }
-        }
-
-        private void AdaptivenessChanged(object sender, VisualStateChangedEventArgs e)
-        {
-            StatePersistanceService.IsReaderNarrowed = e.NewState.Name == "NarrowState";
-
-            UpdateAdaptiveness();
-        }
-
-        #endregion
-
         void IRecipient<ResetSingleMailItemSelectionEvent>.Receive(ResetSingleMailItemSelectionEvent message)
         {
             // Single item in thread selected.
@@ -329,7 +259,7 @@ namespace Wino.Views
                 }
             }
 
-            UpdateAdaptiveness();
+            UpdateAdaptiveness1();
         }
 
         private bool IsRenderingPageActive() => RenderingFrame.Content is MailRenderingPage;
@@ -379,7 +309,7 @@ namespace Wino.Views
 
         public void Receive(ActiveMailFolderChangedEvent message)
         {
-            UpdateAdaptiveness();
+            UpdateAdaptiveness1();
         }
 
         public async void Receive(SelectMailItemContainerEvent message)
@@ -433,7 +363,7 @@ namespace Wino.Views
 
         public void Receive(ShellStateUpdated message)
         {
-            UpdateAdaptiveness();
+            UpdateAdaptiveness1();
         }
 
         private void SearchBoxFocused(object sender, RoutedEventArgs e)
@@ -446,21 +376,6 @@ namespace Wino.Views
             SearchBar.PlaceholderText = Translator.SearchBarPlaceholder;
         }
 
-        private void MailListPageLoaded(object sender, RoutedEventArgs e)
-        {
-            // App might open with narrowed state.
-            // VSM will not trigger in this case.
-            // Set values to force updating adaptiveness.
-
-            var groups = VisualStateManager.GetVisualStateGroups(RootGrid);
-            var adaptiveState = groups.FirstOrDefault(a => a.Name == AdaptivenessStatesKey);
-
-            if (adaptiveState == null) return;
-
-            // This should force UpdateAdaptiveness call.
-            StatePersistanceService.IsReaderNarrowed = adaptiveState.CurrentState.Name == NarrowVisualStateKey;
-        }
-
         private void ProcessMailItemKeyboardAccelerator(UIElement sender, ProcessKeyboardAcceleratorEventArgs args)
         {
             if (args.Key == Windows.System.VirtualKey.Delete)
@@ -568,5 +483,83 @@ namespace Wino.Views
         {
             ViewModel.NavigationService.Navigate(WinoPage.IdlePage, null, NavigationReferenceFrame.RenderingFrame, NavigationTransitionType.DrillIn);
         }
+
+        private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            ViewModel.MaxMailListLength = e.NewSize.Width - RENDERING_COLUMN_MIN_WIDTH;
+
+            StatePersistanceService.IsReaderNarrowed = e.NewSize.Width < StatePersistanceService.MailListPaneLength + RENDERING_COLUMN_MIN_WIDTH;
+
+            UpdateAdaptiveness1();
+        }
+
+        private void UpdateAdaptiveness1()
+        {
+            bool shouldDisplayNoMessagePanel, shouldDisplayMailingList, shouldDisplayRenderingFrame;
+
+            // This is the smallest state UI can get.
+            // Either mailing list or rendering grid is visible.
+            if (StatePersistanceService.IsReaderNarrowed)
+            {
+                // Start visibility checks by no message panel.
+
+                bool isMultiSelectionEnabled = ViewModel.IsMultiSelectionModeEnabled || KeyPressService.IsCtrlKeyPressed();
+
+                shouldDisplayMailingList = isMultiSelectionEnabled ? true : (!ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections);
+                shouldDisplayNoMessagePanel = shouldDisplayMailingList ? false : !ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections;
+                shouldDisplayRenderingFrame = shouldDisplayMailingList ? false : !shouldDisplayNoMessagePanel;
+            }
+            else
+            {
+                shouldDisplayMailingList = true;
+                shouldDisplayNoMessagePanel = !ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections;
+                shouldDisplayRenderingFrame = !shouldDisplayNoMessagePanel;
+            }
+
+            MailListContainer.Visibility = shouldDisplayMailingList ? Visibility.Visible : Visibility.Collapsed;
+            RenderingFrame.Visibility = shouldDisplayRenderingFrame ? Visibility.Visible : Visibility.Collapsed;
+            NoMailSelectedPanel.Visibility = shouldDisplayNoMessagePanel ? Visibility.Visible : Visibility.Collapsed;
+
+            if (StatePersistanceService.IsReaderNarrowed == true)
+            {
+                if (ViewModel.HasSelectedItems)
+                {
+                    MailListColumn.Width = new GridLength(0);
+                    RendererColumn.Width = new GridLength(1, GridUnitType.Star);
+
+                    Grid.SetColumn(MailListContainer, 0);
+                    Grid.SetColumnSpan(RenderingGrid, 2);
+                    MailListContainer.Visibility = Visibility.Collapsed;
+                    RenderingGrid.Visibility = Visibility.Visible;
+                }
+                else
+                {
+                    MailListColumn.Width = new GridLength(1, GridUnitType.Star);
+                    RendererColumn.Width = new GridLength(0);
+
+                    Grid.SetColumnSpan(MailListContainer, 2);
+                    MailListContainer.Visibility = Visibility.Visible;
+                    RenderingGrid.Visibility = Visibility.Collapsed;
+                }
+            }
+            else
+            {
+                MailListColumn.Width = new GridLength(StatePersistanceService.MailListPaneLength);
+                RendererColumn.Width = new GridLength(1, GridUnitType.Star);
+
+                Grid.SetColumn(MailListContainer, 0);
+                Grid.SetColumn(RenderingGrid, 1);
+                Grid.SetColumnSpan(MailListContainer, 1);
+                Grid.SetColumnSpan(RenderingGrid, 1);
+
+                MailListContainer.Visibility = Visibility.Visible;
+                RenderingGrid.Visibility = Visibility.Visible;
+            }
+        }
+
+        private void PropertySizer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
+        {
+            StatePersistanceService.MailListPaneLength = ViewModel.MailListLength;
+        }
     }
 }

Wino.Mail/Wino.Mail.csproj

@@ -246,6 +246,7 @@
     <Compile Include="Controls\WinoFontIconSource.cs" />
     <Compile Include="Controls\WinoFontIcon.cs" />
     <Compile Include="Controls\WinoSwipeControlItems.cs" />
+    <Compile Include="Converters\GridLengthConverter.cs" />
     <Compile Include="Dialogs\AccountEditDialog.xaml.cs">
       <DependentUpon>AccountEditDialog.xaml</DependentUpon>
     </Compile>