WPF进阶技巧和实战07--自定义元素02

Posted 2021-08-26 蜗牛的希望

在01节中，研究了如何开发自定义控件，下节开始考虑更特殊的选择：派生自定义面板以及构建自定义绘图

创建自定义面板

创建自定义面板是一种比较常见的自定义控件开发子集，面板可以驻留一个或多个子元素，并且实现了特定的布局逻辑以恰当地安排子元素。常见的基本类型的面板：StackPanel、DockPanel、WrapPanel、Canvas，Grid，TabPanel，ToolBarPverflowPanel，VirtualizingPanel。

两步布局过程

每个面板都有相同的功能：负责改变子元素尺寸和安排子元素的两步布局过程。第一个阶段是测量阶段，这个阶段决定其子元素希望具有多大的尺寸。第二个阶段是排列阶段，这个阶段为每个控件指定边界。

可以通过重写函数MeasureOverride()和ArrangeOverride()，来添加自己的逻辑。

1. MeasureOverride()方法

这个方法决定了每个子元素希望多大的空间。会遍历子元素集合，并调用每个子元素的Measure()发放来控制子元素的最大可用空间。最后，面板返回所有子元素所需的空间。

public static readonly DependencyProperty DiameterProperty = DependencyProperty.Register(
            "Diameter", typeof(double), typeof(FixLampCirclePanel), new FrameworkPropertyMetadata(170.0, FrameworkPropertyMetadataOptions.AffectsMeasure));

public double Diameter
{
   get => (double)GetValue(DiameterProperty);
   set => SetValue(DiameterProperty, value);
}

protected override Size MeasureOverride(Size availableSize)
{
    if (Children.Count == 0) return new Size(Diameter, Diameter);

    var newSize = new Size(Diameter, Diameter);

    foreach (UIElement element in Children)
    {
        element.Measure(newSize);
    }

    return newSize;
}

元素调用Measure()方法之后才会渲染自身，后续在子元素执行计算时，才会使用DesiredSize属性来请求尺寸。

2. ArrangeOverride()方法

测量完所有尺寸后，就需要排列所有子元素。Arrange()方法来实现这个过程。

public static readonly DependencyProperty KeepVerticalProperty = DependencyProperty.Register(
    "KeepVertical", typeof(bool), typeof(FixLampCirclePanel), new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsMeasure));

public bool KeepVertical
{
    get => (bool)GetValue(KeepVerticalProperty);
    set => SetValue(KeepVerticalProperty, value);
}

public static readonly DependencyProperty OffsetAngleProperty = DependencyProperty.Register(
    "OffsetAngle", typeof(double), typeof(FixLampCirclePanel), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure));

public double OffsetAngle
{
    get => (double)GetValue(OffsetAngleProperty);
    set => SetValue(OffsetAngleProperty, value);
}



protected override Size ArrangeOverride(Size finalSize)
{
    if (base.Children.Count == 0) return finalSize;

    //第一个放在中间，第一个移动半径为0即可，其余的均分布
    var perDeg = 360.0 / (Children.Count - 1);
    var radius = 0.0;
    for (int i = 0; i < Children.Count; i++)
    {
        if (i != 0) radius = Diameter / 2;

        UIElement element = base.Children[i];
        var centerX = element.DesiredSize.Width / 2.0;
        var centerY = element.DesiredSize.Height / 2.0;
        var angle = perDeg * i + OffsetAngle;
        var transform = new RotateTransform
        {
            CenterX = centerX,
            CenterY = centerY,
            Angle = KeepVertical ? 0 : angle
        };
        element.RenderTransform = transform;
        var r = Math.PI * angle / 180.0;
        var x = radius * Math.Cos(r);
        var y = radius * Math.Sin(r);
        var rectX = x + finalSize.Width / 2 - centerX;
        var rectY = y + finalSize.Height / 2 - centerY;
        element.Arrange(new Rect(rectX, rectY, element.DesiredSize.Width, element.DesiredSize.Height));
    }

    return finalSize;
}

Canvas面板的副本

Canvas面板在希望的位置放置子元素，并且为子元素设置他们希望的尺寸。所以不需要计算如何分割可用空间，所以为每个子元素提供无线的空间。同时，返回值是空的Size对象，所以面板是不请求任何空间，而是由您明确地为Canvas面板指定尺寸，或者将其放置到布局容器中进行拉伸以填充整个容器可用的空间。

protected override Size MeasureOverride(Size constraint)
{
    Size availableSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
    foreach (UIElement internalChild in base.InternalChildren)
    {
        internalChild?.Measure(availableSize);
    }

    return default(Size);
}

ArrangeOverride()方法通过附加属性（Left，Right，Top，Bottom）来确定每个子元素的位置。

