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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Образец "Главный/подробный"
• Пример ListView и GridView
• Пример базы данных заказов клиентов
• Пример средства чтения RSS

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

• Списки
• Панели приложений и команд
• ListView class (Класс ListView)
• Класс SplitView