可以无限循环滚动的水平列表框

Question

我想制作一个可以无限滚动的水平列表框（循环列表框/scrollviewer，或循环列表框/scrollviewer），这意味着当我滚动到它的末尾时，它会从头开始滚动。

我试图让列表框水平滚动，但它不会滚动，所以我将它放在滚动查看器中让它水平滚动。但是，滚动的不是列表框，我需要它们以某种方式从头开始滚动。

这是我目前所拥有的：

        private void DoWebClient()
    {
        var webClient = new WebClient();

        webClient.OpenReadAsync(new Uri("http://music.mobion.vn/api/v1/music/userstop?devid="));
        webClient.OpenReadCompleted += new OpenReadCompletedEventHandler(webClient_OpenReadCompleted);

    }

    void webClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
    {            
        using (var reader = new StreamReader(e.Result))
        {

            string s = reader.ReadToEnd();
            Stream str = e.Result;
            str.Position = 0;
            XDocument xdoc = XDocument.Load(str);


                var data = from query in xdoc.Descendants("user")
                           select new mobion
                           {
                               avlink = (string)query.Element("user_info").Element("avlink"),
                               nickname = (string)query.Element("user_info").Element("nickname"),
                               track = (string)query.Element("track"),
                               artist = (string)query.Element("artist"),
                           };                                        
                listBox.ItemsSource = data;                                    
        }            
    }

Mainpage.xaml

    <phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="DataTemplate1">
        <Grid/>
    </DataTemplate>
    <Storyboard x:Name="Storyboard1" RepeatBehavior="forever" Completed="Storyboard1_Completed">
        <DoubleAnimation Duration="0:0:25" To="-2400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="imagesScrollview" d:IsOptimized="True"/>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

        <ScrollViewer HorizontalScrollBarVisibility="Auto" Margin="8,563,-2400,2" Width="auto" x:Name="imagesScrollview" Opacity="1" Background="#FF3ED216" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Loaded">
                <im:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <ScrollViewer.RenderTransform>
            <CompositeTransform/>
        </ScrollViewer.RenderTransform>
        <ListBox x:Name="listBox" Width="Auto" Height="Auto" Background="#FF3ED216" ManipulationCompleted="listBox_ManipulationCompleted">
            <ListBox.RenderTransform>
                <CompositeTransform/>
            </ListBox.RenderTransform>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal">
                        <StackPanel.RenderTransform>
                            <TranslateTransform X="0" />
                        </StackPanel.RenderTransform>
                    </StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="15,0">
                        <Image Name="imageAV" Source="{Binding Path=avlink}" Height="80" Width="80" Stretch="UniformToFill" MouseLeftButtonUp="imageAV_MouseLeftButtonUp" ImageFailed="imageAV_ImageFailed" />
                        <StackPanel Orientation="Vertical" Margin="10,0,0,0" MouseLeftButtonUp="StackPanel_MouseLeftButtonUp">
                            <TextBlock Name="indexTextBlock" Text="{Binding num}" />
                            <TextBlock  Text="{Binding nickname}"/>
                            <TextBlock Text="{Binding track}" FontWeight="Bold" />
                            <TextBlock Text="{Binding artist}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>

Answer 1

要使列表框水平滚动，您需要设置内部 ScrollViewer 的 ScrollBar Visibility 属性。
像这样：

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto"
         ScrollViewer.VerticalScrollBarVisibility="Disabled" >

Toolkit 包含一个 LoopingSelector 类，您可以基于该类实现您自己的控制。在http://babaandthepigman.wordpress.com/2010/09/22/wp7-looping-selector/ 有一个创建这样一个控件的示例（虽然它是用于垂直列表）

Answer 2

不确定这是否有帮助，但无限滚动的标准方法是将至少一屏重复项从列表的开头放在末尾，并在到达末尾时透明地跳过（1 步滚动）到开头或从它的固定短偏移量（反之亦然），以便它看起来相同，但用户从列表的开头查看项目，而不是从末尾查看它们的重复项。