我想实现一种可折叠的StackLayout。每个用户点击按钮,它展开或折叠堆栈布局以显示/隐藏更多细节。Xamarin Forms Collapsable 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;
}
对不起,我可能做错了什么,但我粘贴代码,并没有奏效如预期。我的想法是删除(隐藏)较低的堆栈布局。 Btw Easing.None在我的Xamarin版本中不存在,所以我使用的是Linear。我也在StackLayout中包装了所有主要内容,所以我有[StackLayout> StackLayout TopLayout和StackLayout ModerDetails] – user1845593
我编辑了我的答案,试试这个 – Greensy
感谢您的帮助,但不编译,TranslateTo采用此参数:double x,double y,uint length = 250,Easing easing = null。顺便说一句,你在ShowMore和ShowLess之后缺少“()” – user1845593