List binding issue in Xamarin

Firstly I would like to disclose that I am a new developer and just starting out coding with Xamarin and C sharp.

I have setup a list on locations in a list. I have two views, a list view page and a detailed page of the list views. All the Binding elements in this list are accessible and work fine in the list view and then when clicked upon they also display in the detailed view. The issue is that I have also added a clicked property with the others in the list and as such in the model too. This click property aims to handle a button click in the detail page which in turn will play an audio file. After I run the code their are no errors, the audio just doesn't play at all.

please see the following code for a better insight into what im faced with:

Tourpage.xaml.cs

`public partial class ToursPage : ContentPage
{
async public void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)

{
    if (e.SelectedItem == null)
        return;

    var location = e.SelectedItem as Location;
    await Navigation.PushAsync(new ToursDetail(location));
    listView.SelectedItem = null;

}

public ToursPage()
{
    InitializeComponent();

    listView.ItemsSource = new List<Location>{

    new Location
    {
        Name = "Kilkenny Castle",
        Description = "This is the description Kilkenny Castle is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic ",
        ImageUrl = "link",
        Clicked = "Handle_Clicked1"
    },
    new Location
    {
        Name = "Butler House",
        Description = "This is the description Kilkenny Castle is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic ",
        ImageUrl = "link",
        Clicked = "Handle_Clicked2"
    }
    };`

ToursDetail.xaml

<StackLayout> <Image Source = "{Binding ImageUrl}"/> <Label Text = "{Binding Description}" LineBreakMode="WordWrap"/> <Button Text = "Play" Command="{Binding Clicked}"/> </StackLayout>

ToursDetail.xaml.cs This is where the button click is handled

` public partial class ToursDetail : ContentPage
{

public ToursDetail(Location location)
{
    if (location == null)
        throw new ArgumentNullException();
    BindingContext = location;

    InitializeComponent();
}


private void Handle_Clicked1(object sender, System.EventArgs e)
{
    DependencyService.Get<IAudio>().Play_Pause("http");
}`

Model

`namespace CustomRenderer.Models
{
public class Location
{
public string Name { get; set; }
public string Description { get; set; }
public string ImageUrl { get; set; }
public string Clicked { get; set; }

}
}`

Now what is also important to note is the if I change the code in ToursDetail.xaml file to the following:

<StackLayout> <Image Source = "{Binding ImageUrl}"/> <Label Text = "{Binding Description}" LineBreakMode="WordWrap"/> <Button Text = "Play" Clicked= "Handle_Clicked1"/> </StackLayout>

Then the audio plays fine. So therefore this type of setup won't work for me because I need the list selection to bind the location audio based on that selection rather than just for one as I have set here. Any help on how to achieve the workaround for this would be most grateful. I have been going around in circles trying to resolve this and find a solution.

Thanks Mike

Best Answer

Answers

  • ArindamSarkarArindamSarkar Member ✭✭

    @mikecloud your Clicked = "Handle_Clicked1" should be Command not a string object. Binding string to a Command in xaml will have no effect.

  • mikecloudmikecloud Member ✭✭

    @ArindamSarkar

    Thanks for your reply

    I have changed that to a command in the model but then I get and error in Tourpage.xaml.cs. The error is linked to "Clicked = "Handle_Clicked1" and it says "cannot implicitly converts type 'string' to Xamarin.Forms.Command". How do I resolve this issue then. Is there a way to convert a string to a command?

    Thanks
    Mike

  • seanydaseanyda GBMember ✭✭✭✭✭

    You're missing a ViewModel, and binding the Model directly to the ContentPage from what I can see. In the MVVM architecture, Your View shouldn't know about the Model. You're breaking the pattern by missing the ViewModel to handle all the code-behind and button events.

  • ArindamSarkarArindamSarkar Member ✭✭
    edited August 2018

    @seanyda is correct. you should create only one command in viewmodel and bind it in List, make sure, you correctly set the data context set to viewmodel not list data context. Second, use Command parameter to pass list item value/identifier/index of the item as necessary.

    i.e. "{Binding BindingContext.HorizontalOptions, Source={x:Reference MainPage}}"

  • mikecloudmikecloud Member ✭✭

    @seanyda

    Thanks for your input on this.

    Could you give me even a basic example of how this could be laid out in code?

    I know I obviously have to learn more on the MVVM architecture so that I can get a better understanding on this matter but seeing a basic code structure laid out would be a really great help.

    Thanks a lot
    Mike

  • mikecloudmikecloud Member ✭✭

    The ListView is an awkward hurdle you have to deal with when using MVVM. You need to be looking into Behaviours, more specially the EventToCommand behaviour to handle the ListView talking to your ViewModel.

    Steal the code from here, This is a perfect example of how to to this.
    https://developer.xamarin.com/samples/xamarin-forms/Behaviors/EventToCommandBehavior/

    @seanyda

    Thanks very much for your help and example code you've shared. Il check that out.

    Mike

Sign In or Register to comment.