Xamarin.Forms: Wie wird ein Modal angezeigt, wenn auf ein Element in ListView geklickt wird?

Question

Guten Tag alle. Ich mache gerade eine einfache Anwendung in Xamarin.Forms, die mir CRUD-Aufzeichnung eines Mitarbeiters erlaubt. Die erstellten Datensätze werden in einer ListView angezeigt. Hier ist mein Screenshot.

Was ich tun möchte, ist, wenn ich auf dem Listview ein Element klicken, ist es eine modale mit einer detaillierteren Informationen eines Mitarbeiters beispiels (Geburtstag, Adresse, Geschlecht, Berufserfahrung) angezeigt wird. Wie kann ich das machen? Ist das überhaupt möglich? Kannst du mir zeigen wie?

Dies ist mein Code, der die ListView anzeigt.

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

HINWEIS: Datensätze, die angezeigt werden, werden in ASP.NET Web-Anwendung erstellt und nur auf einem Listview in UWP angezeigt. Wenn Sie mehr Codes sehen möchten, lassen Sie es mich wissen.

Vielen Dank Jungs.

Answer 1

einen Befehl zu binden Punkt ausgewählte Eigenschaft am Beispiel siehe unten sonst itemSelected

Für vollständige Beispiel finden Sie nur auf ein Modell Eigenschaft binden https://github.com/TheRealAdamKemp/Xamarin.Forms-Tests/blob/master/RssTest/View/Pages/MainPage.xaml.cs

Jetzt können Sie einen ICommand binden, die so etwas wie

haben könnten

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

     } 

und Aussicht:

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