How to populate LongListSelector

Question

I'm starting out with C# Windows Phone 8 development and I am trying to write an app which uses a LongListSelector. The app will show a long list of train station names.

I have been looking at some of the samples online, including the MSDN PeopleHub, and PhotoHub samples but they seem very complex. I took the PeopleHub sample and hacked at it a bit until I got it to display a list of stations in a LongListSelector but I wasn't able to find out which item had been selected in the list. The SelectedItem property was just returning the app name when passed to another page and not which item had been picked in the list.

I think I need a basic example of how to add some items to a LongListSelector and then find and pass the selected item to another page. I don't fully understand how the control works, if you have to use some sort of DataBinding with the LongListSelector to populate it or whether it's something simpler like:

LongListSelectorThing.add("trainstationA");
LongListSelectorThing.add("trainstationB");
LongListSelectorThing.add("trainstationC");

etc

Can someone give me some simple basic pointers as to how to populate this control and find out which item the user selects? When I say which item they select, when the LongListSelector grid appears, they click on A for example, and it then shows a list of things beginning with A and they then click on trainstationA, I'd want to be able to detect they've picked trainstationA and pass that info to another page so I can display further information about it.

Sorry for if this seems basic, I'm quite new to this.

Thanks!

Answer 1

Here is a basic example which should help you understand: First in your Page (xaml file) you define the control LongListSelector (LLS):

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <phone:LongListSelector Name="myLLS" Margin="0">
        <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>
</Grid>

You also declare how its Items will look like. It can be any UIElement - a button, Image, Grid and so on. In the code above I declared that my Item would be a TextBlock which content (text) I've bound to a property 'Name'. I've also given the LLS a name, that I can refer to it later.

In Page.cs code you populate the LLS. Lets create the simple Station class, and populate LLS:

public class Station
{
  private string _stationName;

  public string Name
  {
     get { return _stationName; }
     set { _stationName = value; }
  }

  public Station(string station)
  {
     this.Name = station;
  }
}

public partial class MainPage : PhoneApplicationPage
{
  ObservableCollection<Station> trainStations = new ObservableCollection<Station>();

  public MainPage()
  {
     InitializeComponent();

     myLLS.ItemsSource = trainStations;

     trainStations.Add(new Station("Germany"));
     trainStations.Add(new Station("France"));
     trainStations.Add(new Station("Italy"));
  }
}

What is important:

• look that in my Station class there is property called 'Name' - that's the one to which content of the TextBlock is bound.
• I've created ObservableCollection which is a collection of my Stations - it's similar to a List but when the new item is added or removed the PropertyChanged event is raised and therefore your LongListSelector can be automatically updated when you add a new station.
• I've assigned created collection to myLLS.ItemsSource - it means that created LLS will be populated with Items (described in xaml as DataTemplate) and a Source of this items is that collection.

Hope this helps. Happy coding.