X,Y处的WPF中心椭圆

Question

我有一个ItemsControl,它在Canvas上的散点图中绘制了数千个椭圆.我的问题是,如果我将椭圆定位在坐标(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>

除了未经验证的椭圆外,这种方法效果很好.有任何想法吗？

Answer 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;}

不能信用,我在这里找到了.

Answer 2

它不是完全自动的,但这个解决方案至少保持视图中的居中逻辑并且不会使您的模型变得混乱

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

Answer 3

我建议，您应该更改 ViewModel 并将属性命名为 Left 和 Top，这样就可以清楚地了解其含义。如果您还需要 X 和 Y 值，则保留它们即可。我建议这样做，因为 X 和 Y 可能意味着不同的东西，具体取决于您所绘制的形状。