Xamarin.Forms TabbedPage中的下拉菜单

时间:2018-10-18 11:52:30

标签: c# xamarin.forms renderer

我有这样的选项卡式设计,The tabbed page

选项卡式页面已经设置好了,但是我还是想不起来要使用下拉菜单并在选项卡栏上添加一个额外的按钮(图像中的过滤器按钮)。标签页的自定义渲染器可能可以工作,但作为最后的选择,我希望可以帮忙。

1 个答案:

答案 0 :(得分:2)

可以通过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解释了有关Flags的更多信息。这很容易理解,但是如果遇到麻烦,this video可以帮助我。

现在您的DropDown就绪了。要显示它时,只需设置可见性即可。

frame.IsVisisble = true;

提示1 :您甚至可以使用动画制作动画,使其上下移动。例如,this peace of code可以做到。

提示2 :如果将GestureRecognizers添加到StackLayout,则用户可以单击DropDown并隐藏它。

XAML:

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

代码:

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