Multiple images with same imageSource does not always load (Xamarin)

Question

I have some problems with the images in one of my pages in Xamarin.Forms.

Basically, I have 5 stars lined up in a row, and the user can click on one of the stars to give a rating. I have 2 different images, one of a colored star, and another of a black star. If the user clicks on star number 3, star 1-3 will change to colored, and 4-5 will be black. If you select number 1, all but the first star will be black, and if you select the last star, all 5 stars will be colored.

This is my code:

    ImageSource ratingFill = ImageSource.FromResource("MyProject.Images.starfill.png");
    ImageSource ratingNoFill = ImageSource.FromResource("MyProject.Images.starnofill.png");
    private void ClickRating(int stars)
    {
        rating = stars;
        switch (stars)
        {
            case 1:
                rating1.Source = ratingFill;
                rating2.Source = ratingNoFill;
                rating3.Source = ratingNoFill;
                rating4.Source = ratingNoFill;
                rating5.Source = ratingNoFill;
                labelRatingText.Text = "Poor";
                break;
            case 2:
                rating1.Source = ratingFill;
                rating2.Source = ratingFill;
                rating3.Source = ratingNoFill;
                ...
        }
    }

It seems that not all 5 stars are updated when they should be. Its a bit random whether they load an image or not. Sometimes, if I click star 4, number 3 will just disappear (like it has no source). It seems there might be a problem using the same ImageSource multiple times, and at the same time.

Is this the wrong way to do it?

Answer 1

I'm not sure, but I think this behavior is getting weird because of the Bindings.

Try to change your rating variable declaration to this:

ImageSource ratingNoFill => ImageSource.FromResource("MyProject.Images.starnofill.png");