Xamarin.Forms: How to diplay a modal when an item in ListView is clicked?

Question

Good Day everyone. I'm currently doing a simple application in Xamarin.Forms that allows me to CRUD record of an Employee. The created records are displayed on a ListView. Here's my screenshot.

What I want to do is whenever I click an Item on the ListView, is it will display a modal with a more detailed information of an Employee e.g (Birthday, Address, Gender, Work Experience). How can I do that? Is that even possible? Can you show me how?

This is my code that displays the ListView.

<?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="XamarinFormsDemo.EmployeeRecordsPage"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
         BackgroundImage="bg3.jpg"
         Title="List of Employees">


  <ContentPage.BindingContext>
    <ViewModels:MainViewModel/>
  </ContentPage.BindingContext>

  <StackLayout Orientation="Vertical">



  <ListView ItemsSource="{Binding EmployeesList, Mode=TwoWay}"
        HasUnevenRows="True">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

        <controls:CircleImage Source="icon.png"
               HeightRequest="66"
               HorizontalOptions="CenterAndExpand"
               Aspect="AspectFill"
               WidthRequest="66"
               Grid.RowSpan="2"
               />


        <Label Grid.Column="1"
          Text="{Binding Name}"
               TextColor="#24e97d"
               FontSize="24"/>

        <Label Grid.Column="1"
               Grid.Row="1"
              Text="{Binding Department}"
               TextColor="White"
               FontSize="18"
               Opacity="0.6"/>


           </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>

  </ListView>


   <StackLayout Orientation="Vertical"
         Padding="30,10,30,10"
         HeightRequest="20"
         BackgroundColor="#24e97d"
         VerticalOptions="Center"
         Opacity="0.5">
  <Label Text="© Copyright 2015   smesoft.com.ph   All Rights Reserved "
         HorizontalTextAlignment="Center"
         VerticalOptions="Center"
         HorizontalOptions="Center" />
    </StackLayout>
  </StackLayout>

</ContentPage>

NOTE: Records that are displayed are CREATED in ASP.NET Web Application and just displayed on a ListView in UWP. If you need to see more codes, just please let me know.

Thanks a lot Guys.

Answer 1

To bind a command to item selected property see the example bellow otherwise ItemSelected will bind to a model property only

For full example see https://github.com/TheRealAdamKemp/Xamarin.Forms-Tests/blob/master/RssTest/View/Pages/MainPage.xaml.cs

Now you can bind an Icommand which could have something like

 private Command login;
        public ICommand Login
        {
            get
            {
                login = login ?? new Command(DoLogin);
                return login;
            }
        }

private async void DoLogin()
        {

            await Navigation.PopModalAsync(new MySampXamlPage());
            //await DisplayAlert("Hai", "thats r8", "ok");

        }

and view :

[Navigation.RegisterViewModel(typeof(RssTest.ViewModel.Pages.MainPageViewModel))]
    public partial class MainPage : ContentPage
    {
        public const string ItemSelectedCommandPropertyName = "ItemSelectedCommand"; 
        public static BindableProperty ItemSelectedCommandProperty = BindableProperty.Create(
            propertyName: "ItemSelectedCommand",
            returnType: typeof(ICommand),
            declaringType: typeof(MainPage),
            defaultValue: null);

        public ICommand ItemSelectedCommand
        {
            get { return (ICommand)GetValue(ItemSelectedCommandProperty); }
            set { SetValue(ItemSelectedCommandProperty, value); }
        }

        public MainPage ()
        {
            InitializeComponent();
        }

        protected override void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();

            RemoveBinding(ItemSelectedCommandProperty);
            SetBinding(ItemSelectedCommandProperty, new Binding(ItemSelectedCommandPropertyName));
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            _listView.SelectedItem = null;
        }

        private void HandleItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem == null)
            {
                return;
            }

            var command = ItemSelectedCommand;
            if (command != null && command.CanExecute(e.SelectedItem))
            {
                command.Execute(e.SelectedItem);
            }
        }
    }

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"
    xmlns:ValueConverters="clr-namespace:RssTest.ValueConverters;assembly=RssTest"
    x:Class="RssTest.View.Pages.MainPage"
    Title="{Binding Title}">
    <ContentPage.Resources>
        <ResourceDictionary>
            <ValueConverters:BooleanNegationConverter x:Key="not" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ListView x:Name="_listView"
            IsVisible="{Binding IsLoading, Converter={StaticResource not}" ItemsSource="{Binding Items}"
            ItemSelected="HandleItemSelected"
            VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ActivityIndicator IsVisible="{Binding IsLoading}" IsRunning="{Binding IsLoading}"
            VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    </Grid>
</ContentPage>