Update Image source in data template long list selector WP8

Question

My problem is : In my long list selector, when my list items loaded and i click on edit button to activate/inactive items

When i active / d-activate the top items then on scrolling down long list selector the some- where middle items where automatically got selected.

Please suggest something to me to get rid of this issue:

MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="longlistselector.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>


        <DataTemplate x:Key="CustomHeaderTemplate">
            <StackPanel Background="DarkKhaki" Orientation="Horizontal" Width="450" >
                <TextBlock Text="{Binding Name}" 
                                    FontSize="36" 
                                    FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="CustomExpanderTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Stretch="None"/>

            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="CustomItemTemplate">
            <StackPanel Background="BlueViolet" Margin="0,0,0,10" Height="55" Orientation="Horizontal"  Width="412">
                <Border BorderThickness="1" CornerRadius="10" Background="White" Width="280" Height="50">
                    <TextBlock Text="{Binding UnitName}" Foreground="Black" FontWeight="Bold" />
                </Border>
                <StackPanel Margin="0,6,15,0">
                    <Image  Height="32" Width="32"  Source="/Assets/Images/edit.png"></Image>
                </StackPanel>
                <StackPanel Margin="0,6,15,0">
                    <Image  Height="32" Width="32"   Source="/Assets/Images/trash.png"></Image>
                </StackPanel>
                <StackPanel  Margin="0,6,15,0">
                    <Image  Height="32" Width="32"  Source="{Binding ImageSource}"></Image>
                </StackPanel>

            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="CustomNonExpandableHeaderTemplate">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Name}" 
                                    FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                                    FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            </StackPanel>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>



        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

            <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <phone:LongListSelector x:Name="GroupListBox" Width="Auto" Background="#D1EEFC" BorderThickness="1"   IsGroupingEnabled="False" LayoutMode="List" HideEmptyGroups="True" VerticalAlignment="Stretch" >
     <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>

                        <StackPanel  Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
                            <Grid x:Name="SubGrid"  Width="Auto" HorizontalAlignment="Stretch">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="SubGridCol"/>
                                    <ColumnDefinition Width="80"/>
                                </Grid.ColumnDefinitions>

                                <StackPanel Grid.Column="0" Name="Subpnl" Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto" MaxHeight="200" MinHeight="100">

                                    <TextBlock TextWrapping="Wrap"  HorizontalAlignment="Left" Height="Auto" Width="250"  TextAlignment="Left"  Foreground="Black" FontSize="25"  VerticalAlignment="Center" Text="{Binding Name}"  Style="{StaticResource PhoneTextNormalStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                                </StackPanel>
                                <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Transparent" >
                                    <Image Source="{Binding Content}" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Width="Auto" Visibility="{Binding ControlVisibility}" Tap="ActiveInactiveImage_Tap_1">


                                    </Image>
                                </StackPanel>
                            </Grid>
                            <Rectangle Fill="Gray" Height="1" HorizontalAlignment="Stretch" Width="1000" />
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>

        </Grid>


    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default"  Opacity="1.0" IsMenuEnabled="True" IsVisible="True">

            <shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click_1" IconUri="/Assets/AppBar/edit.png" Text="Edit"/>


        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using longlistselector.Resources;
using System.Windows.Media.Imaging;
using System.Collections.ObjectModel;


