wpf - 显示两个重叠边框 xaml WP8

Question

我有两个 Canvas，其中有 Path 类型。这些元素放置在 map 中，其中有顶部坐标和左侧坐标。这些元素的边框具有不同的颜色。它们的边界重叠，因此仅显示一个带颜色的元素边界。有没有办法调整我的 xaml 代码，以便显示两个边框，而不更改顶部和左侧坐标，因为当我将这些元素放入我的 map 时，我将从 ViewModel 中的列表中获取它们。两个重叠国家/地区的一个示例是:

正如您在图片中看到的那样，您只能看到苏格兰和爱尔兰的边界，而看不到英格兰。我为每个国家/地区使用的 xaml 代码是

    Canvas.Left="{Binding CountryView.X}" Canvas.Top="{Binding CountryView.Y}" Canvas.ZIndex="{Binding CountryView.Z}">     

<Canvas>
        <Path x:Name="CountryUser" Stretch="Fill" StrokeThickness="{StaticResource StrokeUserControl}" StrokeLineJoin="Round" Fill="{StaticResource CountryBackground}" Stroke="{Binding CountryView.CountryColor}" Data="{Binding CountryView.MapData}"/>
    </Canvas>

其中 CountryView 是我的国家/地区列表。我研究了一下 DashArray，是否可以在国家/地区共享边界的地方应用破折号，这样在边界处您就可以更改每种颜色的破折号，但该国家/地区的其他地区与国家/地区是一条线颜色？

Answer 1

如果您有与我相同的经历，那么您将会遇到很多这些小问题，这些小问题可能会成为*的一大痛苦，但是......幸运的是，有几乎总是一个你可以做的解决方法或技巧，你会一路上学到的。对于您当前的问题，您有一些选项可以帮助您的用户解决问题。这里只是其中的一些；

ScaleTransform 或 Margin 您用于轮廓的 Path 1 像素或更多，以便为边框留出一点空间彼此相邻显示，不一定重叠。

在路径之间利用不透明度，无论是直接为路径专门设置不透明度还是使用颜色的Alpha channel 作为您的笔触提供，例如 #59ff0000 ，以允许至少在重叠边框上形成颜色对比。举例来说，您有 2 条路径，一条蓝色，一条黄色，那么它们重叠的地方将显示绿色。

通过 StrokeDashArray 创建对比度，正如您所指出的，通过使用空格/宽度来交错边框，这样即使它们确实重叠，它们仍然不会显示在彼此之上，这也是一种StrokeDashOffset 可以派上用场的地方。

如果您允许用户与这些形状进行交互，我还可以向您展示如何将 VisualStateManager 应用于路径，并在用户使用时为 Stroke 破折号设置动画。被选中等，以使用户更清楚地看到他们所选择的区域。

无论如何，希望这对您有所帮助。如果您想要具体示例，请告诉我。干杯。

更新: 您可以像这样使用 ScaleTransform；

<Canvas>
   <Path x:Name="CountryUser" Stretch="Fill" StrokeThickness="{StaticResource StrokeUserControl}" StrokeLineJoin="Round" Fill="{StaticResource CountryBackground}" Stroke="{Binding CountryView.CountryColor}" Data="{Binding CountryView.MapData}">
     <Path.RenderTransform>
        <CompositeTransform ScaleX="0.95" ScaleY="0.95"/>
     </Path.RenderTransform>
   </Path>
</Canvas>

您可以调整“缩放 X/Y”系数以满足您的需求，但 0.95 本身可能会提供不错的结果。