c# - Xamarin Forms 可折叠 StackLayout

Question

我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。

我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，因为它会立即增长并且我正在将效果应用到其他元素。

你有什么建议吗，我正在使用 xamarin Forms？

XAML

<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Sample.MyStackLayout" >

  <StackLayout x:Name="TopLayout">
    <StackLayout Orientation="Horizontal">
      <Label Text="some text" VerticalOptions="Center" HorizontalOptions="StartAndExpand"  />
      <Label Text="123" VerticalOptions="Center" HorizontalOptions="End" FontSize="Large" />
    </StackLayout>

    <BoxView Color="Black" HeightRequest="1" />

    <StackLayout Orientation="Horizontal">
      <Label Text="some text" VerticalOptions="Center" HorizontalOptions="StartAndExpand"  />
      <Label Text="123" VerticalOptions="Center" HorizontalOptions="End" FontSize="Large" />
    </StackLayout>

    <StackLayout Orientation="Horizontal">
      <Label Text="some text" VerticalOptions="Center" HorizontalOptions="StartAndExpand"  />
      <Label Text="123" VerticalOptions="Center" HorizontalOptions="End" FontSize="Large" />
    </StackLayout>

    <Button x:Name="btn" Text="Button" Clicked="btnClicked" />
  </StackLayout>


  <StackLayout x:Name="MoreDetails" IsVisible="False">
    <Label Text="some text 1"></Label>
    <Label Text="some text 2"></Label>
    <Label Text="some text 3"></Label>
    <Label Text="some text 4"></Label>
    <Label Text="some text 5"></Label>
    <Label Text="some text 6"></Label>
    <Label Text="some text 7"></Label>
    <Label Text="some text 8"></Label>
  </StackLayout>
</StackLayout>

代码

public AccountInfo()
{
    InitializeComponent();
}

bool isExpanded = false;
protected async void btnClicked(object sender, EventArgs e)
{
    if (isExpanded)
    {
        await MoreDetails.FadeTo(0);
        MoreDetails.IsVisible = !isExpanded;
    }
    else
    {
        MoreDetails.IsVisible = !isExpanded;
        await MoreDetails.FadeTo(1);
    }

    isExpanded = !isExpanded;
}

Answer 1

您可以创建一个自定义控件来为您执行此操作。如果您使用 Xaml 创建“ExpandableView”内容 View ，例如:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyProject.CustomControls.ExpandableView">
    <StackLayout  x:Name="Layout" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="SummaryRegion"/>               
        <StackLayout x:Name="DetailsRegion" IsVisible="False"/>
    </StackLayout>
</ContentView>

然后像这样连接 .cs 类:

    public partial class ExpandableView: ContentView
    {

        private TapGestureRecognizer _tapRecogniser;
        private StackLayout _summary;
        private StackLayout _details;

        public ExpandableView()
        {
            InitializeComponent();
            InitializeGuestureRecognizer();
            SubscribeToGuestureHandler();    
        }

        private void InitializeGuestureRecognizer()
        {
            _tapRecogniser= new TapGestureRecognizer();
            SummaryRegion.GestureRecognizers.Add(_tapRecogniser);
        }

        private void SubscribeToGuestureHandler()
        {
            _tapRecogniser.Tapped += TapRecogniser_Tapped;
        }

        public virtual StackLayout Summary
        {
            get { return _summary; }
            set
            {
                _summary = value;    
                SummaryRegion.Children.Add(_summary);
                OnPropertyChanged();
            }
        }

        public virtual StackLayout Details
        {
           get { return _details; }
           set 
           {
              _details = value;
              DetailsRegion.Children.Add(_details);
              OnPropertyChanged();
           }
       }

       private void TapRecogniser_Tapped(object sender, EventArgs e)
    {
        if (DetailsRegion.IsVisible)
        {
            DetailsRegion.IsVisible = false;
        }
        else
        {
             DetailsRegion.IsVisible = true;
        }
    }

然后像这样在你的 xaml 中定义它:

                     <CustomControls:ExpandableView>
                            <CustomControls:ExpandableView.Summary>
                                   <StackLayout>
                                    YOUR STUFF HERE 
                                </StackLayout>
                            </CustomControls:ExpandableView.Summary>
                            <CustomControls:ExpandableView.Details>
                                <StackLayout>
                                    YOUR STUFF HERE 
                                </StackLayout>
                            </CustomControls:ExpandableView.Details>
                        </CustomControls:ExpandableView>

其中 CustomControls 是对存在 ExpandableView 的命名空间的引用。

您可以通过添加诸如展开时的动画、展开时突出显示“摘要区域”等内容来进一步扩展它...