我有一个Xamarin Forms跨平台应用程序（iOS和Android），在其中一个屏幕上我想要一个包含详细信息的列表：
Heading 1
Detail 1
Detail 2
Detail 3
Heading 2
Detail 1
Heading 3
Detail 1
Detail 2
如您所见，每个 Headers 下的详细信息量是可变的 .
我希望页面首先只显示 Headers ：
Heading 1
Heading 2
Heading 3
然后，当用户按下 Headers 时，将显示该特定 Headers 的详细信息 . 很标准的东西 .
我已经尝试了几种不同的方法来实现这一点，对我来说唯一可行的方法是使用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添加到 Headers 标签，当点击时，我切换细节标签的IsVisible值 . 有用！
我唯一不喜欢的是，没有过渡 . 我点击 Headers 标签和BAM显示细节标签（正确地按下所有以下标签以为自己腾出空间） . 我想要一个动画，这样当我点击 Headers 时， Headers “慢慢”下方的空间会打开以显示细节 .
当我在线阅读动画时，一种可能性是将细节标签的HeightRequest设置为零（而不是用IsVisible = false隐藏它们），然后创建一个“慢慢”将HeightRequest从零更改为实际高度的动画 . 标签 . 这就是我遇到问题的地方 .
我无法弄清楚如何让Xamarin告诉我“细节”标签的高度 .
如果我在创建它之后立即检查我的详细信息标签的Height和HeightRequest属性，它们都是-1（没有大惊喜） . 如果我在单击 Headers 时检查这两个属性，它们仍然是-1 . 我发现获取细节标签高度的唯一方法是将细节标签设置为可见，在我的堆栈布局上调用ForceLayout（），存储细节标签高度，然后再次将细节标签设置为不可见 . 问题在于，当我这样做时，我有时会看到细节标签瞬间可见 .
什么是实现我想要的UI的最佳/推荐方式？
3 回答
您可以使用动画API . 阅读有关它的博客 - Creating Animations with Xamarin.Forms .
特别是对于您的场景，您可以使用FadeTo方法为Visual Element的Opacity属性设置动画 .
例如：
有关更多信息，请参阅Animation .
在你的情况下，我建议的方法是显示标签，将标签的不透明度设置为0，然后使其可见，然后使用FadeTo使不透明度为1.使用相反的方法隐藏标签，通过FadeTo设置不透明度0 ，然后将IsVisible设置为false .
如果我理解你的问题，你唯一需要的就是避免标签上的闪光，如果是这种情况，那么你可以将不透明度设置为0，这样在再次设置不透明度之前标签将不可见 . 1 .
我建议你制作一个 custom XF control （用作项目DataTemplate）如下：
2个垂直部分：
Headers 部分（A）（单击它时将显示第二部分）
第二部分是'Listview'控制（B） that is empty at the beginning
单击（A）时：
会显示（B）
它将开始用您的详细信息元素填充（B）
The trick in my mind 是实现一个方法，逐项填充列表视图（B）（从视图模型中获取它们） with some delay （几毫秒）每次插入之间也可能同时填充'fadeTo'效果 .
你可以在这里看到我的意思（ see the "Fade" section ）：Insert / fade list item effect sample in HTML
您可以根据需要改进模板，例如将两个部分嵌入“边框”中，以实现图形分离......
告诉我，如果不清楚，你需要的只是时间:)也许如果你准备好了，你可以尝试制作原生控件/动画......