Moved SideDrawer size managment to Shell

Author: Avid29

src/Quarrel/Controls/Shell/Shell.xaml

@@ -8,14 +8,39 @@
     xmlns:panels="using:Quarrel.Controls.Shell.Panels"
     mc:Ignorable="d"
     d:DesignHeight="300"
-    d:DesignWidth="400">
-    <Grid Background="{ThemeResource CommandBarBackground}">
+    d:DesignWidth="400"
+    SizeChanged="OnSizeChanged">
+    <Grid x:Name="root" Background="{ThemeResource CommandBarBackground}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState x:Name="Small">
+                    <VisualState.Setters>
+                        <!--<Setter Target="Drawer.Size" Value="Small"/>-->
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="Medium">
+                    <VisualState.Setters>
+                        <!--<Setter Target="Drawer.Size" Value="Medium"/>-->
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="Large">
+                    <VisualState.Setters>
+                        <!--<Setter Target="Drawer.Size" Value="Large"/>-->
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="ExtraLarge">
+                    <VisualState.Setters>
+                        <!--<Setter Target="Drawer.Size" Value="ExtraLarge"/>-->
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
             <RowDefinition/>
         </Grid.RowDefinitions>
         <local:QuarrelCommandBar/>
-        <local:SideDrawer x:Name="Drawer" Grid.Row="1">
+        <local:SideDrawer x:Name="Drawer" Grid.Row="1" Size="Large">
             <local:SideDrawer.LeftContent>
                 <Grid Background="{ThemeResource TertiaryPaneBackground}">
                     <panels:GuildPanel/>

src/Quarrel/Controls/Shell/Shell.xaml.cs

@@ -6,6 +6,7 @@
 using Quarrel.Messages.Navigation;
 using Quarrel.Messages.Panel;
 using System;
+using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 
 namespace Quarrel.Controls.Shell
@@ -23,6 +24,21 @@ public Shell()
             _messenger.Register<TogglePanelMessage>(this, (_, e) => GoToPanelState(e));
         }
 
+        /// <summary>
+        /// Gets or sets the minimum size where the <see cref="SideDrawer"/> will enter the <see cref="SideDrawerSize.Medium"/> size UI.
+        /// </summary>
+        public double MediumMinSize { get; set; } = 600;
+
+        /// <summary>
+        /// Gets or sets the minimum size where the <see cref="SideDrawer"/> will enter the <see cref="SideDrawerSize.Large"/> size UI.
+        /// </summary>
+        public double LargeMinSize { get; set; } = 1100;
+
+        /// <summary>
+        /// Gets or sets the minimum size where the <see cref="SideDrawer"/> will enter the <see cref="SideDrawerSize.ExtraLarge"/> size UI.
+        /// </summary>
+        public double ExtraLargeMinSize { get; set; } = 1400;
+
         private void GoToPanelState(TogglePanelMessage state)
         {
             Action? action = state switch
@@ -38,5 +54,33 @@ private void GoToPanelState(TogglePanelMessage state)
 
             action?.Invoke();
         }
+
+        private void OnSizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            double width = e.NewSize.Width;
+            string stateName = string.Empty;
+            if (width < MediumMinSize)
+            {
+                stateName = nameof(Small);
+                Drawer.Size = SideDrawerSize.Small;
+            }
+            else if (width < LargeMinSize)
+            {
+                stateName = nameof(Medium);
+                Drawer.Size = SideDrawerSize.Medium;
+            }
+            else if (width < ExtraLargeMinSize)
+            {
+                stateName = nameof(Large);
+                Drawer.Size = SideDrawerSize.Large;
+            }
+            else
+            {
+                stateName = nameof(ExtraLarge);
+                Drawer.Size = SideDrawerSize.ExtraLarge;
+            }
+
+            VisualStateManager.GoToState(this, stateName, true);
+        }
     }
 }

src/Quarrel/Controls/Shell/SideDrawer.xaml

@@ -8,8 +8,7 @@
     xmlns:qc="using:Quarrel.Controls"
     mc:Ignorable="d"
     d:DesignHeight="300"
-    d:DesignWidth="400"
-    SizeChanged="OnSizeChanged">
+    d:DesignWidth="400">
 
     <Grid x:Name="rootgrid" PointerPressed="OnPointerPressed">
         <Grid x:Name="leftwrap" HorizontalAlignment="Left">

src/Quarrel/Controls/Shell/SideDrawer.xaml.cs

@@ -27,14 +27,14 @@ public sealed partial class SideDrawer : UserControl
         private static readonly DependencyProperty SecondaryPanelWidthProperty =
             DependencyProperty.Register(nameof(SecondaryPanelWidth), typeof(float), typeof(Shadow), new PropertyMetadata(228f, OnPanelWidthPropertyChanged));
 
-        private InteractionTracker _tracker;
-        private VisualInteractionSource _interactionSource;
-        private Compositor _compositor;
+        private readonly InteractionTracker _tracker;
+        private readonly VisualInteractionSource _interactionSource;
+        private readonly Compositor _compositor;
 
-        private Visual _mainVisual;
-        private Visual _leftVisual;
-        private Visual _left2Visual;
-        private Visual _rightVisual;
+        private readonly Visual _mainVisual;
+        private readonly Visual _leftVisual;
+        private readonly Visual _left2Visual;
+        private readonly Visual _rightVisual;
 
         // These animations represent the position of the panes relative to the tracker position.
         private ExpressionAnimation? _mainTranslateAnimation;
