绘制虚线边框答案

【问题标题】：Draw dotted border绘制虚线边框
【发布时间】：2017-07-19 13:02:05
【问题描述】：

我正在将应用程序从 WPF 移植到 UWP。到目前为止，我一直使用以下代码绘制虚线边框。

<Border.BorderBrush>
    <VisualBrush>
        <VisualBrush.Visual>
            <Rectangle StrokeDashArray="1.0 1.0"
                       Stroke="{StaticResource ListBorderColor}"
                       StrokeThickness="2"
                       RadiusX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.TopRight}"
                       RadiusY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.BottomLeft}"
                       Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                       Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"/>
        </VisualBrush.Visual>
    </VisualBrush>
</Border.BorderBrush>

不幸的是，此代码在 UWP 中不再有效。我尝试了以下代码，但从视觉角度来看结果不一样

<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>

有谁知道如何在 UWP 中实现均匀的圆点圆边框？

【问题讨论】：

标签： uwp border dotted-line

【解决方案1】：

虽然 Romasz 解决方案很好，但也有一种方法可以在没有模板化控件的情况下实现这一点。

下面是我的做法。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Ellipse Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
             Height="100" Width="100"
             StrokeDashCap="Flat" StrokeDashOffset="1.5" 
             StrokeDashArray="1" Stroke="{StaticResource AppBarForeground}" StrokeThickness="3" >
    </Ellipse>
    <TextBlock Text="Drag Here" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{StaticResource AppBarForeground}"/>
</Grid>

【讨论】：

真是巧妙又简单的方法

【解决方案2】：

为此，我认为您应该构建自己的模板控件，示例，您可以下载via Github（需要修改，但应该显示主要思想）：

<Style TargetType="local:DottedBorder" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DottedBorder">
                <Grid Background="{TemplateBinding Background}">
                    <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" StrokeDashArray="{TemplateBinding DashedStroke}"
                               Stroke="{TemplateBinding StrokeBrush}"/>
                    <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

后面的代码：

public sealed class DottedBorder : ContentControl
{
    public SolidColorBrush StrokeBrush
    {
        get { return (SolidColorBrush)GetValue(StrokeBrushProperty); }
        set { SetValue(StrokeBrushProperty, value); }
    }

    public static readonly DependencyProperty StrokeBrushProperty =
        DependencyProperty.Register("StrokeBrush", typeof(SolidColorBrush), typeof(DottedBorder), new PropertyMetadata(null));

    public DoubleCollection DashedStroke
    {
        get { return (DoubleCollection)GetValue(DashedStrokeProperty); }
        set { SetValue(DashedStrokeProperty, value); }
    }

    public static readonly DependencyProperty DashedStrokeProperty =
        DependencyProperty.Register("DashedStroke", typeof(DoubleCollection), typeof(DottedBorder), new PropertyMetadata(null));

    public DottedBorder()
    {
        this.DefaultStyleKey = typeof(DottedBorder);
    }
}

及用法：

<local:DottedBorder Width="100" Height="50" StrokeBrush="Red" DashedStroke="2">
    <TextBlock Text="Something" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</local:DottedBorder>

效果：

【讨论】：