Как сделать ScrollViewer с кнопками вместо полосы прокрутки?

Question

Я делаю приложение для онлайн-кинотеатра UWP, и мне нужно создать горизонтальную «галерею» с фильмами. Приложение будет использоваться на ПК, Xbox и сенсорных устройствах, поэтому мне нужна прокрутка для работы с мышью, клавишами со стрелками и сенсорная прокрутка с помощью прокрутки.

В настоящее время я использую ListView с ScrollViewer, но это не дает мне ожидаемого результата. Я хочу, чтобы колесико мыши прокручивалось вертикально, но когда указатель входит в область ListView, он начинает прокручивать представление по горизонтали. Отключение горизонтальной прокрутки, ну, все ломает, так что это чистая реализация не вариант.

Мне нравится, как MS создала горизонтальную галерею в приложении Microsoft Store. Его можно прокручивать с помощью прикосновений и клавиатуры, но колесо мыши ничего не делает. Вместо этого в представлении отображаются круглые кнопки со стрелками по бокам этого горизонтального списка, например:

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

Answer 1

Это не должно быть большим делом.

Установите VerticalScrollMode="Disabled", VerticalScrollBarVisibility="Disabled", HorizontalScrollMode="Auto" и HorizontalScrollBarVisibility="Auto". Затем установите эти две кнопки влево и вправо с выравниванием по центру по вертикали.

Используйте метод ChangeView в обработчике событий Click для программной прокрутки содержимого. Вот и все.

Answer 2

Мне нужно, чтобы ListViewItem был полностью загружен в область просмотра

По вашему требованию вы можете обратиться к этому блогу . если вы хотите получить текущий ListViewItem полностью, вы можете var height = ListView.ActualHeight; (для вертикального ListView)

Обратите внимание, ScrollToVerticalOffset устарел, используйте следующий код для замены.

private void AlignSelectedItem()
{
    var index = ListView.SelectedIndex;
    double? itemHeight =
        ((FrameworkElement)ListView.ContainerFromIndex(index))?.ActualHeight;

    if (itemHeight.HasValue)
    {
        var itemsInView = _InternalListScrollViewer.ActualHeight / itemHeight.Value;
        var topOffset = (itemsInView - 1) * itemHeight.Value / 2;

        _InternalListScrollViewer.ChangeView(0,
            (index * itemHeight.Value) - topOffset, 1);
    }
    else if (index != -1)
    {
        //There is an item selected in the ListView, but it isn't rendered yet.
        //Hook up to ChoosingItemContainer event to try again...
        ListView.ChoosingItemContainer += ListView_ChoosingItemContainer;
    }
}


private void ScrollListVertical(bool shouldScrollDow)
{
    var height = ListView.ActualHeight;

    if (!shouldScrollDow)
        height *= -1;

    _InternalListScrollViewer.ChangeView(0,
        _InternalListScrollViewer.VerticalOffset + height, 1);
}

Иэто код образец , на который вы могли бы ссылаться.