WP8 LongListSelector - Navigating to different pages

Question

I have recently created a LongListSelector for my Windows Phone 8 app. However what I want to achieve now is to navigate to another page when the user taps on an item but I don't know what put in my code and also I'm not 100% as to where I should insert my uri's for each individual page. Does anyone know how I can achieve this?

I would be grateful if anyone could help me with this matter.

Many thanks.

Partial Public Class Station_Chooser
    Inherits PhoneApplicationPage

    Public Sub New()
        InitializeComponent()

        Dim source As New List(Of Glasgow)()
        source.Add(New Glasgow("Bridge Street"))
        source.Add(New Glasgow("Buchanan Street"))
        source.Add(New Glasgow("Cessnock"))
        source.Add(New Glasgow("Cowcaddens"))
        source.Add(New Glasgow("Govan"))
        source.Add(New Glasgow("Hillhead"))
        source.Add(New Glasgow("Ibrox"))
        source.Add(New Glasgow("Kelvinbridge"))
        source.Add(New Glasgow("Kelvinhall"))
        source.Add(New Glasgow("Kinning Park"))
        source.Add(New Glasgow("Patrick"))
        source.Add(New Glasgow("Shields Road"))
        source.Add(New Glasgow("St Enoch"))
        source.Add(New Glasgow("St George's Cross"))
        source.Add(New Glasgow("West Street"))


        Dim DataSource As List(Of AlphaKeyGroup(Of Glasgow)) = AlphaKeyGroup(Of Glasgow).CreateGroups(source, System.Threading.Thread.CurrentThread.CurrentUICulture, Function(s As Glasgow)
                                                                                                                                                                          Return s.Station
                                                                                                                                                                      End Function, True)
        GlasgowSubway.ItemsSource = DataSource

    End Sub

    Public Class Glasgow
        Public Property Station() As String
            Get
                Return m_Station
            End Get
            Set(value As String)
                m_Station = value
            End Set
        End Property
        Private m_Station As String

        Public Sub New(station As String)
            Me.Station = station
        End Sub
    End Class

End Class

Answer 1

There are some ways to do that. One of them shown in this SO question, maybe not the best or the most beautiful way but a very simple one.

Attach event handler for SelectionChanged, add command for navigating to new page in the handler, set SelectedItem = null

I assumed that the destination page is same page for any item selected, only different content/data displayed. You need to pass selected item's signature in the Uri parameter to enable destination page to display information accordingly. For example :

NavigationService.Navigate(New Uri("/nextpage.xaml?selectedStation=" & selectedItem.Station, UriKind.Relative))

UPDATE :

As you clarified that destination page will be different for each item, my previous answer still valid. Only the later part need to be modified, not using Uri parameter. So this is what I think. Add another property in Glasgow class, say it StationId. Upon initialization :

//the second parameter is StationId value
source.Add(New Glasgow("Bridge Street", "BridgeStreet"))

Then name each page with pattern StationId.xaml, so page for Bridge Street should be BridgeStreet.xaml. With that, in SelectionChanged event handler you can navigate to corresponding page without using Select Case selectedItem.Station ...:

NavigationService.Navigate(New Uri(selectedItem.StationId & ".xaml", UriKind.Relative))

Note : Having more then one properties in the model (Station and StationId in this case) require you to specify which property to display in LongListSelector. Check this link to know how, if you don't know yet.