更改控制画布中的零点答案

【问题标题】：Change controls zero point in canvas更改控制画布中的零点
【发布时间】：2015-02-12 14:24:07
【问题描述】：

当我在画布中绘制项目时，位置是从画布内项目的顶部开始的：

<Canvas Name="cnvMain"
        Width="80"
        Height="80">
  <Ellipse Canvas.Top="20"
           Canvas.Left="40"
           Width="40"
           Height="40"
           Fill="Gray" />
</Canvas>

现在我需要从元素底部进行测量，如下所示：

最后我希望能够设置从椭圆底部到画布顶部的距离。注意：椭圆有时不能是一个圆，并且不能将其倒置。另外我不知道运行前的高度，所以在 xaml 中设置负边距也不起作用。

（图片和示例 xaml 取自：http://weblogs.asp.net/psheriff/centering-text-within-a-wpf-shape-using-a-canvas）

【问题讨论】：

标签： wpf xaml canvas

【解决方案1】：

如果要指定 Ellipse 底部到 Canvas 底部的距离，可以将 Canvas.Top 替换为 Canvas.Bottom：

<Ellipse Canvas.Bottom="20" Canvas.Left="40" Width="40" Height="40" Fill="Gray"/>

Ellipse 底部到 Canvas 顶部的距离，可以指定负 Margin：

<Ellipse Canvas.Top="20" Canvas.Left="40" Width="40" Height="40" Fill="Gray"
         Margin="0,-40,0,0"/>

或适当的 RenderTransform：

<Ellipse Canvas.Top="20" Canvas.Left="40" Width="40" Height="40" Fill="Gray">
    <Ellipse.RenderTransform>
        <ScaleTransform ScaleY="-1"/>
    </Ellipse.RenderTransform>
</Ellipse>

为了反转整个 Canvas 坐标系的 y 方向，您可以对 Canvas 应用 RenderTransform：

<Canvas ... RenderTransformOrigin="0,0.5">
    <Canvas.RenderTransform>
        <ScaleTransform ScaleY="-1"/>
    </Canvas.RenderTransform>
    ...
</Canvas>

编辑：您也可以将 Ellipse 放在另一个高度为零的 Canvas 中，并将其附加到 Canvas 的下边框：

<Canvas Canvas.Top="20" Canvas.Left="40" Width="0" Height="0">
    <Ellipse Canvas.Bottom="0" Width="40" Height="40" Fill="Gray"/>
</Canvas>

【讨论】：

我喜欢 RenderTransform 解决方案，因为我并不总是知道椭圆的高度，所以我无法在 xaml 中设置边距。 RenderTransform 现在唯一的问题是它会将整个椭圆倒置。任何想法如何在不翻转的情况下做到这一点？