WPF Center Ellipse at X, Y

I have an ItemsControl that draws thousands of Ellipses in a scatter plot on a Canvas. My problem is, if I position an Ellipse at the coordinates (4, 6) with a Height and Width of 10. The top left of the Ellipse is at (4, 6) and the shape extends down and to the right.

What I'd like to do is center the Ellipses on specific coordinates in XAML without having to use adjustments in my ViewModel layer.

Here's the working UserControl that has my graph:

<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}" />
开发者_StackOverflow社区                </Style>
            </ItemsControl.ItemContainerStyle>

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

        </ItemsControl>
    </Grid>

This works great except for the uncentered ellipses. Any ideas?

You can use EllipseGeometry to accomplish this.

The XAML:

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

The View Model:

public Point CenterPoint { get; set;}

Can't take credit, I found this here.

Its not fully automatic but this solution does at least keep the centering logic inside the view and doesn't muddy your model

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

I suggest, you DO change your ViewModel and name the properties Left and Top, so it is clear what is meant. If you also need the X and Y values, just leave them. I suggest this, because X and Y can mean different things, dependent on the shape you are drawing.

Since the Canvas.Left/Right/Top/Bottom properties measure distance between those sides of the Canvas and the associated sides of your Ellipse, the only way to use them to control where the center of the Ellipse lands is to accommodate its Height and Width in the ViewModel.

In other words, however you've determined that the Ellipse's center should land at (4,6), and that it should have Height/Width = 10, the X and Y properties exposed by the ViewModel should have the values 4 - 10 and 6 - 10 (i.e. (-6,-4)), which would be the resulting values of Canvas.Left and Canvas.Top.

Update: After thinking about this a little more, an alternative occurred to me. As a caveat, I haven't tested this. But if you just used your current solution and styled the Ellipses such that their Margin (or at least their Top/Left margins) were equal to -1 * Height (or Width), that would (I think) land their center on the coordinates given by X and Y... Worth a shot. :)