Семантический масштаб

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

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

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

Функции:

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

Это правильный элемент управления?

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

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

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

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

Примеры

Коллекция WinUI

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

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

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

Создать семантический зум

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

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

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

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

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

В этом 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, что и источник данных, коллекцияViewSource синхронизирует представления автоматически. Дополнительные сведения см. в статье 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;
    }
}

UWP и WinUI 2

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

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

Связанные статьи

• Основы проектирования навигации
• Представление списка и представление сетки
• Контейнеры и шаблоны элементов