Центр WPF Эллипс в X, Y

У меня есть ItemControl, который рисует тысячи эллипсов в графе рассеяния на холсте. Моя проблема заключается в том, что если я положу эллипс в координатах (4, 6) с высотой и шириной 10. Верхний левый угол эллипса находится в точке (4, 6), а форма простирается вниз и вправо.

То, что я хотел бы сделать, - это центрирование эллипсов по определенным координатам в XAML без необходимости использования настроек в моем уровне ViewModel.

Здесь работает UserControl с моим графиком:

<Grid>
        <ItemsControl ItemsSource="{Binding State.Data}">

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas  ClipToBounds="False"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
                </Style>
            </ItemsControl.ItemContainerStyle>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Fill="Red"  VerticalAlignment="Center" HorizontalAlignment="Center"  Width="10" Height="20"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>
    </Grid>

Это отлично работает, за исключением нецентральных эллипсов. Любые идеи?

Ответ 1

Вы можете использовать EllipseGeometry для выполнения этого.

XAML:

<Path Stroke="Black" StrokeThickness="3" Fill="Red" >
    <Path.Data>
        <EllipseGeometry 
            Center="{Binding Path=CenterPoint}" 
            RadiusX="5" 
            RadiusY="10" />
    </Path.Data>
</Path>

Модель просмотра:

public Point CenterPoint { get; set;}

Не могу взять кредит, я нашел здесь здесь.

Ответ 2

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

<Ellipse Fill="Red" Width="10" Height="20">
  <Ellipse.RenderTransform>
    <TranslateTransform X="-5" Y="-10" />
   </Ellipse.RenderTransform>
</Ellipse>

Ответ 3

Я предлагаю, вы измените свой ViewModel и назовите свойства Left и Top, так что ясно, что имеется в виду. Если вам также нужны значения X и Y, просто оставьте их. Я предлагаю это, потому что X и Y могут означать разные вещи, в зависимости от формы, которую вы рисуете.

Ответ 4

Так как свойства Canvas.Left/Right/Top/Bottom измеряют расстояние между сторонами Canvas и связанными сторонами вашего эллипса, единственный способ использовать их для управления тем, где центр Земли Эллипса подходит для размещения Высота и ширина в ViewModel.

Другими словами, однако вы определили, что центр Ellipse должен приземлиться на (4,6) и что он должен иметь Height/Width = 10, свойства X и Y, выставленные ViewModel, должны имеют значения 4 - 10 и 6 - 10 (т.е. (-6, -4)), которые будут результирующими значениями Canvas.Left и Canvas.Top.

Обновление:. Подумав об этом чуть больше, мне пришла альтернатива. Как предостережение, я не проверял это. Но если вы только использовали свое текущее решение и создали эллипсы таким образом, чтобы их Margin (или, по крайней мере, их верхние/левые поля) были равны -1 * Height (or Width), это (я думаю) приземляю их центр по координатам, заданным X и Y... Стоит сделать снимок.:)