Expander: remove DisplayMode and replace animations with composition animations

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderPage.xaml

@@ -16,9 +16,8 @@
                                 Foreground="White"
                                 Background="{Binding Path=BackgroundExpander1.Value, Mode=TwoWay}"
                                 IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}"
-                                ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}"
-                                DisplayMode="{Binding Path=DisplayMode1.Value, Mode=TwoWay}">
-                    <Grid Height="250">
+                                ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}">
+                    <Grid>
                         <TextBlock HorizontalAlignment="Center" 
                                 TextWrapping="Wrap" 
                                 Text="This is the content"
@@ -27,7 +26,7 @@
                     </Grid>
 
                     <controls:Expander.ContentOverlay>
-                        <Grid Background="Red">
+                        <Grid Background="Red" MinHeight="250">
                             <TextBlock Text="Hello world!"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center" />
@@ -41,8 +40,7 @@
                                 Foreground="White"
                                 Background="{Binding Path=BackgroundExpander2.Value, Mode=TwoWay}"
                                 IsExpanded="{Binding Path=IsExpanded2.Value, Mode=TwoWay}"
-                                ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}"
-                                DisplayMode="{Binding Path=DisplayMode2.Value, Mode=TwoWay}">
+                                ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}">
                     <Grid Height="250">
                         <TextBlock HorizontalAlignment="Center" 
                                 TextWrapping="Wrap" 

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderXaml.bind

@@ -15,19 +15,18 @@
                           Foreground="White"
                           Background="@[BackgroundExpander1:Brush:Gray]"
                           IsExpanded="@[IsExpanded1:Bool:False]@"
-                          ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]"
-                          DisplayMode="@[DisplayMode1:Enum:ExpanderDisplayMode.Overlay]">
-          <Grid Height="250">
+                          ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]">
+          <Grid>
             <TextBlock HorizontalAlignment="Center"
                       TextWrapping="Wrap"
-                      Text="This is the content"
+                      Text="This is the expanded content"
                       VerticalAlignment="Center"
                       Style="{StaticResource HeaderTextBlockStyle}" />
           </Grid>
 
           <controls:Expander.ContentOverlay>
-            <Grid Background="Red">
-              <TextBlock Text="Hello world!"
+            <Grid Background="Red" MinHeight="250">
+              <TextBlock Text="This is the content overlay"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center" />
             </Grid>
@@ -40,12 +39,11 @@
                           Foreground="White"
                           Background="@[BackgroundExpander2:Brush:Black]"
                           IsExpanded="@[IsExpanded2:Bool:True]@"
-                          ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]"
-                          DisplayMode="@[DisplayMode2:Enum:ExpanderDisplayMode.Expand]">
+                          ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]">
           <Grid Height="250">
             <TextBlock HorizontalAlignment="Center"
                       TextWrapping="Wrap"
-                      Text="This is the content"
+                      Text="This is the expanded content without a content overlay"
                       VerticalAlignment="Center"
                       Style="{StaticResource HeaderTextBlockStyle}" />
           </Grid>

Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.Constants.cs

@@ -18,7 +18,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     public partial class Expander
     {
         /// <summary>
-        /// Key of the VisualStateGroup that trigger display mode (visible/collapsed/overlay) and direction content
+        /// Key of the VisualStateGroup that trigger display mode (visible/collapsed) and direction content
         /// </summary>
         private const string DisplayModeAndDirectionStatesGroupStateContent = "DisplayModeAndDirectionStates";
 
@@ -61,27 +61,7 @@ public partial class Expander
         /// Key of the VisualState when expander is collapsed and expander direction is set to Up
         /// </summary>
         private const string StateContentCollapsedUp = "CollapsedUp";
-
-        /// <summary>
-        /// Key of the VisualState when expander is overlay and expander direction is set to Left
-        /// </summary>
-        private const string StateContentOverlayLeft = "OverlayLeft";
-
-        /// <summary>
-        /// Key of the VisualState when expander is overlay and expander direction is set to Down
-        /// </summary>
-        private const string StateContentOverlayDown = "OverlayDown";
-
-        /// <summary>
-        /// Key of the VisualState when expander is overlay and expander direction is set to Right
-        /// </summary>
-        private const string StateContentOverlayRight = "OverlayRight";
-
-        /// <summary>
-        /// Key of the VisualState when expander is overlay and expander direction is set to Up
-        /// </summary>
-        private const string StateContentOverlayUp = "OverlayUp";
-
+
         /// <summary>
         /// Key of the UI Element that toggle IsExpanded property
         /// </summary>

Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.Properties.cs

@@ -43,12 +43,6 @@ public partial class Expander
         public static readonly DependencyProperty ExpandDirectionProperty =
             DependencyProperty.Register(nameof(ExpandDirection), typeof(ExpandDirection), typeof(Expander), new PropertyMetadata(ExpandDirection.Down, OnExpandDirectionChanged));
 
-        /// <summary>
-        /// Identifies the <see cref="DisplayMode"/> dependency property.
-        /// </summary>
-        public static readonly DependencyProperty DisplayModeProperty =
-            DependencyProperty.Register(nameof(DisplayMode), typeof(ExpanderDisplayMode), typeof(Expander), new PropertyMetadata(ExpanderDisplayMode.Expand, OnDisplayModeChanged));
-
         /// <summary>
         /// Identifies the <see cref="ContentOverlay"/> dependency property.
         /// </summary>
@@ -91,15 +85,6 @@ public ExpandDirection ExpandDirection
             set { SetValue(ExpandDirectionProperty, value); }
         }
 
