Xamarin Forms Collapsable StackLayout

Question

私は折りたたみ可能なStackLayoutの種類を実装しようとしています。 ユーザがボタンをクリックするたびに、スタックレイアウトを拡大または縮小して詳細を表示/非表示にします。

私は以下のコードでより多く/少なく、これを達成することができましたが、それは右見ていないと、それはすぐに成長し、私が効果を適用していますので、効果は、素晴らしいではありません他の要素。

私はxamarinフォームを使用していますか？

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

は別のスタックレイアウトと名前、それを "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にMoreDetailsが、あなたのすべてを包みます - ここにありますあなたの代理人ボーナスとしてacement値

：

MoreLessImage.RotateXTo(180, Duration, TargetEasing); 

あなたはあなたがあなたのためにこれを行い、カスタムコントロールを作成することができますShowMore/ShowLessイメージ

Answer 2

をアニメーション化するために、このようなあなたのボタンをモーフィングすることができます。

<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ファイルクラス：あなたのようなXAMLで 'ExpandableView' コンテンツビューを作成した場合

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が存在する名前空間への参照です。

あなたは私が何か間違ったことかもしれません申し訳ありません