2016-08-22 99 views
0

我有一个Xamarin形式跨平台应用(iOS和Android),并在屏幕上的一个我想与详细信息列表:Xamarin Forms - 如何在StackLayout中动画显示/隐藏项目?

Heading 1 
    Detail 1 
    Detail 2 
    Detail 3 
Heading 2 
    Detail 1 
Heading 3 
    Detail 1 
    Detail 2 

正如你所看到的,细节下的每个量标题是可变的。

我想要的网页在第一只标题显示:

Heading 1 
Heading 2 
Heading 3 

然后当上一个标题用户印刷机,该特定标题的细节出现。相当标准的东西。

我试过几种不同的方式来得到这个工作,这似乎向我敞开的唯一路径是有StackLayout,我定义了一堆标签:

new StackLayout 
{ 
    Orientation = StackOrientation.Vertical, 
    Children = 
    { 
     new Label { Text = "Heading 1" }, 
     new Label { Text = " Detail 1\n Detail 2\n Detail 3", IsVisible = false }, 
     new Label { Text = "Heading 2" }, 
     new Label { Text = " Detail 1", IsVisible = false }, 
     new Label { Text = "Heading 3" }, 
     new Label { Text = " Detail 1\n Detail 2", IsVisible = false } 
    } 
} 

我再加入一个TapGestureRecognizer到标题标签,点击时,我切换细节标签的IsVisible值。有用!

我不喜欢的唯一的事情就是没有过渡。我点击标题标签和BAM即可看到详细标签(正确按下以下所有标签以为其自身留出空间)。我想要一个动画,以便当我点击标题时,标题下方的空间“缓慢”打开以显示细节。

当我在线阅读动画时,有一种可能性是将详细标签的HeightRequest设置为零(而不是使用IsVisible = false隐藏它们),然后创建一个“缓慢”将HeightRequest从零更改为标签的实际高度。这就是我遇到问题的地方。

我不知道如何让Xamarin告诉我我的“细节”标签的高度。

如果我在创建它之后检查我的细节标签的Height和HeightRequest属性,它们都是-1(没有大惊喜)。如果我点击标题时检查这两个属性,它们仍然是-1。我发现获取细节标签的高度的唯一方法是将细节标签设置为可见,在我的堆栈布局上调用ForceLayout(),存储细节标签高度,然后再次将细节标签设置为不可见。这样做的问题是我有时在看到细节标签闪光灯时会看到瞬间的照片。

什么是最好的/推荐的方式来实现我想要的用户界面?

回答

1

您可以使用动画API。 阅读关于它的博客 - Creating Animations with Xamarin.Forms

特别是对于您的场景,您可以使用FadeTo方法为Visual元素的Opacity属性设置动画。

如:

await image.FadeTo (1, 4000); 

欲了解更多信息,请参阅Animation

在你的情况我建议的方法将是表示标签,标注的不透明度设置为0,则使其可见,然后用FadeTo使不透明度为1 使用相反的隐藏标签,通过FadeTo设置不透明度0,然后将IsVisible设置为false。

0

如果我的理解对不对你的问题,你唯一需要的是避免在标签上的闪光灯,如果是这种情况,那么你可以设置不透明度为0,这样,直到你设置的标签将不可见再次将不透明度设为1.