Expander control

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

@@ -236,6 +236,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" />
@@ -309,6 +310,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" />
@@ -369,6 +371,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" />
@@ -562,6 +567,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </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,60 @@
+// ******************************************************************
+// 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();
+        }
+
+        /// <summary>
+        /// Invoked when the Page is loaded and becomes the current source of a parent Frame.
+        /// </summary>
+        /// <param name="e">Event data that can be examined by overriding code. The event data is representative of the pending navigation that will load the current Page. Usually the most relevant property to examine is Parameter.</param>
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            base.OnNavigatedTo(e);
+
+            var propertyDesc = e.Parameter as PropertyDescriptor;
+
+            if (propertyDesc != null)
+            {
+                DataContext = propertyDesc.Expando;
+            }
+        }
+    }
+}

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

@@ -124,6 +124,14 @@
         "XamlCodeFile": "TextBoxMask.bind",
         "Icon": "/SamplePages/TextBoxMask/TextBoxMask.png"
       },
+      {
+        "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"
+      }, 
       {
         "Name": "MosaicControl",
         "Type": "MosaicControlPage",

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,27 @@
+// ******************************************************************
+// 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
+    {
+        public const string GroupContent = "ExpandedStates";
+        public const string StateContentExpanded = "Expanded";
+        public const string StateContentCollapsed = "Collapsed";
+
+        public const string ExpanderToggleButtonPart = "PART_ExpanderToggleButton";
+        public const string MainContentRowPart = "PART_MainContentRow";
+    }
+}

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,64 @@
+// ******************************************************************
+// 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
+    {
+        public static readonly DependencyProperty HeaderProperty =
+            DependencyProperty.Register(nameof(Header), typeof(string), typeof(Expander), new PropertyMetadata(null));
+
+        public static readonly DependencyProperty HeaderTemplateProperty =
+            DependencyProperty.Register(nameof(HeaderTemplate), typeof(DataTemplate), typeof(Expander), new PropertyMetadata(null));
+
+        public static readonly DependencyProperty IsExpandedProperty =
+            DependencyProperty.Register(nameof(IsExpanded), typeof(bool), typeof(Expander), new PropertyMetadata(false, OnIsExpandedPropertyChanged));
+
+        public string Header
+        {
+            get { return (string)GetValue(HeaderProperty); }
+            set { SetValue(HeaderProperty, value); }
+        }
+
+        public DataTemplate HeaderTemplate
+        {
+            get { return (DataTemplate)GetValue(HeaderTemplateProperty); }
+            set { SetValue(HeaderTemplateProperty, value); }
+        }
+
+        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();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,57 @@
+// ******************************************************************
+// 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 Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Markup;
+
+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)]
+    [TemplatePart(Name = ExpanderToggleButtonPart, Type = typeof(ToggleButton))]
+    [ContentProperty(Name = "Content")]
+    public partial class Expander : ContentControl
+    {
+        public Expander()
+        {
+            DefaultStyleKey = typeof(Expander);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            if (!IsExpanded)
+            {
+                VisualStateManager.GoToState(this, StateContentCollapsed, false);
+            }
+        }
+
+        private void ExpandControl()
+        {
+            VisualStateManager.GoToState(this, StateContentExpanded, true);
+            Expanded?.Invoke(this, new EventArgs());
+        }
+
+        private void CollapseControl()
+        {
+            VisualStateManager.GoToState(this, StateContentCollapsed, true);
+            Collapsed?.Invoke(this, new EventArgs());
+        }
+    }
+}