Xamarin 表單可折疊 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”內容視圖，例如：

<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 的命名空間的引用。

您可以通過添加諸如展開時的動畫、展開時突出顯示“摘要區域”等內容來進一步擴展它...

Answer 2

在您的 APP 類中，添加標志以啟用實驗性功能：

Device.SetFlags(new string[] { "Expander_Experimental" });

然后，您可以像這樣使用它：

<Expander>
<Expander.Header>
    <StackLayout>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="AUTO"/>
                <RowDefinition Height="AUTO"/>
                <RowDefinition Height="AUTO"/>
                <RowDefinition Height="AUTO"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Text="One label" />
            <Label Grid.Row="1" Text="One label" />
            <Label Grid.Row="2" Text="One label" />

            <Label Grid.Row="0" Grid.Column="1" Text="123" />
            <Label Grid.Row="1" Grid.Column="1" Text="123" />
            <Label Grid.Row="2" Grid.Column="1" Text="123" />

            <Image x:Name="Your_Image_DropDown" Grid.Row="3" 
             Grid.ColumnSpan="2" Source="YOUR IMAGE LINK/SOURCE HERE" 
             HorizontalOptions="Center"/>


        </Grid>
    </StackLayout>
</Expander.Header>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="AUTO"/>
        <RowDefinition Height="AUTO"/>
        <RowDefinition Height="AUTO"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Text="One label" />
    <Label Grid.Row="1" Text="One label" />
    <Label Grid.Row="2" Text="One label" />

    <Label Grid.Row="0" Grid.Column="1" Text="123" />
    <Label Grid.Row="1" Grid.Column="1" Text="123" />
    <Label Grid.Row="2" Grid.Column="1" Text="123" />

  </Grid>
  </Expander>

有關更多信息https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/expander

Answer 3

將除 MoreDetails 之外的所有內容包裝到另一個堆棧布局中，並將其命名為“TopLayout”

  void ShowMore(){
    TopLayout.TranslateTo(0, -TopLayout.Bounds.Height, 300,  Easing.Linear);
    MoreDetails.LayoutTo(new Rectangle(0, 0, MoreDetails.Bounds.Width, MoreDetails.Bounds.Height + TopLayout.Bounds.Height), 300, Easing.Linear);
    }

    void ShowLess(){
    TopLayout.TranslateTo(0, 0, 300,  Easing.Linear);
    MoreDetails.LayoutTo(new Rectangle(0, MoreDetails.Bounds.Height, MoreDetails.Bounds.Width, MoreDetails.Bounds.Height - MoreDetails.Bounds.Height), 300, Easing.Linear);
    }

100 - 這是你的位移值

作為獎勵：

MoreLessImage.RotateXTo(180, Duration, TargetEasing); 

你可以像這樣改變你的按鈕來動畫 ShowMore/ShowLess 圖像