Контекстное масштабирование

  • Статья

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

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

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

Возможности:

  • Размер уменьшенного представления не может выходить за границы элемента управления "Контекстное масштабирование".
  • Касание заголовка группы переключает представления. Как способ переключения между представлениями можно включить сжатие.
  • Активные заголовки переключаются между представлениями.

Выбор правильного элемента управления

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

Не путайте контекстное масштабирование с оптическим масштабированием. Хотя обе технологии используют одни и те же механизмы взаимодействия и базовое поведение (отображение более или менее детализированного представления с учетом коэффициента масштабирования), оптическим масштабированием называется настройка увеличения какой-либо области содержимого или объекта, например фотографии. Подробнее об элементах управления для визуального масштабирования см. в разделе об элементе управления ScrollViewer.

Рекомендации

  • При использовании контекстного масштабирования в приложении убедитесь, что макет элемента и направление сдвига не зависят от уровня масштабирования. Макеты и сдвиг в обоих режимах масштабирования должны быть последовательными и предсказуемыми.
  • Контекстное масштабирование позволяет пользователю быстро переходить к необходимому содержимому, поэтому ограничьте число страниц или экранов в режиме масштабирования до трех. Необходимость выполнения большого количества сдвигов снижает практическую ценность контекстного масштабирования.
  • Не используйте контекстное масштабирование для изменения объема содержимого. Например, фотоальбом не должен переходить в режим представления папок в проводнике.
  • Используйте структуру и семантику, необходимые для представления.
  • Используйте групповые названия для элементов, объединенных в коллекцию.
  • Применяйте упорядочение для коллекции несгруппированных, но упорядоченных элементов (например, хронологический порядок для дат и алфавитный порядок для списка имен).

Примеры

Раздел SemanticZoom в коллекции элементов управления демонстрирует интерфейс навигации, позволяющий пользователям быстро изменять масштаб сгруппированных разделов типов элементов управления.

Пример семантического масштабирования, используемого в коллекции WinUI

Приложение "Фотографии"

Это контекстное масштабирование в приложении "Фотографии". Фотографии группируются по месяцам. При выборе названия месяца в представлении таблицы по умолчанию изображение уменьшается до представления списка месяцев для ускорения навигации.

Контекстное масштабирование в приложении

UWP и WinUI 2

Важно!

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

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

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

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления.

Создание контекстного масштабирования

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

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

У элемента управления SemanticZoom нет собственного визуального представления. Это размещаемый элемент управления, который управляет переходами между двумя другими элементами управления, позволяющими просматривать содержимое. Как правило, это элементы ListView или GridView. Для элементов управления просмотром необходимо задать свойства ZoomedInView и ZoomedOutView объекта SemanticZoom.

Для контекстного масштабирования необходимы три элемента:

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

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

Примечание

Чтобы определить увеличенное представление и уменьшенное представление элемента управления SemanticZoom, можно использовать любые два элемента управления, реализующие интерфейс ISemanticZoomInformation . Платформа XAML предоставляет три элемента управления, которые реализуют этот интерфейс: ListView, GridView и Hub.

Данный пример XAML демонстрирует структуру элемента управления SemanticZoom. Другие элементы управления назначаются свойствам ZoomedInView и ZoomedOutView.

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->
   </SemanticZoom.ZoomedInView>

   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Примеры, приведенные здесь, взяты на странице SemanticZoom в примере коллекции WinUI. Чтобы просмотреть код полностью, включая источник данных, нужно загрузить этот пример. Это контекстное масштабирование использует класс GridView для представления увеличенного представления, а класс ListView — для уменьшенного представления.

Определение увеличенного представления

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

<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}"
              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

Внешний вид заголовков группы определяется в ресурсе ZoomedInGroupHeaderTemplate. Внешний вид элементов определяется в ресурсе ZoomedInTemplate.

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}"
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>

<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}"
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}"
                       TextWrapping="Wrap" HorizontalAlignment="Left"
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Определение уменьшенного представления

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

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

Внешний вид определяется в ресурсе ZoomedOutTemplate.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}"
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

Синхронизация представлений

Представления с увеличенным и с уменьшенным масштабом следует синхронизировать. Тогда, если пользователь выбирает группу в представлении с уменьшенным масштабом, подробная информация о той же группе выводится в представлении с увеличенным масштабом. Для синхронизации представлений можно использовать класс CollectionViewSource или добавить код.

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

Если вы не используете CollectionViewSource для синхронизации представлений, вы должны обработать событие ViewChangeStarted и синхронизировать элементы в обработчике событий, как показано здесь.

<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">

private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.IsSourceZoomedInView == false)
    {
        e.DestinationItem.Item = e.SourceItem.Item;
    }
}

Получение примера кода