Xamarin形成可折叠的StackLayout [英] Xamarin Forms Collapsable StackLayout

问题描述

我正在尝试实现一种可折叠的StackLayout. 用户单击该按钮的每一个分支，都会扩展或折叠堆栈布局以显示/隐藏更多详细信息.

I'm trying to implement a kind of collapsable StackLayout. Every tine the user clicks the button, it expands or collapse the stacklayout to show/hide more details.

我可以使用下面的代码来实现更多/更少的功能，但是它看起来不正确，效果也不是很好，因为它会立即增长，并且我会将效果应用于其他元素.

I was able to achieve more/less this with the code below, but it doesn't look right and the effect isn't great, because it grows immediately and I'm applying the effect to other element.

您有任何建议要使用我的xamarin Forms吗?

Do you have any suggestions to do this, I'm using 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;
}

推荐答案

您可以创建一个为您执行此操作的自定义控件.如果您使用Xaml创建"ExpandableView"内容视图，例如:

You can create a Custom control that does this for you. If you create an 'ExpandableView' Content View with Xaml like:

<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类:

And wire up the .cs class like so:

    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中对其进行定义，如下所示:

And define it in your xaml like so:

                     <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存在的名称空间的引用.

Where CustomControls is the reference to namespace where the ExpandableView exists.

您可以通过以下方式进一步扩展此功能:在扩展中添加动画，在扩展时突出显示摘要区域"等.

You can expand this further by adding things such as animations on expand, highlight the 'Summary Region' when expanded etc...

这篇关于Xamarin形成可折叠的StackLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！