forum

Home / DeveloperSection / Forums / Update Image source in data template long list selector WP8

Update Image source in data template long list selector WP8

Samuel Fernandes283828-Mar-2015

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"><StackPanelBackground="DarkKhaki"Orientation="Horizontal"Width="450"><TextBlockText="{Binding Name}"FontSize="36"FontFamily="{StaticResource PhoneFontFamilySemiLight}"/></StackPanel></DataTemplate><DataTemplate x:Key="CustomExpanderTemplate"><StackPanelOrientation="Horizontal"><ImageSource="{Binding Image}"Stretch="None"/></StackPanel></DataTemplate><DataTemplate x:Key="CustomItemTemplate"><StackPanelBackground="BlueViolet"Margin="0,0,0,10"Height="55"Orientation="Horizontal"Width="412"><BorderBorderThickness="1"CornerRadius="10"Background="White"Width="280"Height="50"><TextBlockText="{Binding UnitName}"Foreground="Black"FontWeight="Bold"/></Border><StackPanelMargin="0,6,15,0"><ImageHeight="32"Width="32"Source="/Assets/Images/edit.png"></Image></StackPanel><StackPanelMargin="0,6,15,0"><ImageHeight="32"Width="32"Source="/Assets/Images/trash.png"></Image></StackPanel><StackPanelMargin="0,6,15,0"><ImageHeight="32"Width="32"Source="{Binding ImageSource}"></Image></StackPanel></StackPanel></DataTemplate><DataTemplate x:Key="CustomNonExpandableHeaderTemplate"><StackPanelOrientation="Vertical"><TextBlockText="{Binding Name}"FontSize="{StaticResource PhoneFontSizeExtraLarge}"FontFamily="{StaticResource PhoneFontFamilySemiLight}"/></StackPanel></DataTemplate></phone:PhoneApplicationPage.Resources><!--LayoutRootis the root grid where all page content is placed--><Grid x:Name="LayoutRoot"Background="Transparent"><Grid.RowDefinitions><RowDefinitionHeight="Auto"/><RowDefinitionHeight="*"/></Grid.RowDefinitions><!--TitlePanel contains the name of the application and page title--><StackPanel x:Name="TitlePanel"Grid.Row="0"Margin="12,17,0,28"><TextBlockText="MY APPLICATION"Style="{StaticResource PhoneTextNormalStyle}"Margin="12,0"/><TextBlockText="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><StackPanelBackground="White"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Width="Auto"Height="Auto"><Grid x:Name="SubGrid"Width="Auto"HorizontalAlignment="Stretch"><Grid.ColumnDefinitions><ColumnDefinition x:Name="SubGridCol"/><ColumnDefinitionWidth="80"/></Grid.ColumnDefinitions><StackPanelGrid.Column="0"Name="Subpnl"Orientation="Horizontal"HorizontalAlignment="Stretch"Width="Auto"MaxHeight="200"MinHeight="100"><TextBlockTextWrapping="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><StackPanelGrid.Column="1"HorizontalAlignment="Stretch"VerticalAlignment="Center"Background="Transparent"><ImageSource="{Binding Content}"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Width="Auto"Visibility="{Binding ControlVisibility}"Tap="ActiveInactiveImage_Tap_1"></Image></StackPanel></Grid><RectangleFill="Gray"Height="1"HorizontalAlignment="Stretch"Width="1000"/></StackPanel></DataTemplate></phone:LongListSelector.ItemTemplate></phone:LongListSelector></Grid></Grid><phone:PhoneApplicationPage.ApplicationBar><shell:ApplicationBarMode="Default"Opacity="1.0"IsMenuEnabled="True"IsVisible="True"><shell:ApplicationBarIconButtonClick="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 {publicpartialclassMainPage:PhoneApplicationPage{// ConstructorList<GroupClass>List=newList<GroupClass>();ObservableCollection<GroupClass>DataList=null;static bool IsEditable=false;publicMainPage(){InitializeComponent();// Sample code to localize the ApplicationBar//BuildLocalizedApplicationBar();List.Add(newGroupClass(){Name="Temp",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=1});List.Add(newGroupClass(){Name="Temp1",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=2});List.Add(newGroupClass(){Name="Temp2",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=3});List.Add(newGroupClass(){Name="Temp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=4});List.Add(newGroupClass(){Name="Aemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=5});List.Add(newGroupClass(){Name="Aemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=6});List.Add(newGroupClass(){Name="Aemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=7});List.Add(newGroupClass(){Name="Bemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=8});List.Add(newGroupClass(){Name="Bemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=9});List.Add(newGroupClass(){Name="Bemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=10});List.Add(newGroupClass(){Name="Cemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=11});List.Add(newGroupClass(){Name="Cemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=12});List.Add(newGroupClass(){Name="Cemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=13});List.Add(newGroupClass(){Name="Demp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=14});List.Add(newGroupClass(){Name="Demp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=15});List.Add(newGroupClass(){Name="Demp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=16});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=17});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=18});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=19});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=20});List.Add(newGroupClass(){Name="Femp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=21});List.Add(newGroupClass(){Name="Femp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=22});List.Add(newGroupClass(){Name="Gemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=23});List.Add(newGroupClass(){Name="Gemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=24});List.Add(newGroupClass(){Name="Hemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=25});List.Add(newGroupClass(){Name="Hemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=26});List.Add(newGroupClass(){Name="Jemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=27});List.Add(newGroupClass(){Name="Jemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=28});DataList=newObservableCollection<GroupClass>(List);this.GroupListBox.ItemsSource=DataList;}privatevoidActiveInactiveImage_Tap_1(object sender,System.Windows.Input.GestureEventArgs e){Image imgobj = sender asImage;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=newBitmapImage(newUri(gcobj.IsActive?"/Assets/Images/Active.png":"/Assets/Images/Inactive.png",UriKind.Relative));}GroupListBox.ItemsSource=DataList;}privatevoidApplicationBarIconButton_Click_1(object sender,EventArgs e){IsEditable=!IsEditable;foreach(var obj inDataList){ 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 {classGroupClass{publicstringImageSource{ get;set;}publicstringContent{ get {returnIsActive?"/Assets/Images/Active.png":"/Assets/Images/Inactive.png";}}publicstringName{ get;set;}publiclongUnitGroupID{ get;set;}public bool IsActive{ get;set;}public bool IsCustom{ get;set;}public bool IsChecked{ get;set;}public bool IsEditable{ get ;set;}publicVisibilityControlVisibility{ get {returnIsEditable?Visibility.Visible:Visibility.Collapsed;}}}}

Updated on 01-Apr-2015

Can you answer this question?


Answer

1 Answers

Liked By