Xamarin.Forms：ListViewの項目をクリックしたときにモーダルを表示する方法はありますか？

Question

おはようございます。私は現在、Xamarin.Formsで単純なアプリケーションを実行しています。このアプリケーションを使用すると、従業員のCRUDレコードを作成できます。作成されたレコードはListViewに表示されます。ここに私のスクリーンショットがあります。私は、ListViewコントロールの項目をクリックしたときに、私が何をしたいのか

があり、それは例えば、従業員（誕生日、住所、性別、職業体験）のより詳細な情報をモーダルに表示されますです。どうやってやるの？それも可能ですか？どうやって私に見せることができますか？

これは、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> 

注：表示されてレコードがASP.NET Webアプリケーションで作成され、ちょうどUWPでのListViewに表示されます。より多くのコードを表示する必要がある場合は、私に知らせてください。

ありがとうたくさんの男。項目選択したプロパティにコマンドをバインドする

Answer 1

は例が怒鳴る見そうItemSelectedはhttps://github.com/TheRealAdamKemp/Xamarin.Forms-Tests/blob/master/RssTest/View/Pages/MainPage.xaml.cs

今、あなたは

のようなものを持っている可能性がICommandのをバインドすることができますを参照してくださいだけ

フルたとえばモデルプロパティにバインドします

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"); 

     } 

とビュー：

[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>