Listbox item change on click WP7

Question

I have got a binded listbox in WP7 containing a set of items in each portion, i want to change the icon's path when clicked so that the clicked icon is changed. This is my XAML data and the Stackpanel which is in Italic and Bold needs to be changed on the click button.

   <ListBox Height="768" HorizontalAlignment="Left" Name="listBox1" Margin="0,0,0,0" 
            VerticalAlignment="Top" Width="480" Grid.RowSpan="2" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Button BorderBrush="Black" Width="460" Height="100">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal" Height="80" Width="400">
                            <Image Source="{Binding Image}" Width="80" Height="50"/>
                            <StackPanel Orientation="Vertical" Height="80">
                                <StackPanel Orientation="Horizontal" Height="40">
                                    <TextBlock Width="200" FontSize="28" Text="{Binding Name}" Height="50"/>
                                    <StackPanel Orientation="Horizontal">
                                        ***<Image Source="{Binding OnOff}" Width="100" Height="40" Tap="Image_Tap"/>***
                                        </StackPanel>
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </Button.Content>
                </Button>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

I have filled this listbox in this way

     void MainPage_Loaded(object sender, RoutedEventArgs e)
     {
        List<settings> settingsData = new List<settings>();

        settingsData.Add(new settings("Administrator","Images/ad.png",""));
        settingsData.Add(new settings("Wi-Fi","Images/wifi.png","Images/off.png"));
        settingsData.Add(new settings("Bluetooth", "Images/BlueTooth.png", "Images/On.png"));
        settingsData.Add(new settings("Airplane Mode", "Images/747.png", "Images/off.png"));
        settingsData.Add(new settings("VPN", "", ""));
        settingsData.Add(new settings("Hotspot", "", "Images/unchecked.png"));
        settingsData.Add(new settings("NFC", "", "Images/checked.png"));
        settingsData.Add(new settings("Sound","Images/sound.png",""));
        settingsData.Add(new settings("Display","Images/display.png",""));

        listBox1.ItemsSource = settingsData;
    }

Help please..!!

Answer 1

A quick solution is,

private void Image_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        var imageSource = ((sender as Image).Source as BitmapImage).UriSource.OriginalString;
        if (imageSource.Contains("On"))
        {
            (sender as Image).Source = new BitmapImage(new Uri("Images/Off.png", UriKind.Relative));
        }
        else
        {
            (sender as Image).Source = new BitmapImage(new Uri("Images/On.png", UriKind.Relative));
        }
    }

Answer 2

Since you have bound the Image to the Image property of the settings object just change the path there (settings.Image = "Images/newImage.png") and the list should pick up the changes to the image path.

To do that please subscribe to the OnMouseLeftButtonDown or OnMouseLeftButtonUp event.

EDIT You may as well have OnOff property as bool type and provide converter for this. Usually your on and off icons will be the same for all items (provides UI consistency). Here is the converter class:

public class OnOffImageConverter : IValueConverter
    {
    public object Convert (object value, Type targetType, object parameter, CultureInfo culture)
        {
        if ((bool)value)
            {
            return new BitmapImage (new Uri ("Images/On.png", UriKind.Relative));
            }
        else
            {
            return new BitmapImage (new Uri ("Images/Off.png", UriKind.Relative));
            }
        }

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

Define static resource in your xaml for the converter:

<UserControl.Resources>
    <instance:OnOffImageConverter x:Key="OnOff" />
</UserControl.Resources>

How you use it:

 <Image Source="{Binding OnOff, Converter={StaticResource OnOff}}" Width="100" Height="40" />

Your settings class:

public class Settings : INotifyPropertyChanged  
{
    public Settings(string name, string image, bool onOff)
    {
        Name = name;
        Image = new BitmapImage (new Uri(image, UriKind.Absolute));
        OnOff = onOff;
    }

    public string Name { get; set; }
    public ImageSource Image { get; set; }

    private bool m_onOff;
    public bool OnOff 
        {
        get { return m_onOff; }
        set { 
            m_onOff = value;
            if (PropertyChanged != null)
                {
                PropertyChanged (this, new PropertyChangedEventArgs ("OnOff"));
                }
            } 
        }

    public event PropertyChangedEventHandler PropertyChanged;
}

I think you need to implement INotifyPropertyChanged interface to notify the list about changed property in the underlying class instance. Also if you are planning to add additional elements to the list after binding it, you should have it as an ObservableCollection.

I have tested with subscription to SelectionChanged event. However since I haven't developed on mobile I don't know any tap options, perhaps you could use Image_Tap event.

    listBox1.SelectionChanged += new SelectionChangedEventHandler (listBox1_SelectionChanged);


void listBox1_SelectionChanged (object sender, SelectionChangedEventArgs e)
    {
        foreach (Settings item in e.AddedItems)
        {
            item.OnOff = !item.OnOff;
        }
    }