Размещение различных элементов в горизонтальном списке в приложении Магазина Windows

Я хочу разработать свое приложение со следующим стилем/дизайном:

дизайн макета главной страницыНекоторые комментарии по реализации:

  • Контент загружается динамически (три категории (Субтитры 1-3) фиксированы.
  • Количество подпунктов (серый) может меняться
  • Я хочу, чтобы пользователь мог прокручивать вправо (как обычно в метро-приложениях)

К сожалению, у меня есть некоторые трудности с реализацией (в XAML):

  • Я попробовал GridView (как в примерах руководств), у которого есть VirtualizingStackPanel (Orientation = Horizontal) в ItemsPanelTemplate. Три категории (зеленый, желтый, серый) отображаются в виде сеток с разными шаблонами.

  • В основном это работает нормально, но теперь у меня есть несколько функций GridView, которые мне не нравятся/не нужны: я могу выбрать его и немного перетащить. Я отключил SelectionMode и т. д. К сожалению, Hover-эффект все еще имеет место, а также возможность немного перетащить всю категорию. Я попробовал IsHitTestVisible=false, что удалило это наведение и перетаскивание, но отключило все кнопки и события кликов в категориях.

Как я могу сделать это лучше, например. решить мою проблему?

Любые подсказки и предложения высоко ценятся. Спасибо!


gridview windows-runtime windows-store-apps
person casaout    schedule 31.07.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать ScrollViewer со Style="{StaticResource HorizontalScrollViewerStyle}" и поместить StackPanel с тремя категориями как ItemsControls с ItemsPanels, определенными по своему усмотрению, или вы можете изменить шаблон GridViewItem, чтобы изменить то, что происходит при наведении курсора. Вы должны открыть файл XAML в конструкторе, щелкнуть правой кнопкой мыши GridView и выбрать «Редактировать дополнительные шаблоны»/«Редактировать контейнер созданных элементов» (ItemContainerStyle)/«Редактировать копию...», чтобы извлечь шаблон по умолчанию и посмотреть на визуальное состояние PointerOver, чтобы увидеть, что нужно изменить. Вы можете либо просто удалить раскадровку из VisualState, либо также удалить связанные элементы управления, используемые для визуализации обратной связи при наведении.

person Filip Skakun    schedule 31.07.2012
comment
Спасибо, именно это я и сделал: я отредактировал GridView-Template, а также GridView-Item-Template. Это сработало отлично :) Следующий пост показывает хороший пример для всех, кому это интересно: blogs.u2u.be/diederik/post/2012/07/09/ - person casaout; 31.07.2012

arrow_upward
0
arrow_downward

В Windows 8.1 для этого можно использовать элемент управления [Windows.UI.Xaml.Controls.Hub][1], как показано в Пример элемента управления XAML Hub. Этот элемент управления предназначен для представления разнородных наборов данных, как показано на рисунке, и может содержать дочерние элементы GridView и т.п.

person Kraig Brockschmidt - MSFT    schedule 27.03.2014