protected override Size ArrangeOverride(Size arrangeSize)
{
    foreach (UIElement internalChild in base.InternalChildren)
    {
        if (internalChild == null)
        {
            continue;
        }

        double x = 0.0;
        double y = 0.0;
        double left = Canvas.GetLeft(internalChild);
        if (!Double.IsNaN(left))
        {
            x = left;
        }
        else
        {
            double right = Canvas.GetRight(internalChild);
            if (!Double.IsNaN(right))
            {
                x = arrangeSize.Width - internalChild.DesiredSize.Width - right;
            }
        }

        double top = Canvas.GetTop(internalChild);
        if (!Double.IsNaN(top))
        {
            y = top;
        }
        else
        {
            double bottom = Canvas.GetBottom(internalChild);
            if (!Double.IsNaN(bottom))
            {
                y = arrangeSize.Height - internalChild.DesiredSize.Height - bottom;
            }
        }

        internalChild.Arrange(new Rect(new Point(x, y), internalChild.DesiredSize));
    }

    return arrangeSize;
}

更好的WrapPanel

在传统的WrapPanel中添加强制换行的功能，可以通过自定义控件来实现。首先要添加强制换行附加属性。没有使用常规属性封装器封装这个属性，因为不在定义他们的同一个类中设置它，而是使用两个静态方法。

public static readonly DependencyProperty LineBreakBeforeProperty = 
    DependencyProperty.RegisterAttached("LineBreakBefore", typeof(bool), typeof(WrapBreakPanel), 
        new FrameworkPropertyMetadata() { AffectsArrange = true, AffectsMeasure = true });

public static void SetLineBreakBefore(UIElement element, bool value)
        {
            element.SetValue(LineBreakBeforeProperty, value);
        }
public static bool GetLineBreakBefore(UIElement element)
{
    return (bool)element.GetValue(LineBreakBeforeProperty);
}

自定义绘图元素

在WPF中，这些类位于元素树的最底层，通过单独的文本、形状、位图来执行渲染。

OnRender（）方法

需要执行自定义渲染，就必须重写OnRender()方法，该方法继承自UIElement基类。一些空间使用OnRender()方法绘制可视化细节并在其上叠加其他元素形成组合。Border类是OnRender()方法中绘制边框，Panel类是在OnRender()方法中绘制背景。两者都支持子内容，并且这些子内容在自定义的绘图之上进行渲染。

OnRender()方法接收一个DrawingContext对象，使用这个对象进行绘制操作。OnRender()方法中不能显示的创建和关闭DrawingContext对象，因为几个不同的OnRender()方法使用相同的DrawingContext对象，在开始绘制时，WPF会自动创建DrawingContext对象，并且当不再需要时自动关闭该对象。

OnRender()方法实际上并没有绘制在屏幕上，而是绘制在DrawingContext对象上，然后WPF缓存这些信息。WPF来决定何时需要重新绘制并使用DrawingContext对象创建内容。WPF无缝地管理绘制和刷新的过程，由用户来定义内容。

自定义绘图元素

下面的例子通过RadialGradientBrush画刷绘制阴影背景，中心点跟随鼠标移动。

public class CustomDrawnElement : FrameworkElement
{
    public Color BackgroundColor { get => (Color)GetValue(BackgroundColorProperty); set => SetValue(BackgroundColorProperty, value); }
    public static readonly DependencyProperty BackgroundColorProperty =
        DependencyProperty.Register("BackgroundColor", typeof(Color), typeof(CustomDrawnElement),
            new FrameworkPropertyMetadata(Colors.Yellow) { AffectsRender = true });

    protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);
        this.InvalidateVisual();
    }

    protected override void OnMouseLeave(MouseEventArgs e)
    {
        base.OnMouseLeave(e);
        this.InvalidateVisual();
    }



    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);

        Rect rect = new Rect(0, 0, base.ActualWidth, ActualHeight);
        drawingContext.DrawRectangle(GetForegroundBrush(), null, rect);
    }

    private Brush GetForegroundBrush()
    {
        if (!IsMouseOver)
        {
            return new SolidColorBrush(BackgroundColor);
        }
        else
        {
            RadialGradientBrush brush = new RadialGradientBrush(Colors.White, BackgroundColor);

            Point point = Mouse.GetPosition(this);
            Point newPoint = new Point(point.X / base.ActualWidth, point.Y / base.ActualHeight);

            brush.GradientOrigin = newPoint;
            brush.Center = newPoint;

            return brush;
        }
    }
}

创建自定义元素

在WPF中，切记不要再控件中进行自定义绘图，会破坏WPF无外观控件的原则。一旦使用了绘图逻辑，就会使得控件的可视化外观不能通过控件模板来定制。

更好的方法是设计单独的绘制自定义内容的元素，然后再控件的默认模板内部使用自定义元素。