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

Question

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

我尝试使列表框水平滚动，但它不会滚动，因此我将其放入滚动查看器中以使其水平滚动。然而，它不是滚动的列表框，我需要它们以某种方式从头开始滚动。

这是我到目前为止所拥有的：

        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

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