2010-09-17 33 views
1

我目前沒有使用列表框和數據綁定,但有可能讓列表框像旋轉木馬一樣工作,如果是這樣,如何工作。列表框旋轉木馬 - 有可能嗎?

這就是我目前正在使用的,它只適用於添加圖像,而不是通過在列表框中綁定...它仍然可以修改以將每個綁定的canvas +圖像放置在建議的答案中嗎?

// add images to the stage 
public void addImages() 
     { 
      var itemCollection = GalleryModel.DocItemCollection; 
      foreach (var item in itemCollection) 
      { 
       var url = item.ImageUrl; 
       var image = new Image 
           { 
            Source = new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute)) 
           }; 

       image.Width = 90; 
       image.Height = 60; 

       // add the image 
       LayoutRoot.Children.Add(image); 

       // Add template here? 


       // reposition the image 
       posImage(image, itemCollection.IndexOf(item)); 
       _images.Add(image); 

       var containingWidth = ActualWidth; 
       var numberofItemsShown = containingWidth/100; 
       if (itemCollection.IndexOf(item) < Math.Ceiling(numberofItemsShown)-1) 
        moveIndex(1); 
      } 
     } 




// move the index 
private void moveIndex(int value) 
     { 
      _target += value; 
      _target = Math.Max(0, _target); 
      _target = Math.Min(_images.Count - 1, _target); 
     } 

// reposition the image 
private void posImage(Image image , int index){ 
      double diffFactor = index - _current; 

      double left = _xCenter - ((IMAGE_WIDTH + OFFSET_FACTOR) * diffFactor); 
      double top = _yCenter; 

      image.SetValue(Canvas.LeftProperty, left); 
      image.SetValue(Canvas.TopProperty, top); 
} 
+0

需要額外注意:圖片需要在畫布中移動 – bcm 2010-09-17 09:14:07

+0

最後,我在滾動查看器中使用帶有綁定內容的列表框。列表項目的數據模板包含圖像和文件名稱。通過滾動查看器的偏移位置控制位置。使用畫布放在列表框的位置,但放棄了,並依靠scrollviewer的偏移限制。 – bcm 2010-09-21 09:04:38

回答

2

對於類似的場景,您通常會使用ListBox

它的XAML會是這個樣子:

<ListBox x:Name="ImageGalleryListBox"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <tkt:WrapPanel /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 

    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Image Source="{Binding MyImageItemUri}" Margin="8" Width="100" Height="100" /> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

當然你可以模板的進一步使事情看起來你想要的方式。

在代碼隱藏或您的視圖模型中,您將創建具有MyImageItemUri屬性的類並將其實例添加到ObservableCollection<T>。然後,您可以將集合綁定或設置爲ImageGalleryListBoxItemsSource。只需將更多圖像項添加到可觀察集合中,即可動態創建更多圖像。

+0

這是完全正確的。如果你想要一個畫布,你可以添加一個畫布而不是WrapPanel。使用Canvas.Left和Canvas.Right綁定視圖模型以使用點佈局。 – 2010-09-17 19:16:52

+0

不知道如何重新定位我正在處理的傳送帶集合中的每個圖像(滾動,單擊鼠標)如果圖像是數據模板中的綁定圖像... – bcm 2010-09-19 23:20:03

+0

以下是圖像傳送帶實現示例I發現:[http://the-oliver.com/2010/03/09/image-carousel-in-silverlight/]。它來自一個簡單的'Panel',所以你可以使用它作爲'ListBox.ItemsPanel'模板。 – herzmeister 2010-09-21 10:40:08