水平列表框可能是无限循环滚动 [英] horizontal listbox that could be infinite circle scrolling

问题描述

我想制作一个可以无限滚动的水平列表框(循环列表框/scrollviewer或圆形列表框/scrollviewer)，这意味着当我滚动到其末尾时，它将从头开始滚动.

I would like to make a horizontal listbox that could be infinite scrolling (looping listbox/scrollviewer, or circular listbox/scrollviewer), means that when I scroll to its end, its would scroll over from beginning.

我试图使列表框水平，但是它不会滚动，因此我将其放在了scrollviewer中以使其水平滚动.但是，不是列表框在滚动，我需要它们以某种方式从头开始滚动.

I have tried to make the listbox horizontal, but it wouldn't scroll so I put it inside a scrollviewer to have it scroll horizontally. However it's not the listbox that scroll and I need them somehow to scroll over from beginning.

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

This is what I have so far:

        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

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>

推荐答案

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

To make a listbox scroll horizontally you need to set the ScrollBar Visibility properties of the internal ScrollViewer.
Like this:

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

工具包包括一个LoopingSelector类，您可以基于该类实现自己的控件实现在.在 http://babaandthepigman.wordpress上有一个创建此类控件的示例. .com/2010/09/22/wp7-looping-selector/(尽管它是垂直列表)

The Toolkit includes a LoopingSelector class that you could based your own control implementation on. There's an example of creating such a control at http://babaandthepigman.wordpress.com/2010/09/22/wp7-looping-selector/ (although it is for a vertical list)

这篇关于水平列表框可能是无限循环滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！