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>