Question

I’m not using a listbox and data binding at the moment, but is it possible to have a listbox work like a carousel and if so, how.

This is what I’m using at the moment, which only works for adding images, not through binding in a listbox… can it still be modified to position each binded canvas+image in the suggested answer?

// 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);
}

Answer 1

You’d typically use a ListBox for scenarios like this.

The XAML for it would look something like this:

<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>

You can of course template it further to make things look the way you want.

In the code-behind here or in your view model, you’d create class that has an MyImageItemUri property and add instances of it to an ObservableCollection<T>. You can then bind or set the collection to the ItemsSource of the ImageGalleryListBox. You’d create more images dynamically by simply adding more of your image items to the observable collection.