Xamarin.Forms：如何在ListView中的某个项目单击时显示一个模式？

Question

美好的一天每个人。我目前正在Xamarin.Forms中做一个简单的应用程序，它允许我删除员工的CRUD记录。创建的记录显示在ListView上。这是我的截图。

我想要做的是，每当我点击的ListView的项目，是它会显示一个模式与员工e.g（生日，地址，性别，工作经验）的更详细的信息。我怎样才能做到这一点？这甚至可能吗？你能告诉我如何？

这是我的代码，显示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>