Question

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

我试图让列表框水平，但它不会滚动所以我把它放在一个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

不确定这是否有帮助，但无限滚动的标准方法是在结尾处从列表的开头放置至少一个屏幕重复项目，并在到达结尾时，透明地跳过（1步滚动）到它的开头或固定的短偏移（反之亦然），使它看起来一样，但是用户从列表的开头查看项目，而不是从最后的重复项。

Answer 2

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

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

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

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

2 个答案: