Question

我有一个Xamarin Forms跨平台应用程序（iOS和Android），在其中一个屏幕上我想要一个包含详细信息的列表：

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显示细节标签（正确地按下所有以下标签以为自己腾出空间）。我想要一个动画，这样当我点击标题时，标题下方的空间会慢慢地＃34;打开以揭示细节。

当我在线阅读动画时，一种可能性是将细节标签的HeightRequest设置为零（而不是用IsVisible = false隐藏它们），然后创建一个慢慢地＆＃34;将HeightRequest从零更改为标签的实际高度。这就是我遇到问题的地方。

我无法弄清楚如何让Xamarin告诉我我的＆＃34;详细信息＆＃34;标签

如果我在创建它之后立即检查我的详细信息标签的Height和HeightRequest属性，它们都是-1（没有什么大惊喜）。如果我在单击标题时检查这两个属性，它们仍然是-1。我发现获取细节标签高度的唯一方法是将细节标签设置为可见，在我的堆栈布局上调用ForceLayout（），存储细节标签高度，然后再次将细节标签设置为不可见。问题在于，当我这样做时，我有时会看到细节标签瞬间可见。

完成我想要的用户界面的最佳/推荐方法是什么？

Answer 1

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

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

例如：

await image.FadeTo (1, 4000);

有关详细信息，请参阅Animation。

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

Answer 2

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

Answer 3

我建议你制作一个自定义XF控件（用作项目DataTemplate），如下所示：

2个垂直部分：

标题部分（A）（当您单击它时将显示第二部分）
第二部分是'Listview'控件（B）在开头是空的

点击（A）：

会显示（B）
它将开始使用您的详细信息元素填充（B）

我想到的诀窍是实现一个逐项填充列表视图（B）的方法（从视图模型中获取它们）有一些延迟（一些毫微秒）每次插入之间也可能同时出现'fadeTo'效应。

你可以在这里看到我的意思（参见“淡入淡出”部分）： Insert / fade list item effect sample in HTML

您可以根据需要改进模板，例如将两个部分嵌入“边框”中，以实现图形分离......

告诉我，如果不清楚，你需要的只是时间:) 也许如果你准备好了，你可以尝试制作原生控件/动画......

Xamarin表单 - 如何在StackLayout中显示/隐藏项目的动画？

3 个答案: