水平列表框，可以無限循環滾動

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

不知道有沒有什麼幫助，但無限滾動的標準方法是把至少一個滿屏從結尾處的列表開始處重複項目，並且在到達結尾時，透明地跳過（單步滾動）到開始或從它開始固定的短偏移量（反之亦然），使得它看起來相同，但用戶從列表的開頭看項目，而不是他們的重複項目f從最後。