定位 WPF 路径，使其原点位于其容器的底部、中心答案

【问题标题】：Position a WPF Path so that its origin is located at the bottom, center of its container定位 WPF 路径，使其原点位于其容器的底部、中心
【发布时间】：2012-03-05 20:36:49
【问题描述】：

我正在尝试将 Path 居中，使其原点 (0, 0) 位于其容器的底部中心。假设容器是Grid。

示例：

注意：箭头的尾部在原点 (0, 0)。尾巴水平居中，但整体箭头向左倾斜。无论箭头指向哪个方向，这都是我想要实现的目标。

这需要适用于 x 和 y 坐标为正、负或两者混合的路径。

如何通过 XAML 以最少的标记来完成这项工作？

【问题讨论】：

标签： wpf xaml geometry pathgeometry

【解决方案1】：

这是我一直在使用的。只需在您想要的任何地方绘制您的路径，然后将其转换为所需的起点。您可以使用绑定使其在网格中居中。这允许您将几何图形放置在网格中的任何位置。

<Grid>
    <Path Stroke="Black"
          StrokeThickness="1">
        <Path.Data>
            <PathGeometry>
                <!-- Your path geomrtry -->
            </PathGeometry>
        </Path.Data>
        <Path.RenderTransform>
            <TranslateTransform Y="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}, Path=ActualHeight, Converter={StaticResource widthAndHeightDivider}}"
                                X="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource widthAndHeightDivider}}"/>
        </Path.RenderTransform>
    </path>
</Grid>

并具有以下转换器，它将网格的 ActualWidth 除以使其居中：

public class WidthAndHeightDivider : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double d = (double)value / 2.0;
        return d;
    }
}

我希望这会有所帮助！

【讨论】：

【解决方案2】：

这就是我最终的结果。似乎可行，但如果有更清洁的方法可以做到这一点，我很想听听：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Path Grid.Column="1"
          HorizontalAlignment="Left"
          VerticalAlignment="Bottom"
          StrokeThickness="1"
          Data="{Binding PathGeometry}" />
</Grid>

【讨论】：

这不是左对齐路径吗？
列定义将网格分成两半，然后路径在右半部分内左对齐。真正令人困惑的部分是对齐的不是整个路径，而是路径中 (x, y) 值为正的部分。
起初我打算建议你不要这样做，而是像其他答案一样使用渲染转换，但我更多地考虑面板布局的实际工作方式以及转换如何工作以及如何这有一个额外的好处是不知道或关心路径的大小，我越是意识到这实际上很聪明！在某些情况下，我可能不得不为自己写下这个想法！ :)
顺便说一句，并不是“只有积极的部分”才会对齐。出于布局目的，路径的左侧和顶部“边缘”分别沿着 y 轴和 x 轴。然而，宽度和高度由绘制路径的最下方和最右侧部分确定。例如，如果您希望在 100x100 区域的中心有一个直径为 20 的圆，如果您没有手动设置宽度，您最终会得到一个 60x60 的控件，圆位于右下角。您的技巧完全无需担心尺寸，这就是它实际上非常聪明的原因！

【解决方案3】：

嗯......底部中间的位置取决于容器。试试这样的：

<Grid>
  <Path Stroke="Black"
        StrokeThickness="1"
        VerticalAlignment="Bottom"
        HorizontalAlignment="Center"
        Data="M 0,0 L -50,-70 L -50,-80" />
</Grid>

【讨论】：

这是我尝试的第一件事。它仅在箭头指向 NW（如您的示例中）或 SW 时才有效。如果箭头指向 NE 或 SE，我也需要它来工作。而且我不能反转箭头，使箭头的头部在（0, 0）处，即尾部必须在（0, 0）处。