Xamarin Forms Creating Action Sheet

  • by
xamarin-forms-command-parameter-binding-example-001
Xamarin Forms creating and using Action sheet:

In the previous Xamarin forms tutorial we saw how to use command parameter with binding commands in MVVM app. In this post we will implement DisplayActionSheet alert in xamarin forms application. Using normal DisplayAlert pop-up alert dialog we can give user two option (generally yes or no), but by using Action sheet dialog we can provide multiple options. This can come handy when we want to show users more than couple of options.

The UIActionSheet is a common UI control in iOS apps. Xamarin forms includes this control in cross-platforms applications through DisplayActionSheet and rendering it natively on Android and UWP platforms.

private async void DisplaySheet()
{
string action = await DisplayActionSheet("ActionSheet Title", "Cancel", null, new string[] { "Yes", "No", "Can't Say", "Neutral" });
}

action will have the value selected from the action sheet pop-up.

DOWNLOAD EXAMPLE

Example of using Action sheet in Xamarin form application:

Create a new layout file in your project with name MainPage.xaml and edit it as below:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.MainPage"
Title="XamarinForms Action Sheet">

<StackLayout HorizontalOptions="Center" VerticalOptions="FillAndExpand" Padding="10">

<Button Text="Select Drinks" HorizontalOptions="Center" VerticalOptions="Start"
Margin="5" Visual="Material" x:Name="btnActionSheet" Clicked="BtnActionSheet_Clicked"/>

<Label x:Name="selectedOptions" Margin="5" HorizontalOptions="StartAndExpand" TextColor="Black" FontSize="Large" VerticalOptions="Start"/>
</StackLayout>
</ContentPage>

We will display names of different drinks on our DisplayActionSheet control and when anyone of the option is selected, we will display the selected option of Action sheet control on a Label.

xamarin-forms-command-parameter-binding-example-001

MainPage.xaml.cs:

using System;
using Xamarin.Forms;

namespace XamSample
{
public partial class MainPage : ContentPage
{

public MainPage()
{
InitializeComponent();
}

private async void BtnActionSheet_Clicked(object sender, System.EventArgs e)
{
try
{
string drink = await DisplayActionSheet("Select any color", "Cancel", "Hide", new string[] { "Coffee", "White Mocha", "Espresso", "Iced Latte", "Iced Americano" });

selectedOptions.Text = "You selected: "+drink;
}
catch (Exception ex)
{
selectedOptions.Text = ex.Message.ToString();
}
}

}
}

Output:

xamarin-forms-command-parameter-binding-example-001

You can download source code for free from the link option:

DOWNLOAD EXAMPLE

Also see:

Passing CommandParameter with Command bindings in Xamarin forms.

How to pass CommandParameter with TapGestureRecognizers?

ListView hide Scrollbars in Xamarin Forms

Button Press CommandParameter – Xamarin Forms

Xamarin forms SQLite DB – Perform CRUD operation.

Xamarin forms SkiaSharp – Creating different shapes

Creating SQLite Database in Xamarin forms

Xamarin forms Creating Custom Button control