×

Discussion Board

Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Jul 2013
    Posts
    21

    LongListSelector with tap events to other pages

    I have recently successfully implemented a LongListSelector in Visual Basic for my Windows Phone 7 app. However what I want to do now is implement button_click events for each and every single LongListSelector item + for each of those button_click events to navigate to a different page when tapped. The trouble I'm having with is actually seeking a following a suitable tutorial explaining how to implement this as I have search all over the Internet, but I can't find anything related to this. I already know the code for navigating to another page in code but I don't know how to implement it when it comes to the coding of a LongListSelector. Below are my XAML and VB codes.

    All help would be very much appreciated.

    Many thanks

    XAML
    Code:
        <phone:PhoneApplicationPage
            x:Class="Exits_Expert_London.Victoria_line"
            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"
            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
            FontFamily="{StaticResource PhoneFontFamilyNormal}"
            FontSize="{StaticResource PhoneFontSizeNormal}"
            Foreground="{StaticResource PhoneForegroundBrush}"
            SupportedOrientations="Portrait" Orientation="Portrait"
            mc:Ignorable="d"
            shell:SystemTray.IsVisible="True">
        
            <phone:PhoneApplicationPage.Resources>
                <DataTemplate x:Key="groupHeaderTemplate">
                    <Grid Margin="12,0,0,0">
                        <Grid Width="60" Height="60" HorizontalAlignment="Left">
                            <Border Background="#FF0099CC">
                                <TextBlock Margin="10,0,1,5" Foreground="White" Style="{StaticResource PhoneTextLargeStyle}" 
                                       Text="{Binding Title}" TextAlignment="Left" VerticalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </Grid>
                </DataTemplate>
                <DataTemplate x:Key="jumpListItemTemplate">
                    <Border Background="{Binding GroupBackgroundBrush}" Margin="0">
                        <StackPanel Margin="0,0,0,20">
                            <TextBlock Text="{Binding Name}" 
                                           Style="{StaticResource PhoneTextLargeStyle}"
                                           Foreground="{StaticResource PhoneForegroundBrush}"
                                           VerticalAlignment="Bottom"/>
                            <TextBlock Text="{Binding FareZone}"
                                           Style="{StaticResource PhoneTextSubtleStyle}"
                                           Foreground="{StaticResource PhoneForegroundBrush}"
                                           VerticalAlignment="Bottom"/>
                        </StackPanel>
                    </Border>
                </DataTemplate>
                <DataTemplate x:Key="groupItemTemplate" >
                    <Border Background="#FF0099CC" Width="100" Height="100" Margin="6">
                        <TextBlock Text="{Binding Title}" Margin="10,0,1,5" Foreground="White"
                                   Style="{StaticResource PhoneTextLargeStyle}" TextAlignment="Left" VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </phone:PhoneApplicationPage.Resources>
        
            <!--LayoutRoot is the root grid where all page content is placed-->
            <Grid x:Name="LayoutRoot" Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
        
                <!--TitlePanel contains the name of the application and page title-->
                <StackPanel Grid.Row="0" Margin="12,17,0,28">
                    <TextBlock Text="SELECT A DESTINATION STATION" Style="{StaticResource PhoneTextNormalStyle}"/>
                    <TextBlock Text="Victoria line" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="#FF0099CC"/>
                </StackPanel>
        
                <!--ContentPanel - place additional content here-->
                <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                    <toolkit:LongListSelector x:Name="citiesListGroups" Background="Transparent"
                                          ItemTemplate="{StaticResource jumpListItemTemplate}"
                        GroupHeaderTemplate="{StaticResource groupHeaderTemplate}"
                        GroupItemTemplate="{StaticResource groupItemTemplate}" >
                        <toolkit:LongListSelector.GroupItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel/>
                            </ItemsPanelTemplate>
                        </toolkit:LongListSelector.GroupItemsPanel>
                    </toolkit:LongListSelector>
                </Grid>
            </Grid>
        
        </phone:PhoneApplicationPage>


    VB
    Code:
    Imports System.Linq
        Imports Microsoft.Phone.Controls
        
        Partial Public Class Victoria_line
            Inherits PhoneApplicationPage
        
            Public Sub New()
        
                InitializeComponent()
                Dim source As New List(Of JumpDemo)()
        
        
                source.Add(New JumpDemo() With { _
                    .Name = "Blackhorse Road", _
                    .FareZone = "Fare zone 3", _
                    .GroupBy = "b" _
                })
                source.Add(New JumpDemo() With { _
                    .Name = "Warren Street", _
                    .FareZone = "Fare zone 1", _
                    .GroupBy = "w" _
                })
        
        
                Dim MygroupBy = From jumpdemo In source _
                              Group jumpdemo By jumpdemo.GroupBy Into c = Group _
                              Order By GroupBy _
                              Select New  _
                              Group(Of JumpDemo)(GroupBy, c)    
        
                Me.Victoria_line.ItemsSource = MygroupBy
            End Sub
        End Class
        
        Public Class Group(Of T)
            Implements IEnumerable(Of T)
            Public Sub New(name As String, items As IEnumerable(Of T))
                Me.Title = name
                Me.Items = New List(Of T)(items)
            End Sub
            Public Overrides Function Equals(obj As Object) As Boolean
                Dim that As Group(Of T) = TryCast(obj, Group(Of T))
                Return (that IsNot Nothing) AndAlso (Me.Title.Equals(that.Title))
            End Function
            Public Property Title() As String
                Get
                    Return m_Title
                End Get
                Set(value As String)
                    m_Title = Value
                End Set
            End Property
            Private m_Title As String
            Public Property Items() As IList(Of T)
                Get
                    Return m_Items
                End Get
                Set(value As IList(Of T))
                    m_Items = Value
                End Set
            End Property
            Private m_Items As IList(Of T)
            Public Function GetEnumerator() As IEnumerator(Of T) Implements IEnumerable(Of T).GetEnumerator
                Return Me.Items.GetEnumerator()
            End Function
            Private Function System_Collections_IEnumerable_GetEnumerator() As System.Collections.IEnumerator Implements System.Collections.IEnumerable.GetEnumerator
                Return Me.Items.GetEnumerator()
            End Function
        End Class
        
        
        Public Class JumpDemo
            Public Property Name() As String
                Get
                    Return m_Name
                End Get
                Set(value As String)
                    m_Name = value
                End Set
            End Property
            Private m_Name As String
        
            Public Property FareZone() As String
                Get
                    Return m_FareZone
                End Get
                Set(value As String)
                    m_FareZone = value
                End Set
            End Property
            Private m_FareZone As String
        
            Public Property GroupBy() As String
                Get
                    Return m_GroupBy
                End Get
                Set(value As String)
                    m_GroupBy = value
                End Set
            End Property
            Private m_GroupBy As String
        End Class

  2. #2
    Registered User
    Join Date
    Mar 2013
    Posts
    13

    Re: LongListSelector with tap events to other pages

    Open a new project and select the Windows Phone Databound App template. The project uses a ListBox instead of LongListSelector, but selecting an item and opening a details page works the same way.

  3. #3
    Registered User
    Join Date
    Jul 2013
    Posts
    21

    Re: LongListSelector with tap events to other pages

    Sorry but I need a LongListSelector in my app

  4. #4
    Registered User
    Join Date
    Mar 2013
    Posts
    13

    Re: LongListSelector with tap events to other pages

    Doesn't matter, it works the same way and you can see how it's done. The SelectionChanged event fires when you click an item, then use the item's databound data to open a new page.

  5. #5
    Registered User
    Join Date
    Jul 2013
    Posts
    21

    Re: LongListSelector with tap events to other pages

    It only shows one other page, my app has dozens of pages which I want to link up.
    Last edited by m.findlay93; 2013-09-22 at 19:03.

  6. #6
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    552

    Re: LongListSelector with tap events to other pages

    Quote Originally Posted by m.findlay93 View Post
    It only shows one other page, my app has dozens of pages which I want to link up.
    The same logic applies, simply make it link to different pages?

  7. #7
    Registered User
    Join Date
    Jul 2013
    Posts
    21

    Re: LongListSelector with tap events to other pages

    Yes that's what I want to do. I already have other pages in my project, I want to link to different pages. My code can be seen as above but I don't know how to achieve this in terms of coding. I know that SelectionChanged I need to fix but I'm sure there is other stuff too in my code that needs fixing.

  8. #8
    Registered User
    Join Date
    Jul 2013
    Posts
    21

    Re: LongListSelector with tap events to other pages

    Does anyone know what needs to change in my code?

Similar Threads

  1. QML Sliding Pages
    By a.dev in forum [Archived] Qt Quick
    Replies: 6
    Last Post: 2012-05-10, 13:15
  2. Replies: 2
    Last Post: 2009-05-15, 17:33
  3. Replies: 2
    Last Post: 2009-01-21, 05:13
  4. how to retrieve saved pages (.wml pages)
    By karen_cat in forum Browsing and Mark-ups
    Replies: 0
    Last Post: 2005-01-30, 22:23
  5. what is going on for the pages?
    By cs_lcmaa in forum Symbian
    Replies: 1
    Last Post: 2002-12-04, 12:13

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×