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>