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.
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.
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:
You can download source code for free from the link option:
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