Question

我想创建一个自定义用户控件来表示2D地图中的玩家。我有一个椭圆来代表玩家，但我希望在椭圆的边框上有一个箭头来指示玩家在哪里。

这就是我的尝试：

<Ellipse Width="17" Height="17" Stroke="Black" Fill="White" HorizontalAlignment="Center" />
    <Path Data="M5,0 0,5 5,10" Fill="White" Stroke="Black" VerticalAlignment="Center" >
        <Path.LayoutTransform>
            <RotateTransform Angle="10"/>
        </Path.LayoutTransform>
    </Path>

结果： enter image description here

这看起来像我想要的（它没有正确对齐，但这不是重点）。

问题是：

我知道没有箭头的椭圆中心的位置
当箭头位于右侧时，椭圆的中心的相对位置将不同 - ＆gt;我可以使用方形控件来解决这个问题
My Circle在顶部（Horitonzal +垂直中心）有一个文本块显示其ID

如何根据位置移动箭头看？我认为更容易计算角度并旋转整个控件。

我的第一个想法是使用任何矢量绘图软件（例如插图画家）绘制路径，并获取路径的坐标，并将它们粘贴到WPF中。

然后只需旋转用户控件。但是这也会旋转文字而我不想让文字旋转。

我坚持这个，我希望我的问题足以被理解。

编辑我的第一次尝试：

<ControlTemplate TargetType="ContentControl">
                        <Grid Width="34" Height="34">
                            <Path x:Name="contour_forme"
                              Stroke="{TemplateBinding BorderBrush}"
                              StrokeThickness="1"
                              Stretch="Uniform"
                              Width="28"
                              Height="22"
                              HorizontalAlignment="Left"
                              Fill="{TemplateBinding Background}"
                              Data="M28.857,53.500 C24.537,53.487 20.477,52.380 16.938,50.443 C16.938,50.443 16.938,50.500 16.938,50.500 C16.938,50.500 16.785,50.350 16.785,50.350 C12.845,48.157 9.579,44.924 7.317,41.032 C7.317,41.032 -6.176,27.755 -6.176,27.755 C-6.176,27.755 8.206,14.530 8.206,14.530 C10.380,11.316 13.289,8.649 16.681,6.736 C16.681,6.736 16.938,6.500 16.938,6.500 C16.938,6.500 16.938,6.581 16.938,6.581 C20.525,4.615 24.641,3.496 29.021,3.509 C42.835,3.551 53.996,14.775 53.951,28.580 C53.906,42.385 42.670,53.542 28.857,53.500 ZM29.004,8.507 C17.953,8.474 8.965,17.400 8.929,28.443 C8.893,39.487 17.822,48.467 28.873,48.500 C39.924,48.533 48.912,39.608 48.948,28.564 C48.985,17.520 40.056,8.540 29.004,8.507 Z"
                              >
                                <Path.LayoutTransform>
                                    <RotateTransform Angle="0" />
                                </Path.LayoutTransform>
                            </Path>
                            <TextBlock Style="{DynamicResource StyleTextes}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Text="5"
                                       />
                        </Grid>
                    </ControlTemplate>

结果： enter image description here 正如您所看到的，我没有设法将文本置于22px圈内。我的箭头大约是6像素高，所以我创建了一个22的控件（预期的圆形大小）+ 2 * 6px，具体取决于箭头位置。

但是当我尝试旋转我的路径时：

<Path.LayoutTransform>         <RotateTransform Angle="90" />
                            </Path.LayoutTransform>

我有以下结果： enter image description here

当我旋转路径时，我不确定如何将路径的圆圈保持在控件的中心。

Answer 1

只需将RotateTransform应用于“图像”，但不应用于文本我也会使用渲染变换而不是布局变换。

    <Canvas Canvas.Left="206.333" Canvas.Top="119" Height="80" Width="80">
    <Path Data="M244,99.333333 L210.16667,109.50034 244.83334,125.50034" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black"  RenderTransformOrigin="0.5,0.5" Height="60" Canvas.Left="3" Canvas.Top="5" Width="60">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="70"/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" Height="20" Width="80" Canvas.Top="30" TextAlignment="Center"/>
    </Canvas>

WPF usercontrol结合了椭圆和箭头

1 个答案: