Xamarin Forms Custom Expander

最近在使用ListView 分组展示数据需要用到折叠效果，通过清空对象集合实现折叠，恢复集合元素实现展开效果。在安卓和苹果大部分机型可以正常展示，但是在iphone 7 和iphone6s 有折叠后不能正常展开的异常。

正是这个异常，决定自己写一个Expander控件来处理，代码走起！！！

 public class Expander : StackLayout
    {
        #region BindablePropery
        public static readonly BindableProperty IsExpandProperty = BindableProperty.Create(nameof(IsExpand), typeof(bool), typeof(Expander), false, propertyChanged: (bo, oldVale, newVale) =>
        {
            var control = bo as Expander;
            control.IsExpand = (bool)newVale;
            control.ExpandContent.IsVisible = control.IsExpand;

        });
        public bool IsExpand
        {
            set { SetValue(IsExpandProperty, value); }
            get { return (bool)GetValue(IsExpandProperty); }
        }
        public static readonly BindableProperty CanExpandProperty = BindableProperty.Create(nameof(CanExpand), typeof(bool), typeof(Expander), true, propertyChanged: (bo, oldVale, newVale) =>
        {
            var control = bo as Expander;
            control.CanExpand = (bool)newVale;

        });
        public bool CanExpand
        {
            set { SetValue(CanExpandProperty, value); }
            get { return (bool)GetValue(CanExpandProperty); }
        }

        public static readonly BindableProperty HeaderTemplateProperty = BindableProperty.Create(nameof(HeaderTemplate), typeof(ControlTemplate), typeof(Expander), null, propertyChanged: (bo, oldVale, newVale) =>
        {
            var control = bo as Expander;
            control.HeaderTemplate = (ControlTemplate)newVale;
            control.HeaderContent.ControlTemplate = control.HeaderTemplate;

        });

        public ControlTemplate HeaderTemplate
        {
            set { SetValue(HeaderTemplateProperty, value); }
            get { return (ControlTemplate)GetValue(HeaderTemplateProperty); }
        }

        public static readonly BindableProperty ExpandTemplateProperty = BindableProperty.Create(nameof(ExpandTemplate), typeof(ControlTemplate), typeof(Expander), null, propertyChanged: (bo, oldVale, newVale) =>
        {
            var control = bo as Expander;
            control.ExpandTemplate = (ControlTemplate)newVale;
            control.ExpandContent.ControlTemplate = control.ExpandTemplate;

        });

        public ControlTemplate ExpandTemplate
        {
            set { SetValue(ExpandTemplateProperty, value); }
            get { return (ControlTemplate)GetValue(ExpandTemplateProperty); }
        }

        #endregion
        private ContentView HeaderContent;
        private ContentView ExpandContent;

        public Expander()
        {
            this.Spacing = 5;
            this.Orientation = StackOrientation.Vertical;
            this.HorizontalOptions = LayoutOptions.FillAndExpand;
            Init();
        }

        private void Init()
        {
            HeaderContent = new ContentView();
            ExpandContent = new ContentView();
            ExpandContent.IsVisible = this.IsExpand;

            //set tap to expand
            TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Command = new Command(HeaderTap);
            HeaderContent.GestureRecognizers.Add(tapGestureRecognizer);

            this.Children.Add(HeaderContent);
            this.Children.Add(ExpandContent);
        }

        private void HeaderTap()
        {
            if (this.CanExpand)
                this.IsExpand = !this.IsExpand;
        }
    }

设计思路分为两步：Expander Header +Expander Content 两个控件模板，之所以用控件模板是便于DIY不同的布局，有需要的添加折叠展开图片的可以在控件模板中实现。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:local="clr-namespace:AppTest.Control"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppTest.MainPage" x:Name="this">
    <ContentPage.Resources>
       
        <ControlTemplate x:Key="headerTemplate">
            <ContentView BindingContext="{TemplateBinding BindingContext}">
                <!--your view-->
            </ContentView >
        </ControlTemplate>
        <ControlTemplate x:Key="expandTemplate">
            <ContentView BindingContext="{TemplateBinding BindingContext}">
                 <!--your view-->
            </ContentView >
        </ControlTemplate>
    </ContentPage.Resources>

    <ScrollView>
        <StackLayout Margin="10">
         <local:Expander HeaderTemplate="{StaticResource headerTemplate}" ExpandTemplate="{StaticResource expandTemplate}">

            </local:Expander>
        </StackLayout>
    </ScrollView>

</ContentPage>