@@ -46,9 +46,9 @@ public sealed partial class SideDrawer : UserControl
         // The start point is where the panel rests when the left panel is open
         // The mid point is where the panel rests when the panels are closed
         // The end point is where the panel rests when the right panel is open
-        private InteractionTrackerInertiaRestingValue _startPoint;
-        private InteractionTrackerInertiaRestingValue _midPoint;
-        private InteractionTrackerInertiaRestingValue _endPoint;
+        private readonly InteractionTrackerInertiaRestingValue _startPoint;
+        private readonly InteractionTrackerInertiaRestingValue _midPoint;
+        private readonly InteractionTrackerInertiaRestingValue _endPoint;
 
         /// <summary>
         /// Inializes a new instance of the <see cref="SideDrawer"/> class.
@@ -137,21 +137,6 @@ public object RightContent
             set => RightContentControl.Content = value;
         }
 
-        /// <summary>
-        /// Gets or sets the minimum size where the <see cref="SideDrawer"/> will enter the <see cref="SideDrawerSize.Medium"/> size UI.
-        /// </summary>
-        public double MediumMinSize { get; set; } = 600;
-
-        /// <summary>
-        /// Gets or sets the minimum size where the <see cref="SideDrawer"/> will enter the <see cref="SideDrawerSize.Large"/> size UI.
-        /// </summary>
-        public double LargeMinSize { get; set; } = 1100;
-
-        /// <summary>
-        /// Gets or sets the minimum size where the <see cref="SideDrawer"/> will enter the <see cref="SideDrawerSize.ExtraLarge"/> size UI.
-        /// </summary>
-        public double ExtraLargeMinSize { get; set; } = 1400;
-
         /// <summary>
         /// Gets or sets the width of the secondary panels.
         /// </summary>
@@ -194,7 +179,10 @@ public float PrimaryPanelWidth
         /// </remarks>
         public bool IsRightOpen => FlowDirection == FlowDirection.LeftToRight ? _tracker.Position.X > 0 : _tracker.Position.X < 0;
 
-        private SideDrawerSize Size
+        /// <summary>
+        /// Gets or sets the behavioral size of the side drawer control.
+        /// </summary>
+        public SideDrawerSize Size
         {
             get => (SideDrawerSize)GetValue(SizeProperty);
             set => SetValue(SizeProperty, value);
@@ -303,6 +291,11 @@ private void SetupComposition()
             _rightVisual.StartAnimation(TranslationX, _rightTranslateAnimation);
 
             SetSnapPoints(-TotalPanelWidth, 0, SecondaryPanelWidth);
+
+            // Invoke size update
+            var cache = Size;
+            Size = SideDrawerSize.Small;
+            Size = cache;
         }
 
         private void SetupAnimations()
@@ -340,26 +333,6 @@ private void OnPointerPressed(object sender, PointerRoutedEventArgs e)
             }
         }
 
-        private void OnSizeChanged(object sender, SizeChangedEventArgs e)
-        {
-            SideDrawerSize size = SideDrawerSize.ExtraLarge;
-            double width = e.NewSize.Width;
-            if (width < MediumMinSize)
-            {
-                size = SideDrawerSize.Small;
-            }
-            else if (width < LargeMinSize)
-            {
-                size = SideDrawerSize.Medium;
-            }
-            else if (width < ExtraLargeMinSize)
-            {
-                size = SideDrawerSize.Large;
-            }
-
-            Size = size;
-        }
-
         private async void SetSizeSmall(SideDrawerSize previous)
         {
             main.Margin = new Thickness(0, 0, 0, 0);
@@ -545,28 +518,21 @@ private static void OnSizePropertyChanged(DependencyObject d, DependencyProperty
             SideDrawerSize newSize = (SideDrawerSize)args.NewValue;
             SideDrawerSize oldSize = (SideDrawerSize)args.OldValue;
 
-            if (newSize == oldSize)
-            {
-                return;
-            }
+            if (!sideDrawer.IsLoaded) return;
+            if (newSize == oldSize) return;
 
             sideDrawer.TrackerTranslate(0);
 
-            switch (newSize)
+            Action<SideDrawerSize> adjustment = newSize switch
             {
-                case SideDrawerSize.Small:
-                    sideDrawer.SetSizeSmall(oldSize);
-                    break;
-                case SideDrawerSize.Medium:
-                    sideDrawer.SetSizeMedium(oldSize);
-                    break;
-                case SideDrawerSize.Large:
-                    sideDrawer.SetSizeLarge(oldSize);
-                    break;
-                case SideDrawerSize.ExtraLarge:
-                    sideDrawer.SetSizeExtraLarge(oldSize);
-                    break;
-            }
+                SideDrawerSize.Small => sideDrawer.SetSizeSmall,
+                SideDrawerSize.Medium => sideDrawer.SetSizeMedium,
+                SideDrawerSize.Large => sideDrawer.SetSizeLarge,
+                SideDrawerSize.ExtraLarge => sideDrawer.SetSizeExtraLarge,
+                _ => sideDrawer.SetSizeSmall,
+            };
+
+            adjustment?.Invoke(oldSize);
 
             // Adjust tracker bounds for right to left flow direction
             if (sideDrawer.FlowDirection == FlowDirection.RightToLeft)