-        /// <summary>
-        /// Gets or sets a value indicating whether the Expander control should be in Expand or Overlay mode.
-        /// </summary>
-        public ExpanderDisplayMode DisplayMode
-        {
-            get { return (ExpanderDisplayMode)GetValue(DisplayModeProperty); }
-            set { SetValue(DisplayModeProperty, value); }
-        }
-
         /// <summary>
         /// Gets or sets a value indicating whether the ContentOverlay of the control.
         /// </summary>
@@ -135,17 +120,5 @@ private static void OnExpandDirectionChanged(DependencyObject d, DependencyPrope
                 expander.OnExpandDirectionChanged();
             }
         }
-
-        private static void OnDisplayModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            var expander = d as Expander;
-            var previousDisplayMode = (ExpanderDisplayMode)e.OldValue;
-            var newDisplayMode = (ExpanderDisplayMode)e.NewValue;
-
-            if (previousDisplayMode != newDisplayMode)
-            {
-                expander.OnDisplayModeOrIsExpandedChanged();
-            }
-        }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.cs

@@ -35,10 +35,6 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     [TemplateVisualState(Name = StateContentCollapsedDown, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
     [TemplateVisualState(Name = StateContentCollapsedRight, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
     [TemplateVisualState(Name = StateContentCollapsedUp, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
-    [TemplateVisualState(Name = StateContentOverlayLeft, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
-    [TemplateVisualState(Name = StateContentOverlayDown, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
-    [TemplateVisualState(Name = StateContentOverlayRight, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
-    [TemplateVisualState(Name = StateContentOverlayUp, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
     [TemplatePart(Name = RootGridPart, Type = typeof(Grid))]
     [TemplatePart(Name = ExpanderToggleButtonPart, Type = typeof(ToggleButton))]
     [TemplatePart(Name = LayoutTransformerPart, Type = typeof(LayoutTransformControl))]
@@ -170,16 +166,16 @@ private void UpdateDisplayModeOrExpanderDirection()
             switch (ExpandDirection)
             {
                 case ExpandDirection.Left:
-                    visualState = GetDisplayModeVisualState(StateContentOverlayLeft, StateContentCollapsedLeft, StateContentVisibleLeft);
+                    visualState = GetDisplayModeVisualState(StateContentCollapsedLeft, StateContentVisibleLeft);
                     break;
                 case ExpandDirection.Down:
-                    visualState = GetDisplayModeVisualState(StateContentOverlayDown, StateContentCollapsedDown, StateContentVisibleDown);
+                    visualState = GetDisplayModeVisualState(StateContentCollapsedDown, StateContentVisibleDown);
                     break;
                 case ExpandDirection.Right:
-                    visualState = GetDisplayModeVisualState(StateContentOverlayRight, StateContentCollapsedRight, StateContentVisibleRight);
+                    visualState = GetDisplayModeVisualState(StateContentCollapsedRight, StateContentVisibleRight);
                     break;
                 case ExpandDirection.Up:
-                    visualState = GetDisplayModeVisualState(StateContentOverlayUp, StateContentCollapsedUp, StateContentVisibleUp);
+                    visualState = GetDisplayModeVisualState(StateContentCollapsedUp, StateContentVisibleUp);
                     break;
             }
 
@@ -189,22 +185,9 @@ private void UpdateDisplayModeOrExpanderDirection()
             }
         }
 
-        private string GetDisplayModeVisualState(string overlayState, string collapsedState, string visibleState)
+        private string GetDisplayModeVisualState(string collapsedState, string visibleState)
         {
-            if (!IsExpanded && DisplayMode == ExpanderDisplayMode.Overlay)
-            {
-                // Overlay
-                return overlayState;
-            }
-
-            if (!IsExpanded && DisplayMode == ExpanderDisplayMode.Expand)
-            {
-                // Collapsed
-                return collapsedState;
-            }
-
-            // Visible
-            return visibleState;
+            return IsExpanded ? visibleState : collapsedState;
         }
     }
 }