namespace longlistselector
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        List<GroupClass> List = new List<GroupClass>();
        ObservableCollection<GroupClass> DataList = null;
        static bool IsEditable = false;
        public MainPage()
        {
            InitializeComponent();

            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();

            List.Add(new GroupClass() { Name = "Temp", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 1 });
            List.Add(new GroupClass() { Name = "Temp1", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 2 });
            List.Add(new GroupClass() { Name = "Temp2", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 3 });
            List.Add(new GroupClass() { Name = "Temp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 4 });
            List.Add(new GroupClass() { Name = "Aemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 5 });
            List.Add(new GroupClass() { Name = "Aemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 6 });
            List.Add(new GroupClass() { Name = "Aemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 7 });
            List.Add(new GroupClass() { Name = "Bemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 8 });
            List.Add(new GroupClass() { Name = "Bemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 9 });
            List.Add(new GroupClass() { Name = "Bemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 10 });
            List.Add(new GroupClass() { Name = "Cemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 11 });
            List.Add(new GroupClass() { Name = "Cemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 12 });
            List.Add(new GroupClass() { Name = "Cemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 13 });
            List.Add(new GroupClass() { Name = "Demp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 14 });
            List.Add(new GroupClass() { Name = "Demp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 15 });
            List.Add(new GroupClass() { Name = "Demp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 16 });
            List.Add(new GroupClass() { Name = "Eemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 17 });
            List.Add(new GroupClass() { Name = "Eemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 18 });
            List.Add(new GroupClass() { Name = "Eemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 19 });
            List.Add(new GroupClass() { Name = "Eemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 20 });
            List.Add(new GroupClass() { Name = "Femp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 21 });
            List.Add(new GroupClass() { Name = "Femp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 22 });
            List.Add(new GroupClass() { Name = "Gemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 23 });
            List.Add(new GroupClass() { Name = "Gemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 24 });
            List.Add(new GroupClass() { Name = "Hemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 25 });
            List.Add(new GroupClass() { Name = "Hemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 26 });
            List.Add(new GroupClass() { Name = "Jemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 27 });
            List.Add(new GroupClass() { Name = "Jemp3", IsActive = false, IsCustom = false, IsEditable = false, UnitGroupID = 28 });

            DataList = new ObservableCollection<GroupClass>(List);
            this.GroupListBox.ItemsSource = DataList;

        }

        private void ActiveInactiveImage_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
        {

            Image imgobj = sender as Image;
            GroupClass gcobj = (GroupClass)imgobj.DataContext;
            if (gcobj != null)
            {
                gcobj.IsActive = !gcobj.IsActive;

                imgobj.DataContext = gcobj;


                DataList.FirstOrDefault(x => x.UnitGroupID == gcobj.UnitGroupID).IsActive = gcobj.IsActive;

                imgobj.Source = new BitmapImage(new Uri(gcobj.IsActive ? "/Assets/Images/Active.png" : "/Assets/Images/Inactive.png", UriKind.Relative));



            }

            GroupListBox.ItemsSource = DataList;
        }

        private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
        {
            IsEditable = !IsEditable;
            foreach (var obj in DataList)
            {
                obj.IsEditable = IsEditable; obj.IsChecked = false;

            }
            this.GroupListBox.ItemsSource = null;
            this.GroupListBox.ItemsSource = DataList;

        }
    }
}

GroupClass.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace longlistselector
{
    class GroupClass 
    {

        public string ImageSource
        {
            get;
            set;
        }
        public string Content
        {
            get { return IsActive ? "/Assets/Images/Active.png" : "/Assets/Images/Inactive.png"; }

        }
        public string Name
        {
            get;
            set;
        }
        public long UnitGroupID
        {
            get;
            set;
        }
        public bool IsActive
        {
            get;

            set;

        }

        public bool IsCustom
        {
            get;
            set;
        }
        public bool IsChecked
        {
            get;
            set;
        }
        public bool IsEditable
        {
            get
           ;
            set;

        }

        public Visibility ControlVisibility
        {
            get { return IsEditable? Visibility.Visible : Visibility.Collapsed; }
        }




    }
}

Answer 1

Finally after struggling for 2 day, i solve this issue and fix it.

Replace the groupclass.cs with this code:

groupclass.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace longlistselector
{
    class GroupClass : INotifyPropertyChanged
    {


        public string ImageSource
        {
            get;
            set;
        }

        public string Content
        {
            get;
            set;
        }
        public string Name
        {
            get;
            set;
        }
        public long UnitGroupID
        {
            get;
            set;
        }
        private bool isActive;
        public bool IsActive
        {
            get { return isActive; }
            set
            {
                isActive = value;
                Content = isActive ? "/Assets/Images/Active.png" : "/Assets/Images/Inactive.png";
                OnPropertyChanged("IsActive");
                OnPropertyChanged("Content");

            }

        }

        public bool IsCustom
        {
            get;
            set;
        }
        public bool IsChecked
        {
            get;
            set;
        }
        private bool isEditable;
        public bool IsEditable
        {
            get { return isEditable; }
            set
            {
                if (value != isEditable)
                {
                    isEditable = value;

                    OnPropertyChanged("IsEditable");
                    ControlVisibility = isEditable ? Visibility.Visible : Visibility.Collapsed;
                    OnPropertyChanged("ControlVisibility");
                }
            }

        }
        public Visibility IsCustomControlVisibility
        {
            get { return IsEditable & IsCustom ? Visibility.Visible : Visibility.Collapsed; }
        }
        public Visibility ControlVisibility
        {
            get;
            set;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

We just need to call the INotifyPropertyChanged at couple of more places in the code.

Answer 2

You need implement INotifyPropertyChanged in GroupClass

public class GroupClass : INotifyPropertyChanged
{
    private bool _isActive;
    private string _content;
    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual bool Set<T>(ref T field, T newVal, [CallerMemberName] string propertyName = null)
    {
        if (Equals(field, newVal)) return false;
        field = newVal;
        if(PropertyChanged!=null)
        PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        return true;
    }


    public string Content
    {
        get { return _content; }
        set { Set(ref _content, value); }
    }

    public bool IsActive
    {
        get { return _isActive; }
        set
        {
            if(Set(ref _isActive, value))
            Content = _isActive ? "/Assets/Images/Active.png" : "/Assets/Images/Inactive.png";
        }
    }
}

In your code behind:

private void ActiveInactiveImage_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
        {

            Image imgobj = sender as Image;
            GroupClass gcobj = (GroupClass)imgobj.DataContext;
            if (gcobj != null)
            {
                gcobj.IsActive = !gcobj.IsActive;    
            }
        }