WPF Center Ellipse en X, Y

Question

Tengo un control de artículos que dibuja miles de elipses en un diagrama de dispersión en un lienzo. Mi problema es que si posiciono una Elipse en las coordenadas (4, 6) con una Altura y un Ancho de 10. La parte superior izquierda de la Elipse está en (4, 6) y la forma se extiende hacia abajo y hacia la derecha.

Lo que me gustaría hacer es centrar las elipses en coordenadas específicas en XAML sin tener que usar ajustes en mi capa ViewModel.

Aquí está el UserControl de trabajo que tiene mi gráfico:

<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>

Esto funciona muy bien, excepto para las elipses no centradas. ¿Algunas ideas?

Answer 1

Le sugiero que cambie su ViewModel y nombre las propiedades Left y Top, para que quede claro lo que significa. Si también necesita los valores X e Y, simplemente déjelos. Sugiero esto, porque X e Y pueden significar cosas diferentes, dependiendo de la forma que estés dibujando.

Answer 2

No es completamente automático, pero esta solución al menos mantiene la lógica de centrado dentro de la vista y no confunde el modelo.

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

Answer 3

Puedes usar EllipseGeometry para lograr esto.

El XAML:

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

El modelo de vista:

public Point CenterPoint { get; set;}

No puedo tomar crédito, encontré esto here .

Answer 4

Ya que las propiedades Canvas.Left / Right / Top / Bottom miden la distancia entre esos lados del Canvas y los lados asociados de su Ellipse, la única forma de usarlos para controlar dónde está el centro de Ellipse es acomodar su Altura y Ancho en el ViewModel.

En otras palabras, sin embargo, ha determinado que el centro de Ellipse debería aterrizar en (4,6), y que debería tener Altura / Ancho = 10, las propiedades X e Y expuestas por ViewModel deberían tener los valores 4 - 10 y 6 - 10 (es decir, (-6, -4)), que serían los valores resultantes de Canvas.Left y Canvas.Top .

Actualización: Después de pensar un poco más en esto, se me ocurrió una alternativa. Como una advertencia, no he probado esto. Pero si solo usó su solución actual y diseñó las elipses de modo que su Margin (o al menos sus márgenes Superior / Izquierdo) fueran iguales a -1 * Height (or Width) , eso (creo) aterrizaría su centro en las coordenadas dado por X e Y ... Vale la pena un tiro. :)