【问题标题】:WPF reactangle border with corner from connecting line of two dashesWPF反应角边框与两条破折号的连接线的角
【发布时间】:2017-07-09 13:22:07
【问题描述】:

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

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

到目前为止,我已经设法实现了这一点。

问题出在拐角处 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"
        />

【问题讨论】:

  • 嗯,您可以通过覆盖自定义控件的OnRender 方法自己绘制它。

标签: c# wpf xaml


【解决方案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;
        }
    }
}

【讨论】:

  • @Vrabec0853 您将使用它代替 Rectangle 控件(或编写使用它的ControlTemplate,或覆盖Rectangle 而不是Control / ContentControl 等)。或者,您可以编写一个MultiValueConverter,它获取矩形的宽度和高度,并将其转换为一个长得可笑的 StrokeDashArray,其中包含实现这种外观所需的每一个破折号
  • @fdsfdsfdsfds 如果您希望角落匹配问题中的描述 - 是的
【解决方案2】:

这不是一个答案,而是一个建议。事实上,我不确定这是否可以通过简单的方式实现(也许您可以通过获取控件的宽度和高度来计算StrokeDashArray)。但是,您可以使用动画:

<Grid Margin="3">
    <Rectangle  Name="Rect"
    Fill="LightGray"
    AllowDrop="True"
    Stroke="#FF000000"
    StrokeThickness="2" 
    StrokeDashArray="5 4"
    SnapsToDevicePixels="True"
    MinHeight="200"
    MinWidth="200"
    >
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation To="100" Duration="0:0:10" RepeatBehavior="Forever" By="1" 
                 Storyboard.TargetProperty="StrokeDashOffset" Storyboard.TargetName="Rect"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Grid>

【讨论】:

    猜你喜欢
    • 2016-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-27
    • 1970-01-01
    • 2017-12-30
    • 1970-01-01
    • 2014-09-28
    相关资源
    最近更新 更多