feat(Expander): improve Expander

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

@@ -15,14 +15,21 @@
                                Foreground="White"
                                Background="{Binding Path=BackgroundExpander1.Value, Mode=TwoWay}"
                                IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}"
-                               ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}">
+                               ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}"
+                               DisplayMode="{Binding Path=DisplayMode1.Value, Mode=TwoWay}">
                 <Grid Height="250">
                     <TextBlock HorizontalAlignment="Center" 
-                               TextWrapping="Wrap" 
-                               Text="This is the content"
-                               VerticalAlignment="Center"
-                               Style="{StaticResource HeaderTextBlockStyle}" />
+                                TextWrapping="Wrap" 
+                                Text="This is the content"
+                                VerticalAlignment="Center"
+                                Style="{StaticResource HeaderTextBlockStyle}" />
                 </Grid>
+
+                <controls:Expander.ContentOverlay>
+                    <Grid Background="Red">
+                        <TextBlock Text="Hello" />
+                    </Grid>
+                </controls:Expander.ContentOverlay>
             </controls:Expander>
 
             <controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0" 
@@ -31,13 +38,14 @@
                                Foreground="White"
                                Background="{Binding Path=BackgroundExpander2.Value, Mode=TwoWay}"
                                IsExpanded="{Binding Path=IsExpanded2.Value, Mode=TwoWay}"
-                               ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}">
+                               ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}"
+                               DisplayMode="{Binding Path=DisplayMode2.Value, Mode=TwoWay}">
                 <Grid Height="250">
                     <TextBlock HorizontalAlignment="Center" 
-                               TextWrapping="Wrap" 
-                               Text="This is the content" 
-                               VerticalAlignment="Center" 
-                               Style="{StaticResource HeaderTextBlockStyle}" />
+                            TextWrapping="Wrap" 
+                            Text="This is the content" 
+                            VerticalAlignment="Center" 
+                            Style="{StaticResource HeaderTextBlockStyle}" />
                 </Grid>
             </controls:Expander>
         </StackPanel>

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

@@ -8,33 +8,41 @@
 
   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <StackPanel Margin="20">
-      <controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10" 
+      <controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10"
                          Header="This is the header - expander 1"
                          Foreground="White"
                          Background="@[BackgroundExpander1:Brush:Gray]"
                          IsExpanded="@[IsExpanded1:Bool:False]@"
-                         ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]">
+                         ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]"
+                         DisplayMode="@[DisplayMode1:Enum:ExpanderDisplayMode.Overlay]">
         <Grid Height="250">
           <TextBlock HorizontalAlignment="Center"
-                     TextWrapping="Wrap"
-                     Text="This is the content"
-                     VerticalAlignment="Center"
-                     Style="{StaticResource HeaderTextBlockStyle}" />
+                      TextWrapping="Wrap"
+                      Text="This is the content"
+                      VerticalAlignment="Center"
+                      Style="{StaticResource HeaderTextBlockStyle}" />
         </Grid>
+
+        <controls:Expander.ContentOverlay>
+          <Grid Background="Red">
+            <TextBlock Text="Hello" />
+          </Grid>
+        </controls:Expander.ContentOverlay>
       </controls:Expander>
 
-      <controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0" 
+      <controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0"
                          Header="This is the header - expander 2"
                          Foreground="White"
                          Background="@[BackgroundExpander2:Brush:Black]"
                          IsExpanded="@[IsExpanded2:Bool:True]@"
-                         ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]">
+                         ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]"
+                         DisplayMode="@[DisplayMode2:Enum:ExpanderDisplayMode.Expand]">
         <Grid Height="250">
           <TextBlock HorizontalAlignment="Center"
