绘制虚线边框

我正在将应用程序从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均匀虚线圆角的边框一样的吗？

来源

2017-02-28 Ciprian Dragoe

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

来源

2017-02-28 18:46:29 AVK

真的很巧妙和简单的方法 –

为此，我认为你应该建立自己的模板控制，样品，您可以下载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>

效果：

来源

2017-02-28 16:20:21 Romasz

绘制虚线边框

回答

相关问题