Draw dotted border

Question

I am porting an app from WPF to UWP. Until now, I had used the following code to draw a dotted border.

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

Unfortunatelly this code is not working anymore in UWP. I have tried the following code but the result is not the same from a visual perspective

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

Does anyone have an idea how to achieve an evenly dotted rounded border in UWP ?

Answer 1

While Romasz solution is good, there is a way to achieve this without a templated control also.

Below is how I would do it.

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

Answer 2

For this purpose I think you should just build own templated control, sample, which you can download via Github (needs modification, but should show main idea):

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

Code behind:

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);
    }
}

And usage:

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

Effect: