Xamarin.Forms TabbedPage中的下拉菜单

Question

I have a tabbedpage design like so,

The tabbedpage is already setup, but I can't figure out anyway to achieve the dropdown menu and add an extra button (the filter button in the Image) to the tabbar. A custom renderer for the tabbedpage might work but I'd prefer that as a last resort, please help me out.

Answer 1

It can be done with an AbsoluteLayout and some height calculating. No custom renderer needed.

Put everything in your TabbedPage.Content in an AbsoluteLayout and then to StackLayout (or other Layout you are using). Then add a Frame (i'm using Frame , but you can use other 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>

In the Frame property AbsoluteLayout.LayoutBounds="0,0,1,A" I wrote A, but you have to write a number there:

• A = the height of your DropDown Menu

If you don't know the height at the initializing of the XAML, you can set it in code too:

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

Explanation and more about Flags is explained here . It's quite easy to understand, but if you have trouble, this video helped me.

Now is your DropDown ready. When you want it to show, just set the visibility.

frame.IsVisisble = true;

Tip-1 : You can even animate it to go up and down with using Animations. For example, this peace of code will do it.

Tip-2 : If you add a GestureRecognizers to your StackLayout , the user can click around the DropDown and it will hide.

XAML:

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

CODE:

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