Поделиться через

Элементы управления "Просмотрщик прокрутки"

Если содержимого пользовательского интерфейса больше, чем можно разместить в области, используйте элемент управления прокруткой.

Средства прокрутки позволяют содержимому выходить за пределы окна просмотра (видимой области). Пользователи могут добраться до этого содержимого, манипулируя поверхностью средства прокрутки с помощью сенсорного ввода, колесика мыши, клавиатуры или геймпада, курсора мыши либо пера для взаимодействия с полосой прокрутки.

В зависимости от ситуации полоса прокрутки средства просмотра прокрутки использует две различные визуализации, показанные на следующем рисунке: индикатор сдвига (слева) и традиционный палец полосы прокрутки (справа).

Снимок экрана, на котором показана панорамирующая полоса прокрутки — двухпиксельная вертикальная линия по правому краю содержимого.

Снимок экрана, на котором показана стандартная полоса прокрутки, представляющая собой 6-пиксельную вертикальную линию с кнопкой стрелки вверх вверху и стрелкой вниз внизу.

Это важно

WinUI имеет два разных элемента управления средства просмотра прокрутки: ScrollViewer и ScrollView. Каждый раз, когда мы говорим об элементах управления средства просмотра прокрутки , информация применяется к обоим элементам управления.

Элемент ScrollView управления похож на поведение и использование ScrollViewer элемента управления, но основан на InteractionTracker, имеет новые функции, такие как изменения представления на основе анимации, и предназначен для обеспечения полной функциональности с помощью ItemsRepeater.

Прокрутка, сдвиг и масштабирование

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

  • Прокрутка: перемещение содержимого по вертикали или по горизонтали, перетаскивая палец полосы прокрутки или используя колесико прокрутки на мыши.
  • Сдвиг: перемещение содержимого вертикально или горизонтально с помощью сенсорного ввода или стилуса.
  • Зуммирование: оптическое увеличение или уменьшение масштаба содержимого.

Полоса прокрутки осознает метод ввода пользователя и использует его для определения визуализации для отображения.

  • При прокрутке области без непосредственного управления полосой прокрутки, например, сенсорным вводом, появится индикатор сдвига, указывающий текущую позицию прокрутки.
  • При перемещении курсора мыши или пера через индикатор сдвига он преобразуется в традиционную полосу прокрутки. Перетаскиванием ползунка полосы прокрутки можно изменять положение области прокрутки.

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

Замечание

Когда полоса прокрутки отображается, она накладывается поверх содержимого вашего ScrollViewer, занимая 16 пикселей. Чтобы обеспечить качественное UX-дизайна, важно удостовериться, что никакое интерактивное содержимое не закрывается этим наложением. Кроме того, если вы не хотите, чтобы UX перекрывался, оставьте 16 пикселей поля у края окна просмотра, чтобы учесть полосу прокрутки.

Область просмотра и размер

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

Блок текста, который выходит за рамки окна просмотра или видимой области элемента управления.

Доступны различные API,которые позволяют получить высоту и ширину этих регионов, а также прокручиваемую высоту и ширину, которая является разницей между размером экстента и размером окна просмотра.

Recommendations

  • По возможности проектируйте с вертикальной прокруткой, а не горизонтальной.
  • Используйте одноосное панорамирование для областей содержимого, которые выходят за одну из границ окна просмотра (вертикальной или горизонтальной). Используйте двухосевое панорамирование для областей содержимого, которые выходят за пределы границ окна просмотра по вертикали и по горизонтали.
  • Используйте встроенные функции прокрутки в представлении элементов, представлении списка, сеточном представлении, комбинированном списке, списке, текстовом поле и контролах концентратора. Если элементов слишком много, чтобы отобразить все сразу, пользователь может прокручивать список элементов по горизонтали или вертикали.
  • Если вы хотите, чтобы пользователь мог прокручивать в обоих направлениях более крупную область и, возможно, масштабировать, например, если вы хотите дать возможность прокручивать и увеличивать полноразмерное изображение (а не так, чтобы изображение соответствовало размеру экрана), поместите изображение в просмотрщик прокрутки.
  • Если пользователь будет прокручивать длинный отрывок текста, настройте прокрутку так, чтобы она была только вертикальной.
  • Используйте средство просмотра прокрутки, чтобы содержать только один объект. Обратите внимание, что один объект может быть панелью макета, в свою очередь содержащей в себе любое количество объектов.
  • Если необходимо обрабатывать события указателя для uiElement в прокручиваемом представлении (например, ScrollViewer или ListView), необходимо явно отключить поддержку событий манипуляции в представлении, вызвав UIElement.CancelDirectManipulation. Чтобы повторно включить события манипуляции в представлении, вызовите UIElement.TryStartDirectManipulation.

Создание средства просмотра прокрутки

Откройте приложение коллекции WinUI и просмотрите ScrollView в действии

Откройте приложение коллекции WinUI и просмотрите ScrollViewer в действии

Приложение Галерея WinUI 3 включает интерактивные примеры большинства элементов управления, особенностей и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

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

Просмотрщик прокрутки в шаблоне элемента управления

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

