如何在 Silverlight 中的 Border 元素上制作虚线边框？答案

【问题标题】：How to make a dotted border on a Border element in Silverlight?如何在 Silverlight 中的 Border 元素上制作虚线边框？
【发布时间】：2010-05-28 13:03:10
【问题描述】：

如何使此 Border Silverlight 元素的底部边框在红色实线线内有一个红色点？

Border border = new Border();
border.CornerRadius = new CornerRadius(5);
border.BorderThickness = new Thickness(0, 0, 0, 1);
border.BorderBrush = new SolidColorBrush(Colors.Red);

【问题讨论】：

标签： c# .net silverlight border dotted-line

【解决方案1】：

你能用 Grid 替换边框并给它一个填充整个区域的 Rectangle 吗？

<Rectangle Stretch="Fill" RadiusX="10" RadiusY="10" StrokeDashArray="10, 2" Stroke="Black" Fill="White" />

StrokeDashArray 可用于将其绘制成点状，但 Border 没有这样的属性。

编辑：

因为我注意到你只是在底部边框上加点，你可以做这样的事情

<Border Width="100" Height="100" Background="Blue" BorderThickness="0,0,0,1">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint=".2,0" SpreadMethod="Repeat" >
            <GradientStopCollection>
                <GradientStop Color="Transparent" Offset="0" />
                <GradientStop Color="Transparent" Offset="0.3" />
                <GradientStop Color="Red" Offset="0.3" />
                <GradientStop Color="Red" Offset="0.6" />
                <GradientStop Color="Transparent" Offset="0.6" />
                <GradientStop Color="Transparent" Offset="1" />
            </GradientStopCollection>
        </LinearGradientBrush>
    </Border.BorderBrush>
</Border>

调整中间两个 GradientStop 的 Offset 以调整红点/破折号的宽度。您可能还需要调整端点以使其以所需的间隔重复。

【讨论】：

如果您不希望沿线的破折号在调整大小时移动，您应该在LinearGradientBrush 上设置MappingMode="Absolute"。进行更改后，您可能还需要调整其他一些参数。

【解决方案2】：

Stephan 的回答很有帮助。但是，如果您想要一条在调整大小时不会伸展的简单虚线，请尝试以下 XAML：

<!-- Horizontal dotted line -->
<Border HorizontalAlignment="Stretch" Height="1" BorderThickness="0,0,0,1">
  <Border.BorderBrush>
    <LinearGradientBrush StartPoint="0,0" EndPoint="2,0"
                         SpreadMethod="Repeat" MappingMode="Absolute">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.499" />
        <GradientStop Color="#999" Offset="0.5" />
    </LinearGradientBrush>
  </Border.BorderBrush>                              
</Border>

这是垂直虚线的替代方案：

<!-- Vertical dotted line -->
<Border VerticalAlignment="Stretch" Width="1" BorderThickness="0,0,1,0">
  <Border.BorderBrush>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,2"
                         SpreadMethod="Repeat" MappingMode="Absolute">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.499" />
        <GradientStop Color="#999" Offset="0.5" />
    </LinearGradientBrush>
  </Border.BorderBrush>                              
</Border>

巧合的是，如果您在不是 1 像素宽/高的区域上使用此笔刷，那么您会得到一个漂亮的细条纹图案。

【讨论】：