Позиционирование элемента внутри холста по центру (вместо верхнего левого угла) с использованием только XAML в WPF

общий вопрос о позиционировании элемент внутри Canvas - " Как расположить центр элемента (вместо верхнего левого угла)".

несколько решений, но все они имеют недостатки.

самое простое решение-разместить размер элемента во время установки Canvas.Left и Canvas.Top свойства программно. Это работает, но только один раз. Это решение не поддерживает привязки и будет нарушено при изменении размера элемента. Вы также не можете установить Canvas.Left или Canvas.Top используя

другой набор решений включает в себя преобразования translate с использованием либо RenderTransform или Margin. Эти решения требуют привязки некоторого свойства к the -0.5 * Width или -0.5 * Height. Такая привязка требует создания пользовательского ValueConverter и невозможно создать, используя только XAML.

Итак, есть ли простой способ разместить элемент внутри холста так, чтобы его Canvas.Left и Canvas.Top соответствуют центру элемента, и свойства size и position могут быть привязаны к некоторым другим свойствам?

12
canvas centering wpf xaml

4 ответов

XAML и привязки кажутся очень мощными, но иногда возникают простые проблемы, требующие очень сложных решений. В моей библиотеке Привязок создать такую привязку было бы так же просто, как написать element.Center = position или element.TopLeft = position - element.Size / 2, но не позволяйте мне увлечься.

я нашел очень простое решение, которое использует только XAML и поддерживает привязку свойств size и position элемента. Кажется, что когда элемент управления WPF с выравниванием слишком Stretch или Center помещен внутри холста, элемент "гравитирует" к центрировать как (Canvas.Left, Canvas.Top) точка (состояние, которое мы желаем), но останавливается "угловой пластиной", расположенной на том же

11

еще проще, по крайней мере для фигур, было бы использовать путь с соответствующей геометрией:

<Canvas>
    <Path Canvas.Left="200" Canvas.Top="200" Fill="Red" Opacity="0.5">
        <Path.Data>
            <EllipseGeometry RadiusX="50" RadiusY="50"/>
        </Path.Data>
    </Path>
</Canvas>
3

Это решение сработало для меня центр текста в заданной точке на холсте WPF. Он использует MultiBinding и пользовательский конвертер для регулировки поля на своем элементе. Блестяще!

0

Я решил это, поместив холст в нижнюю правую ячейку сетки 2x2. Это делает координату 0,0 центром сетки, а затем вы можете сделать весь свой рисунок относительно этого.

0