ItemsView включает ScrollView элемент управления в шаблоне. Вы можете получить доступ к ScrollView, используя свойство ItemsView.ScrollView.

Шаблоны ListView и GridView всегда включают ScrollViewer в себя. TextBox и RichEditBox также включают ScrollViewer в свои шаблоны. Чтобы повлиять на некоторые действия и свойства встроенной части ScrollViewer, ScrollViewer определяет ряд присоединенных свойств XAML, которые можно задать в стилях и использовать в привязках шаблонов. Дополнительные сведения о присоединённых свойствах см. в Обзор присоединённых свойств.

Установить прокручиваемое содержимое

Содержимое внутри средства просмотра прокрутки становится прокручиваемым, если оно больше, чем окно просмотра прокрутки

В этом примере устанавливается содержимое Rectangle для элемента управления ScrollView. Пользователь видит только часть прямоугольника 500x400 и может прокрутить его, чтобы увидеть остальную часть.

<ScrollView Width="500" Height="400">
    <Rectangle Width="1000" Height="800">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</ScrollView>

Макет

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

Например, этот блок текста будет увеличиваться по горизонтали, пока родительский контейнер не ограничивает его, а затем упаковывает текст и растет по вертикали.

<TextBlock Text="{x:Bind someText}" TextWrapping="WrapWholeWords"/>

Если текстовый блок упаковывается в средство просмотра прокрутки, средство просмотра прокрутки ограничивает его горизонтальный и вертикальный рост.

По вертикали означает, что содержимое ограничено по горизонтали, но может увеличиваться по вертикали за пределами окна просмотра, а пользователь может прокручивать содержимое вверх и вниз.

Блок текста, который расширяется вертикально за пределами окна просмотра или видимой области элемента управления, с показанной вертикальной полосой прокрутки.

Горизонтально означает, что содержимое ограничено по вертикали, но может увеличиваться по горизонтали за пределами окна просмотра, а пользователь может прокручивать содержимое влево и вправо.

Блок текста, который расширяется горизонтально за пределами окна просмотра или видимой области элемента управления с горизонтальной полосой прокрутки.

Видимость полосы прокрутки

Элементы управления ScrollViewer и ScrollView используют несколько разные средства для настройки горизонтального и вертикального прокрутки содержимого.

  • В элементе управления ScrollViewer свойства VerticalScrollBarVisibility и HorizontalScrollBarVisibility управляют видимостью полос прокрутки и разрешены ли прокрутки в определенном направлении. Если для свойства задано Disabledзначение, содержимое не может быть прокручено в этом направлении путем взаимодействия с пользователем.
    • Значения по умолчанию: VerticalScrollBarVisibility="Auto"HorizontalScrollBarVisibility="Disabled"
  • В элементе управления ScrollView свойства VerticalScrollBarVisibility и HorizontalScrollBarVisibility управляют только видимостью полос прокрутки.
    • Значения по умолчанию: VerticalScrollBarVisibility="Auto"HorizontalScrollBarVisibility="Auto"

В этой таблице описываются параметры видимости этих свойств.

Ценность Description
Auto Полоса прокрутки отображается только в том случае, если окно просмотра не может отображать все содержимое.
Отключен (только ScrollViewer) Полоса прокрутки не отображается, даже если окно просмотра не может отобразить все содержимое. Прокрутка по взаимодействию с пользователем отключена. (Программная прокрутка по-прежнему возможна.)
Скрытый Полоса прокрутки не отображается, даже если окно просмотра не может отобразить все содержимое. Прокрутка по-прежнему включена и может происходить через сенсорное, клавиатурное или колесико мыши.
Видимый Полоса прокрутки всегда отображается. (В текущих макетах пользовательского интерфейса полоса прокрутки отображается только в том случае, если окно просмотра не может отобразить все содержимое).

(ScrollViewer использует перечисление ScrollBarVisibility ; ScrollView использует перечисление ScrollingScrollBarVisibility .)

Ориентация

Элемент управления ScrollView имеет свойство ContentOrientation , которое позволяет управлять макетом содержимого. Это свойство определяет, как содержимое может расти, если оно не ограничено явным образом. Если Height и Width явно заданы на содержимое, ContentOrientation не действует.

В этой таблице показаны ContentOrientation опции для ScrollView и эквивалентные настройки для ScrollViewer.

Ориентация Поле прокрутки Просмотрщик прокрутки
Вертикальный ContentOrientation="Vertical" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="Disabled"
Горизонтальный ContentOrientation="Horizontal" VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Both ContentOrientation="Both" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
None ContentOrientation="None"
 VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"

Вертикальный макет

По умолчанию макет содержимого средства просмотра прокрутки (ориентация) является вертикальным.

В этом примере элемент ItemsRepeater используется в качестве объекта ScrollView Content. Макет UniformGridLayout для ItemsRepeater размещает элементы по горизонтали в ряду до тех пор, пока не закончится место (500 пикселей в этом примере), после чего позиционирует следующий элемент на следующем ряду. ItemsRepeater может быть выше 400px, которые видны пользователю, но пользователь может прокручивать содержимое вниз.

Значение по умолчанию ContentOrientation равно Vertical, поэтому изменения в ScrollView не требуются.

