xamarin - Show Action Menu in Xamarin Forms Application

Question

In my application, there is a button Action on right bottom corner of my screen and on click of that, something like in the image should appear. I am not sure how to get this, looks something similar to context menu in android. Need Help!

标签： xamarinxamarin.formsxamarin-studio

Answer 1

As comment mentioned there, you can use Rg.Plugins.Popup to achieve your requirement. I write some simple code and you can have a look at:

Action menu page, it inherits PopupPage, I use a listView to show the choices and you can custom the viewCell to add image on the right side. Also handle the click event in the ListView_ItemSelected:

public partial class Page1 : PopupPage
{
    public Page1 ()
    {
        InitializeComponent ();

        listView.ItemsSource = new List<string>
        {
            "first",
            "second",
            "third",
            "fourth",
            "fifth",          
        };
    }

    private async void OnClose(object sender, EventArgs e)
    {
        await PopupNavigation.Instance.PopAsync();
    }

    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        //
        var index = (listView.ItemsSource as List<string>).IndexOf(e.SelectedItem as string);

        Console.WriteLine(index);
    }
}

And in the Xaml:

<StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" Padding="20, 20, 20, 20" >
    <Frame CornerRadius="25" Padding="0" Margin="0,0,0,0" BorderColor="Red" HasShadow="False" IsClippedToBounds="True">
        <StackLayout BackgroundColor="White" VerticalOptions="End" >

            <ListView x:Name="listView" HeightRequest="250" RowHeight="50" ItemSelected="ListView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell TextColor="Black" Text="{Binding .}"></TextCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </StackLayout>
    </Frame>

    <Frame CornerRadius="25"  Padding="0" BackgroundColor="White" IsClippedToBounds="True">
        <StackLayout BackgroundColor="White" VerticalOptions="End" HeightRequest="50">

            <Button Text="Close" TextColor="#A9D1DE" Clicked="OnClose"></Button>

        </StackLayout>
    </Frame>

</StackLayout>

To use this page:

   await PopupNavigation.Instance.PushAsync(new Page1());

You should modify the details to meet you requirement. Such as custom the viewCell, disable the scroll ability of ListView and etc.

Here is what it looks like in iOS: