Expander control

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -238,6 +238,7 @@
     <Content Include="SamplePages\BladeView\BladeView.png" />
     <Content Include="SamplePages\Blur\BlurBehavior.png" />
     <Content Include="SamplePages\DropShadowPanel\DropShadowPanel.png" />
+    <Content Include="SamplePages\Expander\Expander.png" />
     <Content Include="SamplePages\FadeHeader\FadeHeaderBehavior.png" />
     <Content Include="SamplePages\DropShadowPanel\Trex.png" />
     <Content Include="SamplePages\DropShadowPanel\Unicorn.png" />
@@ -316,6 +317,7 @@
     <Content Include="SamplePages\Blur\BlurBehaviorCode.bind" />
     <Content Include="SamplePages\Blur\BlurBehaviorXaml.bind" />
     <Content Include="SamplePages\Offset\OffsetBehaviorXaml.bind" />
+    <Content Include="SamplePages\Expander\ExpanderXaml.bind" />
     <Content Include="SamplePages\Fade\FadeBehaviorXaml.bind" />
     <Content Include="SamplePages\Scale\ScaleBehaviorXaml.bind" />
     <Content Include="SamplePages\Rotate\RotateBehaviorXaml.bind" />
@@ -388,6 +390,9 @@
     <Compile Include="SamplePages\DropShadowPanel\DropShadowPanelPage.xaml.cs">
       <DependentUpon>DropShadowPanelPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\Expander\ExpanderPage.xaml.cs">
+      <DependentUpon>ExpanderPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\Facebook Service\FacebookPhotoTemplateSelector.cs" />
     <Compile Include="Controls\CodeRenderer\CodeRenderer.Properties.cs" />
     <Compile Include="Controls\CodeRenderer\CodeRenderer.cs" />
@@ -604,6 +609,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="SamplePages\Expander\ExpanderPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\Microsoft Translator Service\MicrosoftTranslatorPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

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

@@ -0,0 +1,37 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ExpanderPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <StackPanel Margin="20">
+            <controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10" 
+                               Header="This is the header - expander 1"
+                               IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}">
+                <Grid Height="250" Background="{StaticResource Brush-Grey-01}">
+                    <TextBlock HorizontalAlignment="Center" 
+                               TextWrapping="Wrap" 
+                               Text="This is the content"
+                               VerticalAlignment="Center"
+                               Style="{StaticResource HeaderTextBlockStyle}" />
+                </Grid>
+            </controls:Expander>
+
+            <controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0" 
+                               Header="This is the header - expander 2"
+                               IsExpanded="{Binding Path=IsExpanded2.Value, Mode=TwoWay}">
+                <Grid Height="250" Background="{StaticResource Brush-Grey-02}">
+                    <TextBlock HorizontalAlignment="Center" 
+                               TextWrapping="Wrap" 
+                               Text="This is the content" 
+                               VerticalAlignment="Center" 
+                               Style="{StaticResource HeaderTextBlockStyle}" />
+                </Grid>
+            </controls:Expander>
+        </StackPanel>
+    </Grid>
+</Page>

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

@@ -0,0 +1,44 @@
+// ******************************************************************
+// 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.
+// ******************************************************************
+
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.Toolkit.Uwp.SampleApp.Models;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the Expander control.
+    /// </summary>
+    public sealed partial class ExpanderPage : Page
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ExpanderPage"/> class.
+        /// </summary>
+        public ExpanderPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ExpanderPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <StackPanel Margin="20">
+      <controls:Expander x:Name="Expander1" VerticalAlignment="Top" Margin="0,0,0,10" 
+                               Header="This is the header - expander 1"
+                               IsExpanded="@[IsExpanded1:Bool:False]">
+        <Grid Height="250" Background="#FFF5F1D9">
+          <TextBlock HorizontalAlignment="Center"
+                     TextWrapping="Wrap"
+                     Text="This is the content"
+                     VerticalAlignment="Center"
+                     Style="{StaticResource HeaderTextBlockStyle}" />
+        </Grid>
+      </controls:Expander>
+
+      <controls:Expander x:Name="Expander2" VerticalAlignment="Top" Margin="0" 
+                               Header="This is the header - expander 2"
+                               IsExpanded="@[IsExpanded2:Bool:True]">
+        <Grid Height="250" Background="#FFD9F1F5">
+          <TextBlock HorizontalAlignment="Center"
+                     TextWrapping="Wrap"
+                     Text="This is the content"
+                     VerticalAlignment="Center"
+                     Style="{StaticResource HeaderTextBlockStyle}" />
+        </Grid>
+      </controls:Expander>
+    </StackPanel>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -159,6 +159,15 @@
         "Icon": "/SamplePages/TextBoxMask/TextBoxMask.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/dev/docs/controls/TextBoxMask.md"
       },
