Xamarin.Forms TabbedPage 中的下拉菜单

Question

我有一个这样的标签页设计，

标签页已经设置好了，但无论如何我都想不出要实现下拉菜单并向标签栏添加一个额外的按钮（图像中的过滤器按钮）。标签页的自定义渲染器可能会起作用，但我希望作为最后的手段，请帮助我。

Answer 1

这可以通过AbsoluteLayout 和一些高度计算来完成。无需自定义渲染器。

将您的TabbedPage.Content 中的所有内容放入AbsoluteLayout，然后放入StackLayout（或您正在使用的其他Layout）。然后添加一个Frame（我用的是Frame，但是你可以用其他的View）。

<AbsoluteLayout x:Name="absoluteLayout">
     <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
         //other layouts and elements
     </StackLayout>
     <Frame AbsoluteLayout.LayoutFlags="WidthProportional" AbsoluteLayout.LayoutBounds="0,0,1,A" IsVisible="False">
         //your checkboxes and labels
     </Frame>
</AbsoluteLayout>

在Frame属性AbsoluteLayout.LayoutBounds="0,0,1,A"我写了A，但是你必须在那里写一个数字：

• A = 下拉菜单的高度

如果在初始化 XAML 时不知道高度，也可以在代码中设置：

AbsoluteLayout.SetLayoutBounds(frame, new Rectangle(0, 0, 1, height)); // X,Y,Width,Height

解释和更多关于标志的解释here。很容易理解，但是如果你有问题，this video 帮助了我。

现在您的 DropDown 已准备就绪。当您希望它显示时，只需设置可见性即可。

frame.IsVisisble = true;

提示 1：您甚至可以使用 Animations 为它设置上下动画。例如，this peace of code 会这样做。

提示2：如果您在StackLayout 中添加GestureRecognizers，用户可以在下拉菜单周围单击，它会隐藏。

XAML：

<StackLayout.GestureRecognizers>
     <TapGestureRecognizer Tapped="StackLayout_Tapped"/>
</StackLayout.GestureRecognizers>

代码：

if (frame.IsVisisble)
{
    frame.IsVisisble = false;
}