Бөлісу құралы:

Шаблон списка и деталей

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

Важные API: класс ListView, класс SplitView

Пример шаблона деталей списка

Подсказка

Если вы хотите использовать элемент управления XAML, реализующий этот шаблон, рекомендуется использовать элемент управления XAML ListDetailsView из набора средств сообщества Windows.

Это правильный шаблон?

Шаблон списка и сведений работает хорошо, если вы хотите:

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

Выбор правильного стиля

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

Доступная ширина окна Рекомендуемый стиль
320 epx-640 epx сложенный
641 epx или шире Бок о бок

Стиль с наложением

В слоистом стиле одновременно видна только одна область: список или сведения.

Подробные сведения о списке в режиме наложения

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

Создать шаблон многоуровневого списка/подробностей

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

Элементы для подробных сведений о списке с вложенным стилем

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

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

Для перехода между страницами см. историю навигации и обратную навигацию для приложений Windows.

Параллельный стиль

В параллельном стиле область списка и область сведений отображаются одновременно.

Шаблон списка/деталей

Список в панели списка содержит визуальный элемент для отображения текущего выбранного элемента. Выбор нового элемента в списке обновляет область сведений.

Создание параллельного шаблона списка и сведений

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

части разделенного просмотра деталей списка

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

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

Адаптивный макет

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

Адаптивный макет для деталей списка

Создание адаптивного шаблона для списка и его деталей

Чтобы создать адаптивный макет, определите различные VisualStates для пользовательского интерфейса и задайте точки останова для различных состояний с использованием AdaptiveTriggers.

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

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

Подсказка

Если вы хотите использовать элемент управления XAML, реализующий этот шаблон, рекомендуется использовать элемент управления XAML ListDetailsView из набора средств сообщества Windows.

  • Last updated on