How to make a looping/circular ScrollViewer in Windows 8 Metro (C++/XAML)

Question

In a Windows 8 Metro app, is it possible to create a ScrollViewer which upon reaching the last item in the view, it loops back to the first item in the view? If so, how can I achieve this effect?

Answer 1

It is definitely possible. I am solving the problem at the moment and will post work when done. So far it goes something like below.

THe idea is that you hook into the viewchanged event for the scroll viewer, which fires anytime you move the bar. Once there, calculate where you are in the offset and the size of your items, and then you can use that to measure against the actual size of your listbox container or what have you.

Once you know where you are in the offset and know the actual height of your listbox and the height of your items, you know which items are currently visible and which are not. Make sure your list bound to the object is an observable collection implementing the INotifyChanged interface with two way binding. Then you can define a set of objects to rotate back and forth based on where in the scrolling you are.

Another option is to try a different starting point, perhaps a single control with a marquee and a scrollbar under it?

XAML

</UserControl.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
<ScrollViewer x:Name="ScrollViewer1">
    <ListBox x:Name="SampleListBox" Background="White" ItemsSource="{Binding Path=sampleItems}" ItemTemplate="{StaticResource sampleTemplate}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2">

    </ListBox>
</ScrollViewer>
</Grid>

Code Behind

    public sealed partial class MainPage : Page
{
    List<SampleItem> sampleItems;
    const int numItems = 15;
    public MainPage()
    {
        sampleItems = new List<SampleItem>();
        for (int i = 0; i < numItems; i++)
        {
            sampleItems.Add(new SampleItem(i));
        }
        this.InitializeComponent();
        SampleListBox.ItemsSource = sampleItems;
        ScrollViewer1.ViewChanged += ScrollViewer1_ViewChanged;
    }
    void ScrollViewer1_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        ScrollViewer viewer = sender as ScrollViewer;
        ListBox box = viewer.Content as ListBox;
        ListBoxItem lbi = box.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem;
        double elementSize;
        if (lbi == null)
            return;
        elementSize = lbi.ActualHeight;

    }        /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }
}

public class SampleItem
{
    public String ItemCount { get; set; }
    public SampleItem(int itemCount)
    {
        ItemCount = itemCount.ToString();
    }
}