Xamarin CarouselView，在另一个页面中显示 currentItem 详细信息。

Question

我正在开发歌词应用程序。它有两个选项卡。“歌词”选项卡和“详细信息”选项卡。

歌词选项卡是一个轮播视图，仅显示歌曲的 ID、标题和歌词。

滑动页面时，我想在“详细信息”选项卡中显示当前歌曲的所有其他信息，例如作词人、专辑、年份等。

歌词选项卡完美地显示所有歌曲的ID，标题和歌词。但是“详细信息”选项卡始终为空。

在 SongModel 中：

public class Song
{
   public string id {get; set;}
   public string title { get; set; }
   public string lyrics { get; set; }
   public string lyricist { get; set; }
   public string album{ get; set; }
   public string genre{ get; set; }
}

在 SongViewModel 中：

class SongsViewModel : BaseViewModel
{
   public Song currentsong { get; set; }
   public List songlist { get; private set; } 
}

歌曲是从 json 文件分析的，并绑定到 lyrics.xaml 中 DataTemplate 的 ItemsSource。而且效果很好。

在Lyrics.xaml.cs中，检测当前项目更改（带有 CarouselView 的歌词选项卡）：

public partial class Lyrics : ContentPage
{
   public Lyrics()
   {
       InitializeComponent();
       BindingContext = new SongsViewModel();
   }

   public void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
   {
       var item = e.CurrentItem as Song;
       ((SongsViewModel)this.BindingContext).currentsong = item;
   }
}

在 Details.xaml 页中，

在Details.xaml.cs页面中

 public partial class Details : ContentPage
 {
        public Details()
        {
            InitializeComponent();
            BindingContext = new SongsViewModel();
        }
 }

请告诉我这里出了什么问题。

谢谢。

Note：此问题总结整理于: Xamarin CarouselView, display currentItem details in another page.

Accepted Answer

欢迎来到我们的 Microsoft 问答平台！

您的代码中存在几个问题。

导航到页面时，您为 model 创建了一个新实例，因此没有的值。DetailsSongsViewModelcurrentsong

  public Details()  
  {  
      InitializeComponent();  
      BindingContext = new SongsViewModel();  
  }

当您在页面中设置 listView 时，它的类型应该是列表而不是。ItemsSourceDetailscurrentsong 根据您的需要，当我们导航到页面时，我们可以将所选项目的数据传递到页面：DetailsDetails

In page Lyrics:

        public void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)  
    {  
        Song item = e.CurrentItem as Song;  
       // ((SongsViewModel)this.BindingContext).currentsong = item;  
        Navigation.PushAsync(new Details(item));  
    }

In page Details,we can get the item from the constructor :

   public partial class Details : ContentPage  
    {  
        Song currentSong;  
  
        public Details(Song song)  
        {  
            InitializeComponent();  
  
            currentSong = song;  
            BindingContext = currentSong;  
        }  
  
    }

Details.xaml

Update

It has two tabs. Lyrics tab and Details tab.

If you have two tabs, you can achieve this function by the following steps:(I have tested on my side ,it works properly)

add static for the currentsong in model SongsViewModel, then page Lyrics and Details will share the same field currentsong:

 public class SongsViewModel  
{ // set static for currentsong   
    public static Song currentsong { get; set; }  
    public List songlist { get; private set; }  

    public SongsViewModel()  
    {  
        songlist = new List();  
        songlist.Add(new Song { title = "title1", lyricist = "Jack", album = "Album1", genre = "classical" });  
        songlist.Add(new Song { title = "title2", lyricist = "hello", album = "Album2", genre = "Country" });  
        songlist.Add(new Song { title = "title3", lyricist = "May", album = "Album3", genre = "pop" });  
    }  
}

make model Song implement interface INotifyPropertyChanged, when the value of currentsong changes, the UI will refresh automatically.

  public class Song: INotifyPropertyChanged  
 {  
     public string id { get; set; }  
     public string title { get; set; }  

     public string lyrics { get; set; }  


    // public string lyricist { get; set; }  

     string _lyricist;  
     public string lyricist  
     {  
         set { SetProperty(ref _lyricist, value); }  

         get { return _lyricist; }  
     }  


    // public string album { get; set; }  

     string _album;  
     public string album  
     {  
         set { SetProperty(ref _album, value); }  

         get { return _album; }  
     }  


     //public string genre { get; set; }  
     string _genre;  
     public string genre  
     {  
         set { SetProperty(ref _genre, value); }  

         get { return _genre; }  
     }  

     bool SetProperty(ref T storage, T value, [CallerMemberName] string propertyName = null)  
     {  
         if (Object.Equals(storage, value))  
             return false;  

         storage = value;  
         OnPropertyChanged(propertyName);  
         return true;  
     }  

     protected void OnPropertyChanged([CallerMemberName] string propertyName = null)  
     {  
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
     }  

     public event PropertyChangedEventHandler PropertyChanged;  
 }

Lyrics.xaml.cs

public partial class Lyrics : ContentPage
{
SongsViewModel viewModel;


 public Lyrics()  
 {  
     InitializeComponent();  
     viewModel = new SongsViewModel();  
     BindingContext = viewModel;  
 }  

 public void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)  
 {  
     Song item = e.CurrentItem as Song;  

     SongsViewModel.currentsong = item;  
 }  
}

Lyrics.xaml


tabbedpagewithnavigationpage:SongsViewModel

Details.xaml.cs

 public partial class Details : ContentPage
{


 Song song;  
 public Details()  
 {  
     InitializeComponent();  

 }  

 protected override void OnAppearing()  
 {  
     base.OnAppearing();  

     song = SongsViewModel.currentsong;  
     BindingContext = song;  
 }  
}

Details.xaml

如果回复有帮助，请点击“接受答案”并点赞。 注意：如果您想接收此线程的相关电子邮件通知，请按照我们文档中的步骤启用电子邮件通知。

通过

Xamarin CarouselView，在另一个页面中显示 currentItem 详细信息。

0 个其他答案

你的答案