将数据从 CollectionView 传递到详细信息页面 Shell Navigation

Question

我有一个CollectionView，其中包含一个名称列表和一个标签视图配置文件。当我单击查看个人资料时，我想导航到详细信息页面。但是，我对 shell 导航以及如何将数据从一个页面传递到另一个页面感到困惑。

以及CollectionView。这是我第一次使用它。我点击viewprofile 并导航到详细信息页面，但是我通过的数据没有通过。 PetName 没有出现，因为我猜没有任何价值。我正在使用命令来调用导航。

我想当我单击查看个人资料然后传递它时，我不确定如何获取Petsname。

MyIDPageViewModel：

 class MyIDPageViewModel : INotifyPropertyChanged
 {
     FirebaseHelper firebaseHelper = new FirebaseHelper();
     public Command NavToDetailCommand { get; set; }

     public ObservableCollection<PetProfile> source;
     public ObservableCollection<PetProfile> PetInfo { get; private set; }
     public ObservableCollection<PetProfile> EmptyPetInfo
     {
         get => source;
         private set
         {
             if (value != source)
             {
                 source = value;
                 OnPropertyChanged(nameof(EmptyPetInfo));
             }
         }
     }

     public MyIDPageViewModel()
     {
         source = new ObservableCollection<PetProfile>();           
         CreatePetProfileCollection();
         NavToDetailCommand = new Command<PetProfile>(OnNav);
     }

     private async void OnNav(PetProfile PetDetailsPage)
     {           

         if (PetDetailsPage == null)
             return;

         await Shell.Current.GoToAsync($"//MyIDPage/PetDetailsPage?PetName={PetDetailsPage.PetName}");
     }

     public async void CreatePetProfileCollection()
     {
         var petProfiles = await firebaseHelper.GetAllUserPetInfos();
         if (petProfiles != null)
         {
             EmptyPetInfo = new ObservableCollection<PetProfile>();
             foreach (var groupitems in petProfiles)
             {
                 EmptyPetInfo.Add(new PetProfile() { PetName = groupitems.PetName, UserEmail = groupitems.UserEmail, Breed = groupitems.Breed, DOB = groupitems.DOB, Gender = groupitems.Gender, Weight = groupitems.Weight, CareInformation = groupitems.CareInformation });
             }
         }
     }

        
     public async void Refresh()
     {
         EmptyPetInfo.Clear();
         var petProfiles = await firebaseHelper.GetAllUserPetInfos();
         if (petProfiles != null)
         {
             EmptyPetInfo = new ObservableCollection<PetProfile>();
             foreach (var groupitems in petProfiles)
             {
                 EmptyPetInfo.Add(new PetProfile() { PetName = groupitems.PetName, UserEmail = groupitems.UserEmail, Breed = groupitems.Breed, DOB = groupitems.DOB, Gender = groupitems.Gender, Weight = groupitems.Weight, CareInformation = groupitems.CareInformation });
             }
         }
     }

     #region INotifyPropertyChanged
     public event PropertyChangedEventHandler PropertyChanged;
     void OnPropertyChanged([CallerMemberName] string propertyName = null)
     {
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
     }
     #endregion

我的收藏视图：

<CollectionView  ItemsSource="{Binding EmptyPetInfo}" SelectedItem="{Binding SelectedPet, Mode=OneWay}" SelectionChanged="OnCollectionViewSelectionChanged">
             <CollectionView.ItemTemplate>
                 <DataTemplate>
                     <Grid Padding="10">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
                         <Label Grid.Column="0"
                                Grid.Row="0"
                                Text="Image Goes Here"
                                FontAttributes="Bold" />
                         <Label Grid.Column="1"
                                Grid.Row="0"
                                Text="{Binding PetName}"
                                FontAttributes="Bold"
                                x:Name="labelpetname"/>
                         <Label  Grid.Row="0"
                                 Grid.Column="2"
                                 Text="View Profile"
                                 FontAttributes="Italic"
                                 VerticalOptions="End"                                
                                 >
                             <Label.GestureRecognizers>
                                 <TapGestureRecognizer Command="{Binding NavToDetailCommand, Source={
                                 RelativeSource AncestorType={x:Type local:MyIDPageViewModel}
                             }}"
                             CommandParameter="{Binding .}">
                                 </TapGestureRecognizer>
                             </Label.GestureRecognizers>
                         </Label>
                     </Grid>
                 </DataTemplate>
             </CollectionView.ItemTemplate>
         </CollectionView>

宠物详情页面：

public partial class PetDetailsPage : ContentPage
{
    FirebaseHelper firebaseHelper = new FirebaseHelper();
    private string _PetName;
    public string PetName
    {
        get => _PetName;
        set
        {
            if (value != _PetName)
            {
                _PetName = value;
            }
        }
    }

    public PetDetailsPage()
    {
        InitializeComponent();
        RetrivePetInfo();

    }

    private async void RetrivePetInfo()
    {
        var pet = await firebaseHelper.GetPet(_PetName);
        if (pet != null)
        {
            petname.Text = pet.PetName;
        }

    }

    private void Button_Clicked(object sender, EventArgs e)
    {

    }
}

从 firebase 检索 PetInfo 的代码：

public async Task<PetProfile> GetPet(string petname)

{ var useremail = Preferences.Get("UserSignInEmail", "");

     var PetProfiles = await GetAllPetInfos();
     await firebase
       .Child("PetProfiles")
       .OnceAsync<PetProfile>();
     return PetProfiles.Where(a => a.UserEmail == useremail && a.PetName == petname).FirstOrDefault();
 }

Answer 1

1. 正如评论中提到的Cfun，在类上方添加QueryProperty属性。

  [QueryProperty(nameof(PetName), "PetName")]
  public partial class PetDetailsPage : ContentPage{}

1. set 的属性PetName 的调用晚于类构造函数，因此_PetName 在RetrivePetInfo 方法中为空，作为一种解决方法，您可以直接在set 方法中调用RetrivePetInfo ，而不是在构造函数中。李>

  public string PetName
  {
      get => _PetName;
      set
      {
          if (value != _PetName)
          {
              _PetName = value;
              RetrivePetInfo();
          }
      }
  }