-                     TextWrapping="Wrap"
-                     Text="This is the content"
-                     VerticalAlignment="Center"
-                     Style="{StaticResource HeaderTextBlockStyle}" />
+                      TextWrapping="Wrap"
+                      Text="This is the content"
+                      VerticalAlignment="Center"
+                      Style="{StaticResource HeaderTextBlockStyle}" />
         </Grid>
       </controls:Expander>
     </StackPanel>

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 open/close content
+        /// Key of the VisualStateGroup that open/close/overlay content
         /// </summary>
         private const string ExpandedGroupStateContent = "ExpandedStates";
 
@@ -32,6 +32,16 @@ public partial class Expander
         /// </summary>
         private const string StateContentCollapsed = "Collapsed";
 
+        /// <summary>
+        /// Key of the VisualState when content is visible in Overlay mode
+        /// </summary>
+        private const string StateContentOverlayVisible = "OverlayVisible";
+
+        /// <summary>
+        /// Key of the VisualState when content is hidden in Overlay mode
+        /// </summary>
+        private const string StateContentOverlayHidden = "OverlayHidden";
+
         /// <summary>
         /// Key of the UI Element that toggle IsExpanded property
         /// </summary>
@@ -76,5 +86,10 @@ public partial class Expander
         /// Key of the UI Element that contains the content of the LayoutTransformer (of the expander button)
         /// </summary>
         private const string LayoutTransformerPart = "PART_LayoutTransformer";
+
+        /// <summary>
+        /// Key of the UI Element that contains the content of the control that is visible in Overlay mode
+        /// </summary>
+        private const string ContentOverlayPart = "PART_ContentOverlay";
     }
 }

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

@@ -43,6 +43,18 @@ 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>
+        public static readonly DependencyProperty ContentOverlayProperty =
+            DependencyProperty.Register(nameof(ContentOverlay), typeof(UIElement), typeof(Expander), new PropertyMetadata(default(UIElement)));
+
         /// <summary>
         /// Gets or sets a value indicating whether the Header of the control.
         /// </summary>
@@ -79,6 +91,24 @@ 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>
+        public object ContentOverlay
+        {
+            get { return GetValue(ContentOverlayProperty); }
+            set { SetValue(ContentOverlayProperty, value); }
+        }
+
         private static void OnIsExpandedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var expander = d as Expander;
@@ -105,5 +135,17 @@ 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

@@ -15,6 +15,7 @@
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Markup;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
@@ -24,13 +25,16 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     /// </summary>
     [TemplateVisualState(Name = StateContentExpanded, GroupName = ExpandedGroupStateContent)]
     [TemplateVisualState(Name = StateContentCollapsed, GroupName = ExpandedGroupStateContent)]
+    [TemplateVisualState(Name = StateContentOverlayVisible, GroupName = ExpandedGroupStateContent)]
+    [TemplateVisualState(Name = StateContentOverlayHidden, GroupName = ExpandedGroupStateContent)]
     [TemplateVisualState(Name = StateContentLeftDirection, GroupName = ExpandDirectionGroupStateContent)]
     [TemplateVisualState(Name = StateContentDownDirection, GroupName = ExpandDirectionGroupStateContent)]
     [TemplateVisualState(Name = StateContentRightDirection, GroupName = ExpandDirectionGroupStateContent)]
     [TemplateVisualState(Name = StateContentUpDirection, GroupName = ExpandDirectionGroupStateContent)]
     [TemplatePart(Name = RootGridPart, Type = typeof(Grid))]
     [TemplatePart(Name = ExpanderToggleButtonPart, Type = typeof(ToggleButton))]
     [TemplatePart(Name = LayoutTransformerPart, Type = typeof(LayoutTransformControl))]
+    [TemplatePart(Name = ContentOverlayPart, Type = typeof(ContentPresenter))]
     [ContentProperty(Name = "Content")]
     public partial class Expander : ContentControl
     {
@@ -43,15 +47,6 @@ protected override void OnApplyTemplate()
         {
             base.OnApplyTemplate();
 
-            if (IsExpanded)
-            {
-                VisualStateManager.GoToState(this, StateContentExpanded, false);
-            }
-            else
-            {
-                VisualStateManager.GoToState(this, StateContentCollapsed, false);
-            }
-
             var button = (ToggleButton)GetTemplateChild(ExpanderToggleButtonPart);
 
             if (button != null)
@@ -61,6 +56,7 @@ protected override void OnApplyTemplate()
             }
 
             OnExpandDirectionChanged();
+            OnDisplayModeOrIsExpandedChanged(false);
         }
 
         protected virtual void OnExpanded(EventArgs args)