+      {
+        "Name": "Expander",
+        "Type": "ExpanderPage",
+        "About": "Expander control allows user to show/hide content based on a boolean state.",
+        "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/Expander",
+        "XamlCodeFile": "ExpanderXaml.bind",
+        "Icon": "/SamplePages/Expander/Expander.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/dev/docs/controls/Expander.md"
+      }, 
       {
         "Name": "TileControl",
         "Type": "TileControlPage",

Microsoft.Toolkit.Uwp.SampleApp/project.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "Microsoft.Graph": "1.1.1",
     "Microsoft.NETCore.UniversalWindowsPlatform": "5.1.0",
     "Microsoft.Xaml.Behaviors.Uwp.Managed": "1.1.0",
     "Newtonsoft.Json": "9.0.1",

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

@@ -0,0 +1,45 @@
+// ******************************************************************
+// 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>
+    /// The <see cref="Expander"/> control allows user to show/hide content based on a boolean state
+    /// </summary>
+    public partial class Expander
+    {
+        /// <summary>
+        /// Key of the VisualStateGroup that open/close content
+        /// </summary>
+        public const string GroupContent = "ExpandedStates";
+
+        /// <summary>
+        /// Key of the VisualState when content is expanded
+        /// </summary>
+        public const string StateContentExpanded = "Expanded";
+
+        /// <summary>
+        /// Key of the VisualState when content is collapsed
+        /// </summary>
+        public const string StateContentCollapsed = "Collapsed";
+
+        /// <summary>
+        /// Key of the UI Element that toggle IsExpanded property
+        /// </summary>
+        public 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";
+    }
+}

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

@@ -0,0 +1,32 @@
+// ******************************************************************
+// 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.
+// ******************************************************************
+
+using System;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// The <see cref="Expander"/> control allows user to show/hide content based on a boolean state
+    /// </summary>
+    public partial class Expander
+    {
+        /// <summary>
+        /// Fires when the expander is opened
+        /// </summary>
+        public event EventHandler Expanded;
+
+        /// <summary>
+        /// Fires when the expander is closed
+        /// </summary>
+        public event EventHandler Collapsed;
+    }
+}

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

@@ -0,0 +1,82 @@
+// ******************************************************************
+// 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.
+// ******************************************************************
+
+using Windows.UI.Xaml;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// The <see cref="Expander"/> control allows user to show/hide content based on a boolean state
+    /// </summary>
+    public partial class Expander
+    {
+        /// <summary>
+        /// Identifies the <see cref="Header"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty HeaderProperty =
+            DependencyProperty.Register(nameof(Header), typeof(string), typeof(Expander), new PropertyMetadata(null));
+
+        /// <summary>
+        /// Identifies the <see cref="HeaderTemplate"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty HeaderTemplateProperty =
+            DependencyProperty.Register(nameof(HeaderTemplate), typeof(DataTemplate), typeof(Expander), new PropertyMetadata(null));
+
+        /// <summary>
+        /// Identifies the <see cref="IsExpanded"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty IsExpandedProperty =
+            DependencyProperty.Register(nameof(IsExpanded), typeof(bool), typeof(Expander), new PropertyMetadata(false, OnIsExpandedPropertyChanged));
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the Header of the control.
+        /// </summary>
+        public string Header
+        {
+            get { return (string)GetValue(HeaderProperty); }
+            set { SetValue(HeaderProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the HeaderTemplate of the control.
+        /// </summary>
+        public DataTemplate HeaderTemplate
+        {
+            get { return (DataTemplate)GetValue(HeaderTemplateProperty); }
+            set { SetValue(HeaderTemplateProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the content of the control is opened/visible or closed/hidden.
+        /// </summary>
+        public bool IsExpanded
+        {
+            get { return (bool)GetValue(IsExpandedProperty); }
+            set { SetValue(IsExpandedProperty, value); }
+        }
+
+        private static void OnIsExpandedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var expander = d as Expander;
+
+            bool isExpanded = (bool)e.NewValue;
+            if (isExpanded)
+            {
+                expander.ExpandControl();
+            }
+            else
+            {
+                expander.CollapseControl();
+            }
+        }
+    }
+}