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

不能信用，我发现了here。

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可能意味着不同的东西，取决于你绘制的形状。

Answer 4

由于Canvas.Left / Right / Top / Bottom属性测量Canvas的这些边与Ellipse的关联边之间的距离，因此使用它们来控制 center 的唯一方法Ellipse平台用于在ViewModel中容纳其高度和宽度。

换句话说，无论你确定Ellipse的中心应该落在（4,6），并且它的高度/宽度应该是10，那么X和Y属性会暴露出来通过ViewModel应该具有值4 - 10和6 - 10（即（-6，-4）），这将是Canvas.Left和Canvas.Top的结果值。

更新：在考虑了这个之后，我发现了另一种选择。作为一个警告，我没有测试过这个。但是，如果您只是使用当前的解决方案并设置椭圆形以使其Margin（或至少它们的顶部/左侧边距）等于-1 * Height (or Width)，那么（我认为）将其中心放在由X和Y给出的坐标......值得一试。：）

X，Y处的WPF中心椭圆

4 个答案: