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所在的命名空间的引用。

可以扩大时等进一步加入的东西，如在扩大的动画扩大这一点，突出“摘要地区” ......