Xamarin Forms 접을 수있는 StackLayout

Question

접을 수있는 StackLayout을 구현하려고합니다. 사용자가 버튼을 클릭 할 때마다 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가있는 네임 스페이스에 대한 참조입니다.

등 확장 할 때 당신은 '요약 영역'을 강조, 이러한 확장에 애니메이션으로 일을 추가하여 더욱 확장 할 수 있습니다

...