Xamarin Forms Collapsable StackLayout

Question

Ich versuche eine Art kollabierbarer StackLayout zu implementieren. Mit jedem Klick auf den Button wird das Stacklayout erweitert oder reduziert, um weitere Details anzuzeigen/auszublenden.

konnte ich mehr/weniger dies mit dem folgenden Code erreichen, aber es sieht nicht richtig aus, und die Wirkung ist nicht groß, weil es sofort wächst und ich bin Anwendung die Wirkung anderes Element.

Haben Sie irgendwelche Vorschläge, dies zu tun, verwende ich 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> 

-Code

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

Wickeln Sie alles, aber MoreDetails zu einem anderen Stapel-Layout mit dem Namen "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 - hier ist dein displ acement Wert

Als Bonus:

MoreLessImage.RotateXTo(180, Duration, TargetEasing); 

Sie Ihre Taste wie diese morphen Showmore/ShowLess Bild

Answer 2

Sie können erstellen eine benutzerdefinierte Steuerelement, das tut dies für Sie zu animieren.

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

und verdrahten die CS- Klasse wie folgt::

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; 
     } 
    } 

und definieren Sie es in Ihrem XAML wie 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> 

Falls Sie ein 'ExpandableView' Seiten mit XAML wie erstellen

Dabei ist CustomControls der Verweis auf den Namespace, in dem ExpandableView vorhanden ist.

Sie diese weiter auszubauen, markieren Sie die ‚Zusammenfassung Region‘, wenn erweitert etc ...