Xamarin CarouselView，在另一个页面显示当前项目

Question

我正在歌词应用程序上工作。它有两个选项卡。歌词选项卡和详细信息选项卡

歌词选项卡是一个旋转木马视图，只显示歌曲的id,title和lyrics。

当歌词选项卡中的页面被滑动时，我想显示当前显示歌曲的所有其他信息，如artist,album,year等详细信息选项卡。

歌词选项卡完美显示所有歌曲的id,title和lyrics。但是Details选项卡总是空白的。

在SongModel:

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

在SongsViewModel:

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

歌曲从song.json文件解析，并在Lyrics.xaml中绑定到CarouselView的ItemsSource，并且它工作得很好。

InLyrics.xaml.cs:

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

// Detecting CarouselView Current Item Change!
public void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
var item = e.CurrentItem as Song;
((SongsViewModel)this.BindingContext).currentsong = item;
}
}

在Details.xaml页，

<ListView ItemsSource="{Binding currentsong}">
<ListView.ItemTemplate>
<DataTemplate>
<Label FontSize="17" HorizontalOptions="Start" TextColor="Black" LineBreakMode="WordWrap">
<Label.Text>
<MultiBinding StringFormat="{}Artist : {0};&#x0a;Album: {1}&#x0a;Genre : {2}">
<Binding Path="artist"/>
<Binding Path="album"/>
<Binding Path="genre"/>
</MultiBinding>
</Label.Text>
</Label>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

在Details.xaml.cs页，

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

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

谢谢。

Answer 1

从你的代码和描述，我猜你想传递数据从一个ContentPage到另一个ContentPage，我是对的吗?

如果是，可以使用MessagingCenter或ContentPage构造函数来传递数据。

使用MessagingCenter。

<StackLayout>
<CarouselView CurrentItemChanged="CarouselView_CurrentItemChanged" ItemsSource="{Binding songlist}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding id}" />
<Label Text="{Binding title}" />
<Label Text="{Binding lyrics}" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Button
x:Name="btn1"
Clicked="btn1_Clicked"
Text="go to another page" />
</StackLayout>
public partial class Page3 : ContentPage
{
public Page3()
{
InitializeComponent();
this.BindingContext = new SongsViewModel();      
}

private void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
Song item= e.CurrentItem as Song;
string jsonString = Newtonsoft.Json.JsonConvert.SerializeObject(item);
MessagingCenter.Send<string, string>("11", "Hi", jsonString);
}
private async void btn1_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page4());         
}   
}
class SongsViewModel : ViewModelBase
{

public static Song currentitem;
public ObservableCollection<Song> songlist { get;  set;}

public SongsViewModel()
{
songlist = new ObservableCollection<Song>()
{
new Song(){id="1",title="song 1",lyrics="song 1",artist="song 1",album="song 1",genre="song 1"},
new Song(){id="2",title="song 2",lyrics="song 2",artist="song 2",album="song 2",genre="song 2"},
new Song(){id="3",title="song 3",lyrics="song 3",artist="song 3",album="song 3",genre="song 3"},
new Song(){id="4",title="song 4",lyrics="song 4",artist="song 4",album="song 4",genre="song 4"},
new Song(){id="5",title="song 5",lyrics="song 5",artist="song 5",album="song 5",genre="song 5"},
new Song(){id="6",title="song 6",lyrics="song 6",artist="song 6",album="song 6",genre="song 6"}
};
MessagingCenter.Subscribe<string, string>("11", "Hi", (sender, arg) =>
{
string jasonstring = arg;
currentitem = JsonConvert.DeserializeObject<Song>(jasonstring);         
});
}
}

详细页面:

<StackLayout>
<Label
FontSize="17"
HorizontalOptions="Start"
LineBreakMode="WordWrap"
TextColor="Black">
<Label.Text>
<MultiBinding StringFormat="{}{0} {1} {2}">
<Binding Path="artist" />
<Binding Path="album" />
<Binding Path="genre" />
</MultiBinding>
</Label.Text>
</Label>

</StackLayout>
public partial class Page4 : ContentPage
{

public Page4()
{
InitializeComponent();
this.BindingContext = SongsViewModel.currentitem;       
} 
}

使用ContentPage构造函数

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

}
private async void btn1_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page4(item));         
}   
public partial class Page4 : ContentPage, INotifyPropertyChanged
{
private Song _item;
public Song item
{
get { return _item; }
set
{
_item = value;
RaisePropertyChanged("item");
}
}
public Page4(Song item)
{
InitializeComponent();
this.item = item;
//this.BindingContext = SongsViewModel.currentitem;  
this.BindingContext = item;
}

public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

更新:

Page3和SongViewmodel与上面的代码相同，但是在onappear上绑定page4 BindingContext来更新BindingContext。

public partial class Page3 : ContentPage
{
public Page3()
{
InitializeComponent();
this.BindingContext = new SongsViewModel();      
}
Song item;
private void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
item= e.CurrentItem as Song;
string jsonString = Newtonsoft.Json.JsonConvert.SerializeObject(item);
MessagingCenter.Send<string, string>("11", "Hi", jsonString);
}

}
public class SongsViewModel : ViewModelBase
{

public static Song currentitem;
public ObservableCollection<Song> songlist { get;  set;}

public SongsViewModel()
{
songlist = new ObservableCollection<Song>()
{
new Song(){id="1",title="song 1",lyrics="song 1",artist="song 1",album="song 1",genre="song 1"},
new Song(){id="2",title="song 2",lyrics="song 2",artist="song 2",album="song 2",genre="song 2"},
new Song(){id="3",title="song 3",lyrics="song 3",artist="song 3",album="song 3",genre="song 3"},
new Song(){id="4",title="song 4",lyrics="song 4",artist="song 4",album="song 4",genre="song 4"},
new Song(){id="5",title="song 5",lyrics="song 5",artist="song 5",album="song 5",genre="song 5"},
new Song(){id="6",title="song 6",lyrics="song 6",artist="song 6",album="song 6",genre="song 6"}
};
MessagingCenter.Subscribe<string, string>("11", "Hi", (sender, arg) =>
{
string jasonstring = arg;
currentitem = JsonConvert.DeserializeObject<Song>(jasonstring);
});
}
}
public partial class Page4 : ContentPage
{     
protected override void OnAppearing()
{
base.OnAppearing();

this.BindingContext = SongsViewModel.currentitem;
}
public Page4()
{
InitializeComponent();
}    
}