locked
Populating ScrollView at Runtime

    Question

  • I have an app for windows phone 8 that displays data loaded from my website.

    At the moment, I have setup 4 'holders' for the data, that contain a few TextBlocks and Images. When the app is loaded, these 4 holders display the data for the first 4 'records'. To display the next 4 'records', the user has to click a button, 'Next'.

    I want to change this so that all 'records' are displayed in a ScrollView so the user simply has to scroll down to view records rather than click the 'Next' button.

    I have also written the app for Android using Eclipse and Java. To do the above, I created a layout of the 'holder' in xml and then this is used as a template for the data. I only have to define the layout once and it is repeated at runtime, populated with the data from each record.

    How do I achieve the same in Windows Phone, using vb.net and xaml?

    I have googled and possibly DataTemplate is what I need however I'm not sure and have no idea how to implement it.

    If you could point me in the right direction I'm sure I can figure it out!

    Thanks in advance.

    Saturday, November 1, 2014 8:00 PM

Answers

  • The data you pull from your site are you doing an async call or is it completed in the same method using async/await?  Basically you are absolutely sure the data is present in the List(Of WebInfo)

    I see the issue... Your not using properties in your class... They need to be properties not variables...  It probably has no idea what you are telling it with variables...

    Public Class WebInfo
        Public Property ID as Integer
        Public Property A1 as String
        Public Property H1 as String
        etc...
    End Class

    <TextBlock Text="{Binding Path=H1}" /> 


    Morgan Vermef


    • Edited by mvermef Sunday, November 2, 2014 6:15 PM
    • Marked as answer by MW SSS Sunday, November 2, 2014 7:17 PM
    Sunday, November 2, 2014 6:06 PM

All replies

  • You might want to reference ListBox and with in listbox you will have ListBoxItems.  Now the beauty of this is that you will create a template "DataTemplate" to be exact.  That template can either reside in the ListBox or a stand alone DataTemplate as a resource.

    <ListBox x:Name="TheList">   <ListBox.ItemTemplate> <DataTemplate> <Grid>  <!-- can be any thing such as a
    TextBlock but to create the layout within, Grid is best --> <!-- Some Desired Layout --> </Grid> </DataTemplate> </ListBox.ItemTemplate></ListBox>

    Another way to provide this layout system is to put the
     <DataTemplate> into the resources of the app (think of it as global template) or into the UserControl or Page in question (yep you guessed it local only to that page/uc)

    <DataTemplate x:Key="MyListTemplate">
       <Grid>
         <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition />
         </Grid.RowDefinition>
       
         <TextBlock Text="{Binding SomeProperty}" />
         
         <TextBlock Text="{Binding SOmeOtherProperty}" Grid.Row="1" />
       </Grid>
    </DataTemplate>

    You simply tell the <ListBox  ItemTemplate="{StaticResource MyListTemplate}" />

    for the last bit of stuff about getting new items as you scroll down reference IncrementalLoading (windows phone 8.1)

    references: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.datatemplate.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.data.isupportincrementalloading.aspx


    Morgan Vermef



    • Edited by mvermef Saturday, November 1, 2014 11:49 PM
    Saturday, November 1, 2014 11:44 PM
  • Thank you!

    I'll give it a go and report back. Thanks again for quick, detailed response.

    Saturday, November 1, 2014 11:46 PM
  • Ok, I've tried the following and the app is crashing when trying to set the ItemsSource for the ListBox.

    Basically I have a List populated at runtime from my website (I know this bit works):

    Public WebData As New System.Collections.Generic.List(Of WebInfo)

    WebInfo Class:

    Public Class WebInfo
        Public ID As Integer
        Public H1 As String
        Public A1 As String
        Public C1 As String
        Public C2 As String
        Public K1 As Date
    End Class

    xaml:

    <ListBox x:Name="MainList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Grid.Row="3"  Grid.RowSpan="6"  Grid.Column="0"  Grid.ColumnSpan="3">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                            <TextBlock x:Name="H1" Text="{Binding H1}"  FontSize="15" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Right" FontWeight="Bold" Foreground="Black"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
    </ListBox>


    I try to set the ItemsSource using:

     MainList.ItemsSource = WebData

    But I get "An exception of type 'System.NullReferenceException'".

    Any thoughts? Thanks again.

    Sunday, November 2, 2014 12:00 AM
  • Ok, no exception now, not sure what that was but the ListBox is empty after calling:

    MainList.ItemsSource = WebData
    Frustrating this! Thanks for any input.
    Sunday, November 2, 2014 9:42 AM
  • Any thoughts anyone?? Thanks
    Sunday, November 2, 2014 4:23 PM
  • The data you pull from your site are you doing an async call or is it completed in the same method using async/await?  Basically you are absolutely sure the data is present in the List(Of WebInfo)

    I see the issue... Your not using properties in your class... They need to be properties not variables...  It probably has no idea what you are telling it with variables...

    Public Class WebInfo
        Public Property ID as Integer
        Public Property A1 as String
        Public Property H1 as String
        etc...
    End Class

    <TextBlock Text="{Binding Path=H1}" /> 


    Morgan Vermef


    • Edited by mvermef Sunday, November 2, 2014 6:15 PM
    • Marked as answer by MW SSS Sunday, November 2, 2014 7:17 PM
    Sunday, November 2, 2014 6:06 PM
  • Great, works perfectly. You were correct, I needed to use properties rather variables. You learn something new every day.

    Thanks a lot. Take Care, Mike.

    Sunday, November 2, 2014 7:16 PM