Question

在我的WPF应用程序中，我想为dag设置reactangle样式并删除该文件。这个盒子的外观应该是这样的。

What i want

可以在XAML中实现这个结果吗？

到目前为止，我已经成功实现了这一目标。

What I currently have

问题出在角落I.角落的外观应该像两个破折号的连接线。例如，左下角 - “L”可以调整反应角的大小。

这是我目前的代码，它是在这个答案的帮助下创建的：
How can I achieve a dashed or dotted border in WPF?

<Rectangle 
        Fill="LightGray"
        AllowDrop="True"
        Stroke="#FF000000"
        StrokeThickness="2" 
        StrokeDashArray="5 4"
        SnapsToDevicePixels="True"
        MinHeight="200"
        MinWidth="200"
        />

Answer 1

要在WPF中获得这些漂亮的L形角，你必须分别绘制水平和垂直边框，因为StrokeDashArray对于两者都不会（总是）相同。

您对StrokeDashArray的要求是：

每一行应以完整的破折号开始和结束
短划线的长度应保持不变
应通过拉伸破折号之间的空格来填充多余/缺失距离

要获得绘制线条所需的精确长度，您必须计算虚线中的线条数（+1）和空格，例如像这样：

private IEnumerable<double> GetDashArray(double length)
{
    double useableLength = length - StrokeDashLine;
    int lines = (int)Math.Round(useableLength/(StrokeDashLine + StrokeDashSpace));
    useableLength -= lines*StrokeDashLine;

    double actualSpacing = useableLength/lines;

    yield return StrokeDashLine / StrokeThickness;
    yield return actualSpacing / StrokeThickness;
}

将其包装在自定义控件中，您将获得以下内容：

<local:NiceCornersControl Fill="LightGray" Stroke="Black" 
  StrokeThickness="2" StrokeDashLine="5" StrokeDashSpace="5">
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" 
      Text="Drop files here"/>
</local:NiceCornersControl>

你应该注意的几件事情：

要让您的线条在矩形的“内部”，您需要将它们偏移StrokeThickness / 2
DashStyle将与您的StrokeThickness
对于半透明笔触颜色，这可能看起来很奇怪

控件的完整代码：

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace InsertNamespaceHere
{
    public class NiceCornersControl : ContentControl
    {
        public static readonly DependencyProperty StrokeProperty = DependencyProperty.Register(
            "Stroke", typeof(Brush), typeof(NiceCornersControl), new PropertyMetadata(default(Brush), OnVisualPropertyChanged));

        public Brush Stroke
        {
            get { return (Brush)GetValue(StrokeProperty); }
            set { SetValue(StrokeProperty, value); }
        }

        public static readonly DependencyProperty StrokeThicknessProperty = DependencyProperty.Register(
            "StrokeThickness", typeof(double), typeof(NiceCornersControl), new PropertyMetadata(default(double), OnVisualPropertyChanged));

        public double StrokeThickness
        {
            get { return (double)GetValue(StrokeThicknessProperty); }
            set { SetValue(StrokeThicknessProperty, value); }
        }

        public static readonly DependencyProperty StrokeDashLineProperty = DependencyProperty.Register(
            "StrokeDashLine", typeof(double), typeof(NiceCornersControl), new PropertyMetadata(default(double), OnVisualPropertyChanged));

        public double StrokeDashLine
        {
            get { return (double)GetValue(StrokeDashLineProperty); }
            set { SetValue(StrokeDashLineProperty, value); }
        }

        public static readonly DependencyProperty StrokeDashSpaceProperty = DependencyProperty.Register(
            "StrokeDashSpace", typeof(double), typeof(NiceCornersControl), new PropertyMetadata(default(double), OnVisualPropertyChanged));

        public double StrokeDashSpace
        {
            get { return (double)GetValue(StrokeDashSpaceProperty); }
            set { SetValue(StrokeDashSpaceProperty, value); }
        }

        public static readonly DependencyProperty FillProperty = DependencyProperty.Register(
            "Fill", typeof(Brush), typeof(NiceCornersControl), new PropertyMetadata(default(Brush), OnVisualPropertyChanged));

        public Brush Fill
        {
            get { return (Brush)GetValue(FillProperty); }
            set { SetValue(FillProperty, value); }
        }

        private static void OnVisualPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((NiceCornersControl)d).InvalidateVisual();
        }

        public NiceCornersControl()
        {
            SnapsToDevicePixels = true;
            UseLayoutRounding = true;
        }

        protected override void OnRender(DrawingContext drawingContext)
        {
            double w = ActualWidth;
            double h = ActualHeight;
            double x = StrokeThickness / 2.0;

            Pen horizontalPen = GetPen(ActualWidth - 2.0 * x);
            Pen verticalPen = GetPen(ActualHeight - 2.0 * x);

            drawingContext.DrawRectangle(Fill, null, new Rect(new Point(0, 0), new Size(w, h)));

            drawingContext.DrawLine(horizontalPen, new Point(x, x), new Point(w - x, x));
            drawingContext.DrawLine(horizontalPen, new Point(x, h - x), new Point(w - x, h - x));

            drawingContext.DrawLine(verticalPen, new Point(x, x), new Point(x, h - x));
            drawingContext.DrawLine(verticalPen, new Point(w - x, x), new Point(w - x, h - x));
        }

        private Pen GetPen(double length)
        {
            IEnumerable<double> dashArray = GetDashArray(length);
            return new Pen(Stroke, StrokeThickness)
            {
                DashStyle = new DashStyle(dashArray, 0),
                EndLineCap = PenLineCap.Square,
                StartLineCap = PenLineCap.Square,
                DashCap = PenLineCap.Flat
            };
        }

        private IEnumerable<double> GetDashArray(double length)
        {
            double useableLength = length - StrokeDashLine;
            int lines = (int)Math.Round(useableLength / (StrokeDashLine + StrokeDashSpace));
            useableLength -= lines * StrokeDashLine;
            double actualSpacing = useableLength / lines;

            yield return StrokeDashLine / StrokeThickness;
            yield return actualSpacing / StrokeThickness;
        }
    }
}

Answer 2

这不是答案，而是一个建议。事实上，我不确定这是否可行（或许您可以通过获取控件的宽度和高度来计算validate）。但是，您可以使用动画：

StrokeDashArray

WPF与两个破折号连接线的角落反复使用

2 个答案: