Bind an element of Array to a xaml property

Question

Before I get a duplicate question, I just want to say I can't seem to find a solution to my problem at all. All I want to do is bind an element of an array to a property and can't seem to figure out how because of my lack of experience.

Here is how my C# code looks:

 public class MainPageImplement : INotifyPropertyChanged { BitmapImage[] weatherIconSource = new BitmapImage[7]; public BitmapImage[] WeatherIconSource { get { return weatherIconSource; } set { weatherIconSource = value; NotifyPropertyChanged("WeatherIconSource"); } } private void NotifyPropertyChanged(string propName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); } public event PropertyChangedEventHandler PropertyChanged; }

Here is how my XAML property looks:

 <Image Grid.Column="1" Name="WeatherIconZero" Source="{x:Bind PropertyName.WeatherIconSource[0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />

My code executes without any errors to go off of but does not actually bind anything. However, it works just fine if I used BitmapImage variable and not an element from array.

Answer 1

Arrays are not bindable to the UI, at least not per index. You need to use an ObservableCollection<T> :

public ObservableCollection<BitmapImage> WeatherIconSource { get; } = new ObservableCollection<BitmapImage>();

Don't bother using arrays; you cannot notify a single-index property change

NotifyPropertyChanged("WeatherIconSource[5]"); // Doesn't work.

If you're stuck with arrays, then you have to notify property changed on the entire collection whenever you update a single index:

WeatherIconSource[5] = myNewBitmap;
NotifyPropertyChange("WeathIconSource"); // Updates all [0] [1] ... [n]

But if you do this, you will force a refresh on all indexes. All your images will redraw. You may get away with this if your app is simple with small images; otherwise, make the change to ObservableCollection<T> .

If you have hardcoded bindings with an exact index, like this:

Source="{x:Bind PropertyName.WeatherIconSource[0], Mode=OneWay}"
Source="{x:Bind PropertyName.WeatherIconSource[2], Mode=OneWay}"
Source="{x:Bind PropertyName.WeatherIconSource[5], Mode=OneWay}"

then instantiate your collection like this so you don't get an IndexOutOfRangeException :

public ObservableCollection<BitmapImage> WeatherIconSource { get; } = new ObservableCollection<BitmapImage>
{
    null, // [0]
    null, // [1]
    null,
    null,
    null,
    null,
    null  // [6]
};

Answer 2

它应该是，

`<Image Grid.Column="1" Name="WeatherIconZero"  Source="{Binding weatherIconSource[0]}" HorizontalAlignment="Center" VerticalAlignment="Center" /`>