@@ -73,7 +69,7 @@ protected virtual void OnCollapsed(EventArgs args)
             Collapsed?.Invoke(this, args);
         }
 
-        private void ExpanderToggleButtonPart_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
+        private void ExpanderToggleButtonPart_KeyDown(object sender, KeyRoutedEventArgs e)
         {
             if (e.Key != VirtualKey.Enter)
             {
@@ -94,17 +90,17 @@ private void ExpanderToggleButtonPart_KeyDown(object sender, Windows.UI.Xaml.Inp
 
         private void ExpandControl()
         {
-            VisualStateManager.GoToState(this, StateContentExpanded, true);
+            OnDisplayModeOrIsExpandedChanged();
             OnExpanded(EventArgs.Empty);
         }
 
         private void CollapseControl()
         {
-            VisualStateManager.GoToState(this, StateContentCollapsed, true);
+            OnDisplayModeOrIsExpandedChanged();
             OnCollapsed(EventArgs.Empty);
         }
 
-        public void OnExpandDirectionChanged()
+        private void OnExpandDirectionChanged()
         {
             var button = (ToggleButton)GetTemplateChild(ExpanderToggleButtonPart);
 
@@ -140,5 +136,31 @@ public void OnExpandDirectionChanged()
                 VisualStateManager.GoToState(button, "Checked", true);
             }
         }
+
+        private void OnDisplayModeOrIsExpandedChanged(bool useTransitions = true)
+        {
+            if (IsExpanded)
+            {
+                if (DisplayMode == ExpanderDisplayMode.Expand)
+                {
+                    VisualStateManager.GoToState(this, StateContentExpanded, useTransitions);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, StateContentOverlayVisible, useTransitions);
+                }
+            }
+            else
+            {
+                if (DisplayMode == ExpanderDisplayMode.Expand)
+                {
+                    VisualStateManager.GoToState(this, StateContentCollapsed, useTransitions);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, StateContentOverlayHidden, useTransitions);
+                }
+            }
+        }
     }
 }

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

@@ -336,6 +336,17 @@
                                         <Setter Target="PART_RootGrid.Background" Value="Transparent" />
                                     </VisualState.Setters>
                                 </VisualState>
+                                <VisualState x:Name="OverlayVisible">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_MainContent.Visibility" Value="Visible" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="OverlayHidden">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_MainContent" Value="Visible" />
+                                        <Setter Target="PART_ContentOverlay" Value="Visible" />
+                                    </VisualState.Setters>
+                                </VisualState>
                             </VisualStateGroup>
 
                             <VisualStateGroup x:Name="ExpandDirectionStates">
@@ -431,6 +442,14 @@
                                               HorizontalContentAlignment="Stretch"
                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                               Visibility="Collapsed" />
+
+                            <ContentControl Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"
+                                            x:Name="PART_ContentOverlay"
+                                            Canvas.ZIndex="10"
+                                            Content="{TemplateBinding ContentOverlay}"
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Stretch"
+                                            Visibility="Collapsed" />
                         </Grid>
                     </Grid>
                 </ControlTemplate>

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

@@ -0,0 +1,30 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// Display mode of the Expander that will update the behavior of the content visibility
+    /// </summary>
+    public enum ExpanderDisplayMode
+    {
+        /// <summary>
+        /// Default mode (the content is totally collapsed)
+        /// </summary>
+        Expand,
+
+        /// <summary>
+        /// Overlay mode (only the overlay content is visible)
+        /// </summary>
+        Overlay
+    }
+}