Merge pull request #1336 from Odonno/expanderOrientation

feat(Expander): add ability to change expander orientation

Author: azchohfi

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

@@ -14,7 +14,8 @@
                                HorizontalContentAlignment="Stretch"
                                Foreground="White"
                                Background="{Binding Path=BackgroundExpander1.Value, Mode=TwoWay}"
-                               IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}">
+                               IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}"
+                               ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}">
                 <Grid Height="250">
                     <TextBlock HorizontalAlignment="Center" 
                                TextWrapping="Wrap" 
@@ -29,7 +30,8 @@
                                HorizontalContentAlignment="Stretch"
                                Foreground="White"
                                Background="{Binding Path=BackgroundExpander2.Value, Mode=TwoWay}"
-                               IsExpanded="{Binding Path=IsExpanded2.Value, Mode=TwoWay}">
+                               IsExpanded="{Binding Path=IsExpanded2.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

@@ -13,7 +13,8 @@
                          Header="This is the header - expander 1"
                          Foreground="White"
                          Background="@[BackgroundExpander1:Brush:Gray]"
-                         IsExpanded="@[IsExpanded1:Bool:False]">
+                         IsExpanded="@[IsExpanded1:Bool:False]"
+                         ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]">
         <Grid Height="250">
           <TextBlock HorizontalAlignment="Center"
                      TextWrapping="Wrap"
@@ -27,7 +28,8 @@
                          Header="This is the header - expander 2"
                          Foreground="White"
                          Background="@[BackgroundExpander2:Brush:Black]"
-                         IsExpanded="@[IsExpanded2:Bool:True]">
+                         IsExpanded="@[IsExpanded2:Bool:True]"
+                         ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]">
         <Grid Height="250">
           <TextBlock HorizontalAlignment="Center"
                      TextWrapping="Wrap"

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Menu/MenuPage.xaml

@@ -25,7 +25,7 @@
                        Orientation="{Binding Orientation.Value, Mode=TwoWay}"
                        TooltipPlacement="{Binding TooltipPlacement.Value, Mode=TwoWay}">
 
-            <controls:MenuItem Name="FileMenu"
+            <controls:MenuItem x:Name="FileMenu"
                                controls:Menu.InputGestureText="Alt+F">
                 <controls:MenuItem.Header>
                     <StackPanel Orientation="Horizontal">

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

@@ -0,0 +1,37 @@
+// ******************************************************************
+// 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
+{
+    public enum ExpandDirection
+    {
+        /// <summary>
+        /// Down
+        /// </summary>
+        Down,
+
+        /// <summary>
+        /// Up
+        /// </summary>
+        Up,
+
+        /// <summary>
+        /// Left
+        /// </summary>
+        Left,
+
+        /// <summary>
+        /// Right
+        /// </summary>
+        Right
+    }
+}

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

@@ -20,26 +20,61 @@ public partial class Expander
         /// <summary>
         /// Key of the VisualStateGroup that open/close content
         /// </summary>
-        public const string GroupContent = "ExpandedStates";
+        private const string ExpandedGroupStateContent = "ExpandedStates";
 
         /// <summary>
         /// Key of the VisualState when content is expanded
         /// </summary>
-        public const string StateContentExpanded = "Expanded";
+        private const string StateContentExpanded = "Expanded";
 
         /// <summary>
         /// Key of the VisualState when content is collapsed
         /// </summary>
-        public const string StateContentCollapsed = "Collapsed";
+        private const string StateContentCollapsed = "Collapsed";
 
         /// <summary>
         /// Key of the UI Element that toggle IsExpanded property
         /// </summary>
-        public const string ExpanderToggleButtonPart = "PART_ExpanderToggleButton";
+        private const string ExpanderToggleButtonPart = "PART_ExpanderToggleButton";
 
         /// <summary>
         /// Key of the UI Element that contains the content of the control that is expanded/collapsed
         /// </summary>
-        public const string MainContentPart = "PART_MainContent";
+        private const string MainContentPart = "PART_MainContent";
+
+        /// <summary>
+        /// Key of the VisualStateGroup that set expander direction of the control
+        /// </summary>
+        private const string ExpandDirectionGroupStateContent = "ExpandDirectionStates";
+
+        /// <summary>
+        /// Key of the VisualState when expander direction is set to Left
+        /// </summary>
+        private const string StateContentLeftDirection = "LeftDirection";
+
+        /// <summary>
+        /// Key of the VisualState when expander direction is set to Down
+        /// </summary>
+        private const string StateContentDownDirection = "DownDirection";
+
+        /// <summary>
+        /// Key of the VisualState when expander direction is set to Right
+        /// </summary>
+        private const string StateContentRightDirection = "RightDirection";
+
+        /// <summary>
+        /// Key of the VisualState when expander direction is set to Up
+        /// </summary>
+        private const string StateContentUpDirection = "UpDirection";
+
+        /// <summary>
+        /// Key of the UI Element that contains the content of the entire control
+        /// </summary>
+        private const string RootGridPart = "PART_RootGrid";
+
+        /// <summary>
+        /// Key of the UI Element that contains the content of the LayoutTransformer (of the expander button)
+        /// </summary>
+        private const string LayoutTransformerPart = "PART_LayoutTransformer";
     }
 }

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

