Панель с процентными координатами

Question

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

Я сделал 2 попытки:

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

2. Использовать Canvas сЗафиксируйте ширину и высоту и поместите их в Viewbox - это простое решение, но при изменении размера Viewbox также изменяется весь контент Canvas.Я хочу, чтобы содержимое имело фиксированный размер.

Есть ли простое решение или я должен реализовать свою собственную панель (или, возможно, расширить одну из существующих, например Canvas)?

Ура!

Answer 1

Я бы:

• подкласс Canvas, возможно, назвав его RelativeCanvas или RatioCanvas
• , добавив два прикрепленных свойства: XRatio и YRatio
• переопределить ArrangeOverride и перебрать все дочерние элементы.Для каждого ребенка используйте их XRatio и YRatio вместе с ActualWidth и ActualHeight из RelativeCanvas, чтобы вычислить и применить значения для их Canvas.Left и Canvas.Top прикрепленных свойств

Вы могли бы использовать его следующим образом:

<local:RelativeCanvas>
    <!-- the top-left of this button will be center of panel -->
    <Button local:RelativeCanvas.XRatio="50" local:RelativeCanvas.YRatio="50"/>
</local:RelativeCanvas>

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

Answer 2

Здесь есть один: Пропорциональная панель WPF