---
title: "Update Image source in data template long list selector WP8"  
description: "Update Image source in data template long list selector WP8"  
author: "Samuel Fernandes"  
published: 2015-03-28  
updated: 2015-04-01  
canonical: https://www.mindstick.com/forum/23064/update-image-source-in-data-template-long-list-selector-wp8  
category: "xaml"  
tags: ["c#", "xaml", "windows phone"]  
reading_time: 9 minutes  

---

# Update Image source in data template long list selector WP8

My [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) is : In my [long](https://www.mindstick.com/articles/44565/white-wedding-dresses-long-prom-dresses) list [selector](https://www.mindstick.com/interview/23419/action-selector-in-mvc), when my list [items](https://www.mindstick.com/forum/33812/getting-number-of-items-selected-in-uicollectionview-in-ios) loaded and i [click](https://www.mindstick.com/articles/12423/social-login-magento-2-one-click-to-register-social) on edit [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) to activate/inactive items

When i [active](https://answers.mindstick.com/qa/97113/why-does-an-active-ftp-not-work-with-network-firewalls) / d-activate the top items then on scrolling down long list selector the some- where middle items where automatically got selected.

![Update Image source in data template long list selector WP8](https://www.mindstick.com/mindstickforums/679fbb61-09b1-47c8-8c4c-ad59ba23f1a2/images/6674c811-3717-44a7-9d58-c589e1ee2e75.png)\

![Update Image source in data template long list selector WP8](https://www.mindstick.com/mindstickforums/679fbb61-09b1-47c8-8c4c-ad59ba23f1a2/images/1f322ad5-1ec1-4b9c-a3ef-61a9abb6eaa8.png)\

[Please suggest](https://answers.mindstick.com/qa/43506/please-suggest-the-bathing-date-at-kumbh) 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; }
        }

    }
}
```

## Replies

### Reply by Anonymous User

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.\

\


---

Original Source: https://www.mindstick.com/forum/23064/update-image-source-in-data-template-long-list-selector-wp8

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.