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

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

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

效果：

画出虚线边框

2 个答案: