Access and edit Image inside Button on Button click in code behind

Question

I have a Listview built like this:

<ListView x:Name="listprimi" RelativePanel.Below="primi" ItemsSource="{x:Bind obs_prims2}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <ListView.ItemTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
                  <Button Tag="{Binding id}" Grid.Column="0" Padding="0" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" Background="White" Click="selectMeal0">
                      <Image Name="sel0" Width="80" Height="80" Source="Images/ic_uncheck.png" RelativePanel.AlignLeftWithPanel="True" />
                  </Button>
                  <Image Width="120" Height="120" Margin="30,0,0,0" Source="{Binding idImg}" RelativePanel.AlignLeftWithPanel="True" />
                  <TextBlock Text="{Binding descr}" RelativePanel.AlignHorizontalCenterWithPanel="True" Height="100" Name="namemeal" Padding="60,15" Foreground="Gray" FontSize="26.7"/>
             </StackPanel>
         </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>

I would like to change the image named "sel0" which is inside the button when the button is clicked. I have set the code behind function selectMeal0 but I have no idea on how to do it. In addition I would also like to change the images of all the other elements of the list in the same function. I have tried something like this but it doesn't work.

UPDATE: This is the class

public class Pasto : INotifyPropertyChanged
{
    public string id { get; set; }
    public string descr { get; set; }
    public ImageSource idImg { get; set; }
    private ImageSource imgChecked;
    public ImageSource ImgChecked {
        get { return imgChecked; }
        set
        {
            if (imgChecked != value)
            {
                imgChecked = value;
                OnPropertyChanged("ImgChecked");
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
}

I've changed the ListView like this:

<ListView x:Name="listprimi" RelativePanel.Below="primi" ItemsSource="{x:Bind obs_prims2}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <ListView.ItemTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
                  <Button Tag="{Binding id}" Grid.Column="0" Padding="0" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" Background="White" Click="selectMeal0">
                      <Image Name="sel0" Width="80" Height="80" Source="{Binding ImgChecked}" RelativePanel.AlignLeftWithPanel="True" />
                  </Button>
                  <Image Width="120" Height="120" Margin="30,0,0,0" Source="{Binding idImg}" RelativePanel.AlignLeftWithPanel="True" />
                  <TextBlock Text="{Binding descr}" RelativePanel.AlignHorizontalCenterWithPanel="True" Height="100" Name="namemeal" Padding="60,15" Foreground="Gray" FontSize="26.7"/>
             </StackPanel>
         </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>

so that the image I'd like to edit is ImageChecked in the class. The function selectMeal should change all the images to "unchecked" and then the selected item's image to "checked".

Answer 1

in selectMeal0, you get access to the sender object, which is a Button in this case. The Button have Content property, which in turn containts the Image. At this point you can do anything to the Image.

BUT

you can also bind the source of the image to a property of your model. And make change to the model to update the image.

Answer 2

In order to change Image inside your DataTemplate of your ListView, you should change the necessary item from your collection on button click:

So, you have a collection obs_prims2 as ItemsSource for ListView. Then you need to take the the one item from your collection obs_prims2. For example:

var item=obs_prims2.FirstOrDefault();

then set new Image address:

item.idImg="C:/1.png";

Moreover, your Model class should implement INotifyPropertyChanged interface to show any changes. For example:

public class Book : INotifyPropertyChanged
{
    private string title;
    public string Title {
       get { return title; }
       set {
           title = value;
           OnPropertyChanged("Title");
       }         
    }    

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(String info) 
    {
       if (PropertyChanged != null) {
           PropertyChanged(this, new PropertyChangedEventArgs(info));
    }
}

Update:

To get an item that you want, then you can get item by index, like that Person person = Persons[1];. For example:

private void FillDataGridByTypeCollection()
{
    Persons.Add(new Person() { Id = 1, Name = "Ben" });
    Persons.Add(new Person() { Id = 1, Name = "Joseph" });
    Persons.Add(new Person() { Id = 1, Name = "Jon" });
    Persons.Add(new Person() { Id = 1, Name = "Magnus Montin" });
    Persons.Add(new Person() { Id = 1, Name = "Andy" });
    Person person = Persons[1];
}

private ObservableCollection<Person> persons = new ObservableCollection<Person>();
public ObservableCollection<Person> Persons
{
   get { return persons; }
   set { persons = value; }
}

Model:

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
}