Question

I am populating a listbox full of HubTile items dynamically, but the list does not scroll down on the emulator or my device. The list that I am creating in my code behind (that is bound to the listbox) only contains 28 items. I am not sure what the problem is, it seems that everything loads fairly quickly. What I have is as follows:

MainPage.xaml

<ScrollViewer>

                    <ListBox Grid.Row="0" x:Name="connectionTileList" Margin="12,0,12,0" toolkit:TiltEffect.IsTiltEnabled="True">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <toolkit:HubTile Title="{Binding TileName}" Margin="6"
                                         Notification="{Binding Notification}"
                                         DisplayNotification="{Binding DisplayNotification}"
                                         Message="{Binding Message}"
                                         GroupTag="{Binding GroupTag}"
                                         Source="{Binding ImageUri}"
                                         Tap="connectionHubTile_Tap">
                                    <toolkit:ContextMenuService.ContextMenu>
                                        <toolkit:ContextMenu x:Name="connectionMenu">
                                            <toolkit:MenuItem Header="pin to start" Tap="connectionMenuItem_Tap"/>
                                        </toolkit:ContextMenu>
                                    </toolkit:ContextMenuService.ContextMenu>
                                </toolkit:HubTile>

                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                </ScrollViewer>

MainPage.xaml.cs

List<TileItem> networkTileItems;

public MainPage()
    {
        InitializeComponent();

        CreateConnectionHubTiles();
    }

private void CreateConnectionHubTiles()
    {
        networkTileItems = new List<TileItem>
        {

            new TileItem() { ImageUri = "/Images/Network/temp.png", Title = "Asymmetric DSL", Notification = "not active (what is proper term?)", /*Message = "not active (what is proper term?)"*/ GroupTag = "ConnectionTileGroup", TileName = "Asymmetric DSL", Type = NetworkInterfaceType.AsymmetricDsl  },
                ...

        };

        this.connectionTileList.ItemsSource = networkTileItems;
    }

When running, the list only creates the scrolling up effect, whether I try to scroll up or down. How might I be able to fix this issue? Should I load the images in a background thread, or only load a few images at a time while scrolling, or anything else? If so, how could I accomplish this?

Answer 1

The issue here is that you’re wrapping a ListBox in a ScrollViewer, and both controls are trying to take the manipulations. Either set

ScrollViewer.VerticalScrollBarVisibility="Disabled" on the ListBox, to let the outer ScrollViewer manage the scrolling, or remove the outer ScrollViewer completely.