Плавающие элементы управления в контейнере динамической ширины в XAML

Я новичок в XAML и пытаюсь во время выполнения добавить динамическое количество кнопок в контейнер, который масштабируется с текущей шириной и высотой окна. Кнопки должны располагаться по центру и располагаться рядом друг с другом, и если в одной строке недостаточно места, слишком широкая кнопка перемещается над другими кнопками и т. д., что приводит к «плавающему» поведению, известному из HTML.

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

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

Спасибо за любой вклад в мою проблему :)


c# xaml uwp floating
person Anders Rosten    schedule 28.01.2016    source источник
comment
Вы пробовали Wrappanel? Это имеет плавающее или циклическое поведение, которое перемещает элемент управления, превышающий размер окна, на следующее доступное пространство в левом нижнем углу.   -  person mrsargent    schedule 28.01.2016
comment
В UWP панель Wrappanel заменена на VariableSizedWrapGrid с нужным мне поведением упаковки, но она помещает элементы управления в макет сетки, и вам нужно указать строки и столбцы, которые мне не нужны. Элементы управления должны располагаться свободно без какого-либо определения столбца.   -  person Anders Rosten    schedule 28.01.2016
comment
ItemsWrapGrid не требовать чего-либо подобного.   -  person Chris W.    schedule 29.01.2016
comment
@КрисВ. из моего тестирования ItemsWrapGrid по-прежнему размещает элементы в сетке, что означает, что каждый элемент получает одинаковую ширину, доступную в каждом столбце. И я также не вижу, что он поддерживает центрирование элементов в строке?   -  person Anders Rosten    schedule 29.01.2016
comment
Извините, я не видел, чтобы вы где-либо упомянули эти конкретные требования, должно быть, не уделили достаточно внимания чтению вашего поста.   -  person Chris W.    schedule 29.01.2016
comment
У вас все кнопки разной ширины? Если они имеют одинаковую ширину, GridView может решить эту проблему, вам не нужно указывать строки и столбцы, и он поддерживает центрирование элементов в строке.   -  person Grace Feng    schedule 29.01.2016
comment
@GraceFeng-MSFT кнопки имеют разную ширину в зависимости от текста кнопки, поэтому я не могу использовать макет элементов управления сеткой.   -  person Anders Rosten    schedule 29.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вы могли бы добиться того, чего хотите, с помощью комбинации RelativePanel и несколько VisualStates и триггеры визуального состояния, такие как AdaptiveTrigger или некоторые из библиотеки WindowsStateTriggers. С их помощью вы можете определить различные визуальные состояния, каждое из которых представляет собой различное расположение кнопок, и определить триггеры, которые применяют эти состояния на основе некоторых условий (скорее всего, в зависимости от размера вашего контейнера). Очень хороший пример такого подхода описан в этой записи в блоге.

person Péter Bozsó    schedule 28.01.2016
comment
Я использую визуальные состояния в других частях приложения, но не понимаю, как я могу применить их для этой конкретной цели? Каждая кнопка должна располагаться индивидуально и должна смещаться по осям x и y в зависимости от размера контейнеров и размера кнопок слева и справа от каждой кнопки. Я думаю, мне нужен пример базового использования AdaptiveTriggers, где динамические элементы управления расположены в зависимости от других элементов управления и их родительского контейнера? :) - person Anders Rosten; 28.01.2016
comment
Пожалуйста, проверьте мои ссылки на WindowsStateTriggers и на сообщение Laurent Bugnion о сочетании RelativePanel и визуальных состояний + триггеры, а после этого вернитесь к вопросам! ;) - person Péter Bozsó; 28.01.2016
comment
Я просмотрел предоставленные вами ссылки еще до того, как вы их опубликовали, так как целую вечность гуглил, пытаясь найти решение. Я протестировал RelativePanel, но свойства Align недостаточно универсальны, вы можете расположить элемент управления справа, слева, сверху и снизу другого элемента управления, но мне нужно, чтобы каждый ряд элементов управления располагался плавно, а не привязывался к другим элементам управления. Так что, возможно, я новичок в XAML и UWP, но я просто не понимаю, как добиться этого с помощью стандартных элементов управления :) - person Anders Rosten; 29.01.2016