点線の枠を描く

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> 

効果：