Xamarin.Forms - 如何实现 45 度.有角度的背景颜色 [英] Xamarin.Forms - How To Achieve 45 deg. Angled Background Color

问题描述

使用 Xamarin.Forms，我将如何在不使用图像的情况下实现以下有角度的背景:

Using Xamarin.Forms, how would I achieve the following angled background without using an image:

推荐答案

A 100% Xamarin.Forms 没有自定义渲染器"涉及的解决方案:

在下面的例子中，屏幕上Labels后面的半透明框的纯蓝色部分是一个NControl，你也可以做渐变，简单的动画等...但在这种情况下，只是在半透明矩形内绘制了一个实心多边形:

A 100% Xamarin.Forms with no "custom renderer" involved solution:

In the example below, the solid blue portion of the semi-transparent box behind the Labels on the screen is a NControl, you can also do gradients, simple animations, etc... but in this case just a solid polygon is being drawn within a semi-transperent rectangle:

通过NControl 使用NGraphics，您可以在没有自定义渲染器的情况下在Xamarin.Forms 中绘制自定义控件.它不是适用于每个用例的解决方案，但它干净且跨平台(iOS/Android/WinPhone)工作.

Using NGraphics via NControl you can do a lot in terms of drawing custom controls in Xamarin.Forms without custom renderers. It is not a solution in every use-case, but its clean and works cross-platform (iOS/Android/WinPhone).

var overlay = new NControlView()
{
    BackgroundColor = Xamarin.Forms.Color.Black.MultiplyAlpha(.3f),
    DrawingFunction = (canvas, rect) =>
    {
        canvas.FillPath(new PathOp[] {
            new MoveTo (NGraphics.Point.Zero),
            new LineTo ((rect.Width / 3), 0),
            new LineTo ((rect.Width / 3) * 2, rect.Height),
            new LineTo (0, rect.Height),
            new ClosePath ()
        }, Colors.Blue);
    }
};

以 Red 渲染，使用更重的 alpha 设置，以便您可以更好地看到控件:

Rendered in Red with a heavier alpha setting so you can see the control better:

此控件嵌入在使用动态边界的 AbsoluteLayout 中，因此即使方向更改也能得到干净处理:

This control is embedded in an AbsoluteLayout that uses dynamic bounds so even orientation changes are handled cleanly:

AbsoluteLayout.SetLayoutFlags(overlay, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(overlay, new Xamarin.Forms.Rectangle(0, 1, 1, 0.3));

• https://github.com/praeclarum/NGraphics

https://github.com/chrfalch/NControl

这篇关于Xamarin.Forms - 如何实现 45 度.有角度的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！