горизонтальный список, который может быть бесконечной прокруткой круга - PullRequest
Новая
       23

горизонтальный список, который может быть бесконечной прокруткой круга

0 голосов
/ 13 июля 2011

Я хотел бы создать горизонтальный список с бесконечной прокруткой (циклический просмотр списка / прокрутки или круговой просмотр списка / прокрутки), что означает, что когда я прокручиваю до конца, он прокручивается от начала.

Я пытался сделать список горизонтальным, но он не прокручивался, поэтому я поместил его в средство просмотра прокрутки, чтобы оно прокручивалось горизонтально. Однако это не список, который прокручивается, и мне нужно, чтобы они каким-то образом прокручивались с начала.

Это то, что я имею до сих пор: 

        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>

Ответы [ 2 ]

1 голос
/ 13 июля 2011

Для горизонтальной прокрутки списка необходимо установить свойства видимости ScrollBar внутреннего ScrollViewer.
Как это: 

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

Toolkit включает в себя класс LoopingSelector, на котором вы можете основывать свою собственную реализацию управления. Есть пример создания такого элемента управления в http://babaandthepigman.wordpress.com/2010/09/22/wp7-looping-selector/ (хотя это для вертикального списка)

1 голос
/ 13 июля 2011

Не уверен, поможет ли это, но стандартный подход к бесконечной прокрутке - поместить по крайней мере один скриншот дубликатов из начала списка в конец, а по достижении конца прозрачно пропустить (1-шаговая прокрутка) к началу или фиксированному короткому смещению от него (и наоборот), чтобы оно выглядело одинаково, но пользователь смотрит на элементы с начала списка, а не на их дубликаты с конца.

...