Карусель Listbox - это возможно?

Question

В настоящее время я не использую списки и привязку данных, но возможно ли сделать так, чтобы списки работали как карусель, и если да, то как.

Это то, что я сейчас использую, это работает только для добавления изображений, а не через привязку в списке ... можно ли его изменить, чтобы расположить каждый связанный холст + изображение в предлагаемом ответе?

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

Обычно вы используете 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>. Затем вы можете связать или установить коллекцию на ItemsSource из ImageGalleryListBox. Вы будете создавать больше изображений динамически, просто добавляя больше своих элементов изображения в наблюдаемую коллекцию.