Xamarin.Forms中MyImage.Source索引未随列表更新的技术问题求助

Hey there, let's break down why your image isn't updating when you navigate through your GrapplingGuard items, and how to fix it!

The Root Cause #

Right now, you're only setting MyImage.Source once in the page constructor. When you click the button, you update the BindingContext to the next item—this works for your text elements because they're bound directly to properties of GrapplingGuard (like TitleText, EngText). But the image's source isn't bound to anything; it's a one-time assignment, so it never refreshes when the BindingContext changes.

Solution 1: Bind the Image Source Directly (Recommended) #

The cleanest way is to use data binding for the image, just like you do for your text. Since your ImageA is a string resource path, you'll need a value converter to turn that string into an ImageSource.

Step 1: Create the Value Converter

public class ResourceImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string resourcePath && !string.IsNullOrEmpty(resourcePath))
        {
            return ImageSource.FromResource(resourcePath, typeof(BGGrappling).GetTypeInfo().Assembly);
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Step 2: Add the Converter to Your XAML Resources

In your BGGrappling.xaml, add the converter to the page resources:

<ContentPage.Resources>
    <local:ResourceImageConverter x:Key="ResourceImageConverter" />
</ContentPage.Resources>

(Make sure you have the correct namespace for local pointing to your converter's namespace.)

Step 3: Bind the Image's Source

Update your MyImage element in XAML to use the binding:

<Image x:Name="MyImage" Source="{Binding ImageA, Converter={StaticResource ResourceImageConverter}}" />

Step 4: Remove the One-Time Assignment in Constructor

You can delete this line from your BGGrappling constructor now—binding will handle setting the source automatically:

// Remove this line
// MyImage.Source = ImageSource.FromResource(GrapplingGuard[ndx].ImageA, typeof(BGGrappling).GetTypeInfo().Assembly);

Solution 2: Manually Update the Image Source in Button Click #

If you prefer not to use a converter, you can simply re-set the MyImage.Source every time you switch items in the OnButtonClicked method:

async void OnButtonClicked(object sender, EventArgs e)
{
    ndx++;
    if (ndx < GrapplingGuard.Count) // Note: Your original check had ndx <=3, but GrapplingGuard only has 2 items—adjust this to match your actual list count!
    {
        BindingContext = GrapplingGuard[ndx];
        // Add this line to update the image
        MyImage.Source = ImageSource.FromResource(GrapplingGuard[ndx].ImageA, typeof(BGGrappling).GetTypeInfo().Assembly);
    }
    else
    {
        await Navigation.PopAsync();
    }
}

(Also, I noticed your original condition checks ndx <=3 but your sample list only has 2 items—you might want to use ndx < GrapplingGuard.Count to avoid index out of range errors.)

Why This Works #

• Solution 1 uses data binding, so whenever the BindingContext changes, the image source automatically updates via the converter—this follows MVVM best practices and keeps your code clean.
• Solution 2 explicitly updates the image source every time you switch items, mirroring the one-time setup you did in the constructor.

Either approach will fix your image not updating issue!

内容的提问来源于stack exchange，提问作者LotanV