绘制虚线边框

Question

我正在将一个应用程序从 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 中实现均匀点缀的圆角边框？

Answer 1

为此，我认为您应该构建自己的模板化控件示例，您可以下载它 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>

效果：

Answer 2

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

绘制虚线边框

Draw dotted border

border

dotted-line

uwp