<ScrollView Width="500" Height="400">
    <ItemsRepeater ItemsSource="{x:Bind Albums}"
                   ItemTemplate="{StaticResource MyTemplate}">
        <ItemsRepeater.Layout>
            <UniformGridLayout RowSpacing="8" ColumnSpacing="8"/>
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollView>

Горизонтальный макет

В этом примере компонент StackPanel располагает свои элементы по горизонтали. Конфигурация средства просмотра прокрутки изменяется для поддержки горизонтальной прокрутки и отключения вертикальной прокрутки.

ScrollView Свойство ContentOrientation установлено в Horizontal, чтобы разрешить содержимому увеличиваться по горизонтали по мере необходимости.

<ScrollView Width="500" Height="400" ContentOrientation="Horizontal">
    <StackPanel Orientation="Horizontal">
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

Программная прокрутка

Свойства смещения компонента прокрутки являются доступными только для чтения, но предоставлены методы для программной прокрутки.

Для элемента управления ScrollView вызовите метод ScrollTo и передайте горизонтальные и вертикальные смещения для прокрутки. В этом случае прокрутка является только вертикальной, поэтому используется текущее значение HorizontalOffset . Для прокрутки до верхней части используется Вертикальный смещение 0. Чтобы прокрутить до низа, VerticalOffset равно ScrollableHeight.

<Button Content="Scroll to top" Click="ScrollTopButton_Click"/>
<Button Content="Scroll to bottom" Click="ScrollBottomButton_Click"/>
<ScrollView x:Name="scrollView" Width="500" Height="400">
    <StackPanel>
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

private void ScrollTopButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: 0);
}

private void ScrollBottomButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: scrollView.ScrollableHeight);
}

ScrollView также предоставляет метод ScrollBy, который позволяет прокручивать по вертикали или горизонтали на заданную разницу от текущего смещения.

Zoom / Увеличить

Вы можете использовать средство просмотра прокрутки для оптического увеличения и уменьшения масштаба содержимого. Оптическое зумирование выполняется с помощью жестов сжатия и растяжения (раздвигание пальцев увеличивает масштаб, а сближение уменьшает) или нажатием клавиши Ctrl при прокрутке колеса мыши. Дополнительные сведения о масштабировании см. в разделе "Оптическое масштабирование" и "Изменение размера".

Чтобы включить масштабирование при взаимодействии с пользователем, установите для свойства ZoomMode значение Enabled (по умолчанию это Disabled). Изменения в ZoomMode свойстве вступили в силу немедленно и могут повлиять на взаимодействие с пользователем.

В этом примере показано Изображение, завернутое в просмотрщик прокрутки, и настроено для разрешения масштабирования.

<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

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

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

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

Изображение горы увеличено так, чтобы передний план, гора и небо все видны.

Чтобы ограничить изображение окном просмотра ScrollView, задайте для свойства ContentOrientation значение None. Так как видимость полосы прокрутки не привязана к этому ограничению, полосы прокрутки отображаются автоматически при увеличении масштаба пользователя.

<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

Коэффициент увеличения

Используйте свойства MinZoomFactor и MaxZoomFactor, чтобы управлять масштабом, до которого пользователь может увеличить содержимое. Эти свойства эффективны как для взаимодействия с пользователем, так и для программного масштабирования.

  • Значения по умолчанию: MinZoomFactor="0.1"MaxZoomFactor="10.0"
<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled" 
            MinZoomFactor="1.0" MaxZoomFactor="8.0">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

Программное зумирование

Свойство ZoomFactor доступно только для чтения, но методы предоставляются для программного увеличения масштаба. Типичное использование этого заключается в подключении элемента просмотра к ползунку, который регулирует уровень масштабирования, или кнопке для сброса уровня масштабирования. (См. ScrollViewer в приложении WinUI Gallery, чтобы посмотреть пример ползунка масштабирования.)

Для элемента управления ScrollView вызовите метод ZoomTo и передайте новый коэффициент масштабирования в качестве первого параметра.

<Slider Header="Zoom" IsEnabled="True"
        Maximum="{x:Bind scrollControl.MaxZoomFactor, Mode=OneWay}"
        Minimum="{x:Bind scrollControl.MinZoomFactor, Mode=OneWay}"
        StepFrequency="0.1"
        ValueChanged="ZoomSlider_ValueChanged" />
<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

private void ZoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    if (scrollControl != null)
    {
        scrollControl.ZoomTo(
            zoomFactor: (float)e.NewValue,
            centerPoint: null)
    }
}

ScrollView также предоставляет метод ZoomBy, который позволяет увеличивать и уменьшать масштаб на заданную величину от текущего уровня масштабирования.

UWP и WinUI для UWP

Замечание

Элемент ScrollView управления доступен только в WinUI. Для UWP и WinUI для UWP используйте элемент ScrollViewer управления.

Это важно

Сведения и примеры, приведенные в этой статье, оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но, как правило, применимы и к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI для UWP , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии содержит новый шаблон для этого элемента управления, использующего округленные углы. Дополнительные сведения см. в разделе "Радиус угла".

  • Last updated on