new expander control

src/Perspex.Controls/Expander.cs

@@ -0,0 +1,69 @@
+using Perspex.Animation;
+using Perspex.Controls.Primitives;
+
+namespace Perspex.Controls
+{
+    public enum ExpandDirection
+    {
+        Down,
+        Up,
+        Left,
+        Right
+    }
+
+    public class Expander : HeaderedContentControl
+    {
+        static Expander()
+        {
+            PseudoClass(ExpandDirectionProperty, d => d == ExpandDirection.Down, ":ExpandDirectionDown");
+            PseudoClass(ExpandDirectionProperty, d => d == ExpandDirection.Up, ":ExpandDirectionUp");
+            PseudoClass(ExpandDirectionProperty, d => d == ExpandDirection.Left, ":ExpandDirectionLeft");
+            PseudoClass(ExpandDirectionProperty, d => d == ExpandDirection.Right, ":ExpandDirectionRight");
+
+            PseudoClass(IsExpandedProperty, ":expanded");
+
+            IsExpandedProperty.Changed.AddClassHandler<Expander>(x => x.OnIsExpandedChanged);
+        }
+
+        protected virtual void OnIsExpandedChanged(PerspexPropertyChangedEventArgs e)
+        {
+            IVisual visualContent = Presenter;
+            if (Content != null && ContentTransition != null && visualContent != null)
+            {
+                bool forward = ExpandDirection == ExpandDirection.Left || ExpandDirection == ExpandDirection.Up;
+                if (IsExpanded)
+                {
+                    ContentTransition.Start(null, visualContent, forward);
+                }
+                else
+                {
+                    ContentTransition.Start(visualContent, null, !forward);
+                }
+            }
+        }
+
+        public static readonly PerspexProperty<bool> IsExpandedProperty = PerspexProperty.Register<Expander, bool>(nameof(IsExpanded), true);
+
+        public bool IsExpanded
+        {
+            get { return GetValue(IsExpandedProperty); }
+            set { SetValue(IsExpandedProperty, value); }
+        }
+
+        public static readonly PerspexProperty<ExpandDirection> ExpandDirectionProperty = PerspexProperty.Register<Expander, ExpandDirection>(nameof(ExpandDirection), ExpandDirection.Down);
+
+        public ExpandDirection ExpandDirection
+        {
+            get { return GetValue(ExpandDirectionProperty); }
+            set { SetValue(ExpandDirectionProperty, value); }
+        }
+
+        public static readonly PerspexProperty<IPageTransition> ContentTransitionProperty = PerspexProperty.Register<Expander, IPageTransition>(nameof(ContentTransition));
+
+        public IPageTransition ContentTransition
+        {
+            get { return GetValue(ContentTransitionProperty); }
+            set { SetValue(ContentTransitionProperty, value); }
+        }
+    }
+}

src/Perspex.Controls/Perspex.Controls.csproj

@@ -44,6 +44,7 @@
     </Compile>
     <Compile Include="Classes.cs" />
     <Compile Include="DockPanel.cs" />
+    <Compile Include="Expander.cs" />
     <Compile Include="Generators\ItemContainer.cs" />
     <Compile Include="HotkeyManager.cs" />
     <Compile Include="INameScope.cs" />

src/Perspex.Themes.Default/DefaultTheme.paml

@@ -23,6 +23,7 @@
   <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.TabStripItem.paml"/>
   <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.TextBox.paml"/>
   <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.ToggleButton.paml"/>
+  <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.Expander.paml"/>
   <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.ToolTip.paml"/>
   <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.TreeView.paml"/>
   <StyleInclude Source="resource://application/Perspex.Themes.Default/Perspex.Themes.Default.TreeViewItem.paml"/>

src/Perspex.Themes.Default/Expander.paml

@@ -0,0 +1,123 @@
+<Styles xmlns="https://github.com/perspex">
+
+  <Style Selector="Expander">
+    <Setter Property="ContentTransition">
+      <Setter.Value>
+        <CrossFade Duration="00:00:00.25" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="Expander[ExpandDirection=Down]">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}">
+          <Grid RowDefinitions="Auto,*">
+            <ToggleButton Name="PART_toggle" Grid.Row="0"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Grid.Row="1"
+                              IsVisible="{TemplateBinding IsExpanded}"
+                              Content="{TemplateBinding Content}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="Expander[ExpandDirection=Up]">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}">
+          <Grid RowDefinitions="*,Auto">
+            <ToggleButton Name="PART_toggle" Grid.Row="1"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Grid.Row="0"
+                              IsVisible="{TemplateBinding IsExpanded}"
+                              Content="{TemplateBinding Content}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="Expander[ExpandDirection=Right]">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}">
+          <Grid ColumnDefinitions="Auto,*">
+            <ToggleButton Name="PART_toggle" Grid.Column="0"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Grid.Column="1"
+                              IsVisible="{TemplateBinding IsExpanded}"
+                              Content="{TemplateBinding Content}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="Expander[ExpandDirection=Left]">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}">
+          <Grid ColumnDefinitions="*,Auto">
+            <ToggleButton Name="PART_toggle" Grid.Column="1"  Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Grid.Column="0"
+                              IsVisible="{TemplateBinding IsExpanded}"
+                              Content="{TemplateBinding Content}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="Expander /template/ ToggleButton#PART_toggle">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderThickness="1">
+          <Grid ColumnDefinitions="Auto,Auto">
+            <Border Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center">
+              <Path Fill="Black"
+                      HorizontalAlignment="Center"
+                      VerticalAlignment="Center"
+                      Data="M 0 2 L 4 6 L 0 10 Z" />
+            </Border>
+            <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center" />
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="Expander /template/ ToggleButton#PART_toggle:pointerover /template/ Border">
+    <Setter Property="BorderBrush" Value="#ffaaaaaa" />
+  </Style>
+  <Style Selector="Expander:ExpandDirectionDown:expanded /template/ ToggleButton#PART_toggle /template/ Path">
+    <Setter Property="RenderTransform">
+      <RotateTransform Angle="90" />
+    </Setter>
+  </Style>
+  <Style Selector="Expander:ExpandDirectionUp:expanded /template/ ToggleButton#PART_toggle /template/ Path">
+    <Setter Property="RenderTransform">
+      <RotateTransform Angle="-90" />
+    </Setter>
+  </Style>
+  <Style Selector="Expander:ExpandDirectionLeft:expanded /template/ ToggleButton#PART_toggle /template/ Path">
+    <Setter Property="RenderTransform">
+      <RotateTransform Angle="180" />
+    </Setter>
+  </Style>
+  <Style Selector="Expander:ExpandDirectionRight /template/ ToggleButton#PART_toggle /template/ Path">
+    <Setter Property="RenderTransform">
+      <RotateTransform Angle="180" />
+    </Setter>
+  </Style>
+  <Style Selector="Expander:ExpandDirectionRight:expanded /template/ ToggleButton#PART_toggle /template/ Path">
+    <Setter Property="RenderTransform">
+      <RotateTransform Angle="0" />
+    </Setter>
+  </Style>
+</Styles>

src/Perspex.Themes.Default/Perspex.Themes.Default.csproj

@@ -143,6 +143,7 @@
     <EmbeddedResource Include="ToolTip.paml">
       <SubType>Designer</SubType>
     </EmbeddedResource>
+    <EmbeddedResource Include="Expander.paml" />
     <None Include="packages.config" />
     <EmbeddedResource Include="PopupRoot.paml">
       <SubType>Designer</SubType>