Question

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>
Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top