Xamarin Forms Collapsable 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

包裝你的一切，但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 - 這裏是你的位置acement值

還有一個好處：

MoreLessImage.RotateXTo(180, Duration, TargetEasing); 

，你可以變身像這樣的按鈕進行動畫相冊更多>>暫/ ShowLess圖像

Answer 2

您可以創建，這是否對你的自定義控件。如果您創建使用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"/> 
    </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所在的命名空間的引用。

可以擴大時等進一步加入的東西，如在擴大的動畫擴大這一點，突出「摘要地區」 ......