Search code examples
c#xamlwindows-phone-8selectionchangedlonglistselector

How to change image in LongListSelector SelectionChanged method?


I have a LongListSelector in my Windows Phone app. The LLS has a Image and TextBlock for each item. How can I change image when a user change the selection? What should i write in my SelectionChanged method?

<phone:LongListSelector x:Name="MainLongListSelector" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged">
    <phone:LongListSelector.ItemTemplate>
          <DataTemplate>
              <StackPanel Orientation="Horizontal">
                  <Image Name="PlayPause" Source="/Assets/transport.play.png"/>
                  <StackPanel>
                      <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                  </StackPanel>
               </StackPanel>
          </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

Solution

  •     <phone:LongListSelector x:Name="MainLongListSelector" DataContext="{Binding listData}" IsGroupingEnabled="False" SelectionChanged="MainLongListSelector_SelectionChanged_1">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Name="PlayPause" Source="{Binding ImgUrl}" Height="100" Stretch="Fill"/>
                            <StackPanel>
                                <TextBlock Text="{Binding ImgText}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
    

    Behind the XAML:

        ObservableCollection<LongListData> listData = new ObservableCollection<LongListData>();
    
        listData.Add(new LongListData() { ImgText = "Image1", ImgUrl = new Uri("Images/1.jpg", UriKind.Relative) });
        listData.Add(new LongListData() { ImgText = "Image2", ImgUrl = new Uri("Images/2.jpg", UriKind.Relative) });
        listData.Add(new LongListData() { ImgText = "Image3", ImgUrl = new Uri("Images/3.jpg", UriKind.Relative) });
        listData.Add(new LongListData() { ImgText = "Image4", ImgUrl = new Uri("Images/4.jpg", UriKind.Relative) });
    
        MainLongListSelector.ItemsSource = listData;
    

    In SelectionChanged Method

        private void MainLongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var res = (sender as LongListSelector).SelectedItem as LongListData;
            int index = listData.IndexOf(res);
            //mark 1
            var newData = new LongListData() { ImgText = res.ImgText, ImgUrl = new Uri("Images/2.jpg", UriKind.Relative) };
            listData.RemoveAt(index);
            listData.Insert(index, newData);
        }
    

    Define a in C# code

        public class LongListData
        {
            public Uri ImgUrl { get; set; }
            public string ImgText { get; set; }
        }
    

    You can use images Randomly or according to your need at 'mark1' in the code.