@@ -37,6 +37,12 @@ public partial class Expander
         public static readonly DependencyProperty IsExpandedProperty =
             DependencyProperty.Register(nameof(IsExpanded), typeof(bool), typeof(Expander), new PropertyMetadata(false, OnIsExpandedPropertyChanged));
 
+        /// <summary>
+        /// Identifies the <see cref="ExpandDirection"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty ExpandDirectionProperty =
+            DependencyProperty.Register(nameof(ExpandDirection), typeof(ExpandDirection), typeof(Expander), new PropertyMetadata(ExpandDirection.Down, OnExpandDirectionChanged));
+
         /// <summary>
         /// Gets or sets a value indicating whether the Header of the control.
         /// </summary>
@@ -64,6 +70,15 @@ public bool IsExpanded
             set { SetValue(IsExpandedProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether the Expand Direction of the control.
+        /// </summary>
+        public ExpandDirection ExpandDirection
+        {
+            get { return (ExpandDirection)GetValue(ExpandDirectionProperty); }
+            set { SetValue(ExpandDirectionProperty, value); }
+        }
+
         private static void OnIsExpandedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var expander = d as Expander;
@@ -78,5 +93,17 @@ private static void OnIsExpandedPropertyChanged(DependencyObject d, DependencyPr
                 expander.CollapseControl();
             }
         }
+
+        private static void OnExpandDirectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var expander = d as Expander;
+            var previousExpandDirection = (ExpandDirection)e.OldValue;
+            var newExpandDirection = (ExpandDirection)e.NewValue;
+
+            if (previousExpandDirection != newExpandDirection)
+            {
+                expander.OnExpandDirectionChanged();
+            }
+        }
     }
 }

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

@@ -22,9 +22,15 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     /// <summary>
     /// The <see cref="Expander"/> control allows user to show/hide content based on a boolean state
     /// </summary>
-    [TemplateVisualState(Name = StateContentExpanded, GroupName = GroupContent)]
-    [TemplateVisualState(Name = StateContentCollapsed, GroupName = GroupContent)]
+    [TemplateVisualState(Name = StateContentExpanded, GroupName = ExpandedGroupStateContent)]
+    [TemplateVisualState(Name = StateContentCollapsed, 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))]
     [ContentProperty(Name = "Content")]
     public partial class Expander : ContentControl
     {
@@ -49,6 +55,8 @@ protected override void OnApplyTemplate()
                 button.KeyDown -= ExpanderToggleButtonPart_KeyDown;
                 button.KeyDown += ExpanderToggleButtonPart_KeyDown;
             }
+
+            OnExpandDirectionChanged();
         }
 
         protected virtual void OnExpanded(EventArgs args)
@@ -91,5 +99,42 @@ private void CollapseControl()
             VisualStateManager.GoToState(this, StateContentCollapsed, true);
             OnCollapsed(EventArgs.Empty);
         }
+
+        public void OnExpandDirectionChanged()
+        {
+            var button = (ToggleButton)GetTemplateChild(ExpanderToggleButtonPart);
+
+            if (button == null)
+            {
+                return;
+            }
+
+            switch (ExpandDirection)
+            {
+                case ExpandDirection.Left:
+                    VisualStateManager.GoToState(this, StateContentLeftDirection, true);
+                    VisualStateManager.GoToState(button, StateContentLeftDirection, true);
+                    break;
+                case ExpandDirection.Down:
+                    VisualStateManager.GoToState(this, StateContentDownDirection, true);
+                    VisualStateManager.GoToState(button, StateContentDownDirection, true);
+                    break;
+                case ExpandDirection.Right:
+                    VisualStateManager.GoToState(this, StateContentRightDirection, true);
+                    VisualStateManager.GoToState(button, StateContentRightDirection, true);
+                    break;
+                case ExpandDirection.Up:
+                    VisualStateManager.GoToState(this, StateContentUpDirection, true);
+                    VisualStateManager.GoToState(button, StateContentUpDirection, true);
+                    break;
+            }
+
+            // Re-execute animation on expander toggle button (to set correct arrow rotation)
+            VisualStateManager.GoToState(button, "Normal", true);
+            if (button.IsChecked.HasValue && button.IsChecked.Value)
+            {
+                VisualStateManager.GoToState(button, "Checked", true);
+            }
+        }
     }
 }