X、Y 处的 WPF 中心椭圆 [英] WPF Center Ellipse at X, Y

问题描述

我有一个 ItemsControl，它在 Canvas 上的散点图中绘制了数千个椭圆.我的问题是，如果我将一个椭圆放置在坐标 (4, 6) 处，高度和宽度为 10.椭圆的左上角位于 (4, 6) 处，并且形状向下和向右延伸.

我想做的是将椭圆居中放置在 XAML 中的特定坐标上，而不必在我的 ViewModel 层中使用调整.

这是具有我的图表的工作 UserControl:

<ItemsControl ItemsSource="{Binding State.Data}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><Canvas ClipToBounds="False"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemContainerStyle><Style TargetType="ContentPresenter"><Setter Property="Canvas.Left" Value="{绑定路径=X}"/><Setter Property="Canvas.Top" Value="{绑定路径=Y}"/></风格></ItemsControl.ItemContainerStyle><ItemsControl.ItemTemplate><数据模板><Ellipse Fill="Red" VerticalAlignment="Center" Horizo​​ntalAlignment="Center" Width="10" Height="20"/></数据模板></ItemsControl.ItemTemplate></ItemsControl></网格>

除了未居中的椭圆之外，这很好用.有什么想法吗?

解决方案

您可以使用 EllipseGeometry 来完成此操作.

XAML:

<Path Stroke="Black" StrokeThickness="3" Fill="Red" ><路径.数据><椭圆几何中心="{绑定路径=中心点}"半径X=5"RadiusY="10"/></Path.Data></路径>

视图模型:

public Point CenterPoint { get;放;}

无法相信，我在这里找到了这个.

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}" />
                </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.

这篇关于X、Y 处的 WPF 中心椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！