Update Image source in data template long list selector WP8

Total Post:159

Points:1117
 1294  View(s)
Ratings:
Rate this:

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.

Update Image source in data template long list selector WP8

Update Image source in data template long list selector WP8

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; }
        }




    }
}
  1. Post:397

    Points:3117
    Re: Update Image source in data template long list selector WP8

    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.


      Modified On Apr-09-2018 03:56:55 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!