渲染器和属性（1）

Xamarin.Forms包含一个BoxView元素，用于显示矩形颜色块。你有没有希望你有类似的东西画一个圆圈，或使它更通用，椭圆？
这就是EllipseView的目的。但是，因为您可能希望在多个应用程序中使用EllipseView，所以它在第20章“异步和文件I / O”中介绍的Xamarin.FormsBook.Platform库中实现。
BoxView自己定义了一个属性 - Color类型的Color属性 - EllipseView也可以这样做。它不需要属性来设置椭圆的宽度和高度，因为它从VisualElement继承WidthRequest和HeightRequest。
所以这里是Xamarin.FormsBook.Platform库项目中定义的EllipseView：

namespace Xamarin.FormsBook.Platform
{
    public class EllipseView : View
    {
        public static readonly BindableProperty ColorProperty =
            BindableProperty.Create(
                "Color",
                typeof(Color),
                typeof(EllipseView),
                Color.Default);
        public Color Color
        {
            set { SetValue(ColorProperty, value); }
            get { return (Color)GetValue(ColorProperty); }
        }
        protected override SizeRequest OnSizeRequest(double widthConstraint,
                                                     double heightConstraint)
        {
            return new SizeRequest(new Size(40, 40));
        }
    }
}

Color属性只涉及可绑定属性的基本定义，没有propertychanged处理程序。属性已定义，但似乎没有做任何事情。不知何故，EllipseView中定义的Color属性必须与渲染器渲染的对象上的属性相关联。
EllipseView中唯一的其他代码是OnSizeRequest的覆盖，用于设置椭圆的默认大小，与BoxView相同。
让我们从Windows平台开始吧。事实证明，EllipseView的Windows渲染器比iOS和Android渲染器更简单。
您可能还记得，第20章中创建的Xamarin.FormsBook.Platform解决方案具有允许在各种Windows平台之间共享代码的工具：Xamarin.FormsBook.Platform.UWP库，Xamarin.FormsBook.Platform.Windows库，和Xamarin.FormsBook.Platform.WinPhone库都引用了Xamarin.FormsBook.Platform.WinRT库，它根本不是一个库，而是一个共享项目。这个共享项目是所有Windows平台的EllipseViewRenderer类可以驻留的位置。
在Windows平台上，EllipseView可以由Windows.UI.Xaml.Shapes命名空间中名为Ellipse的强制Windows元素呈现，因为Ellipse满足从Windows.UI.Xaml.FrameworkElement派生的条件。
Ellipse被指定为ViewRenderer类的第二个泛型参数。由于此文件由所有Windows平台共享，因此需要一些预处理指令来包含ExportRendererAttribute和ViewRenderer类的正确名称空间：

using System.ComponentModel;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
#if WINDOWS_UWP
using Xamarin.Forms.Platform.UWP;
#else
using Xamarin.Forms.Platform.WinRT;
#endif
[assembly: ExportRenderer(typeof(Xamarin.FormsBook.Platform.EllipseView), 
                          typeof(Xamarin.FormsBook.Platform.WinRT.EllipseViewRenderer))]
namespace Xamarin.FormsBook.Platform.WinRT
{
    public class EllipseViewRenderer : ViewRenderer<EllipseView, Ellipse>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<EllipseView> args)
        {
            base.OnElementChanged(args);
            if (Control == null)
            {
                SetNativeControl(new Ellipse());
            }
            if (args.NewElement != null)
            {
                SetColor();
            }
        }
        __
    }
}

正如您现在所期望的那样，OnElementChanged覆盖首先检查Control属性是否为null，如果是，则创建本机对象，在本例中为Ellipse，并将其传递给SetNativeControl。此后，Control属性设置为此Ellipse对象。
此OnElementChanged重写还包含一些涉及ElementChangedEventArgs参数的附加代码。这需要一点解释：
每个渲染器实例在此示例中，此EllipseViewRenderer类的实例包含本机对象的单个实例，在此示例中为Ellipse。
但是，渲染基础结构具有将渲染器实例附加到Xamarin.Forms元素并将其分离并将另一个Xamarin.Forms元素附加到同一渲染器的功能。也许Xamarin.Forms需要重新创建元素或替换另一个元素，以准备与渲染器关联的元素。
通过调用OnElementChanged将此类更改传递给渲染器。 ElementChangedEventArgs参数包括两个属性，OldElement和NewElement，两者都是ElementChangedEventArgs的泛型参数中指示的类型，在本例中为EllipseView。在许多情况下，您不必担心从单个渲染器实例附加和分离的不同Xamarin.Forms元素。但在某些情况下，您可能希望利用此机会清理或释放渲染器使用的某些资源。
在最简单和最常见的情况下，每个渲染器实例将为使用该渲染器的Xamarin.Forms视图调用OnElementChanged。您将使用对OnElementChanged的调用来创建本机元素并将其传递给SetNativeControl，如您所见。在调用SetNativeControl之后，ViewRenderer定义的Control属性是本机对象，在本例中是Ellipse。
在您调用OnElementChanged时，可能已经创建了Xamarin.Forms对象（在本例中为EllipseView），并且可能还设置了一些属性。（换句话说，在渲染器需要显示元素时，可能会使用一些属性设置初始化该元素。）但系统的设计使其不一定如此。随后对OnElementChanged的调用可能表明已创建了EllipseView。
重要的是事件参数的NewElement属性。如果该属性不为null（这是正常情况），则该属性是Xamarin.Forms元素，您应该将该Xamarin.Forms元素的属性设置传输到本机对象。这是调用上面显示的SetColor方法的目的。你很快就会看到那种方法的主体。
ViewRenderer定义了一个名为Element的属性，它将其设置为Xamarin.Forms元素，在本例中为EllipseView。如果最近对OnElementChanged的调用包含非null的NewElement属性，则Element是同一个对象。
总之，这些是您可以在整个渲染器类中使用的两个基本属性：

Element - Xamarin.Forms元素，如果最近的OnElementChanged调用具有非null的NewElement属性，则该元素有效。
Control-本机视图，窗口小部件或控件对象，在调用SetNativeView后有效。

如您所知，Xamarin.Forms元素的属性可以更改。例如，EllipseView的Color属性可能是动画的。如果Color等属性由可绑定属性支持，则对该属性的任何更改都会导致触发PropertyChanged事件。
还会向渲染器通知该属性更改。附加到渲染器的Xamarin.Forms元素中对可绑定属性的任何更改也会导致在ViewRenderer类中调用受保护的虚拟OnElementPropertyChanged方法。在此特定示例中，对EllipseView中任何可绑定属性的任何更改（包括Color属性）都会生成对OnElementPropertyChanged的调用。您的渲染器应覆盖该方法并检查哪个属性已更改：

namespace Xamarin.FormsBook.Platform.WinRT
{
    public class EllipseViewRenderer : ViewRenderer<EllipseView, Ellipse>
    {
        __
        protected override void OnElementPropertyChanged(object sender,
        PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(sender, args);
            if (args.PropertyName == EllipseView.ColorProperty.PropertyName)
            {
                SetColor();
            }
        }
        __
    }
}

如果Color属性已更改，则事件参数的PropertyName属性为“Color”，即创建EllipseView.ColorProperty可绑定属性时指定的文本名称。但为了避免拼写错误的名称，OnElementPropertyChanged方法检查可绑定属性中的实际字符串值。渲染器必须通过将Color属性的新设置传输到本机对象（在本例中为Windows Ellipse对象）来进行响应。
仅从两个位置调用此SetColor方法 - OnElementChanged覆盖和OnElementPropertyChanged覆盖。在假设在调用OnElementChanged之前属性没有更改的情况下，不要认为您可以跳过OnElementChanged中的调用。通常情况下，在使用属性设置初始化元素后调用OnElementChanged。
但是，SetColor可以对Xamarin.Forms元素和本机控件的存在做出一些有效的假设：当从OnElementChanged调用SetColor时，已创建本机控件且NewElement为非null。这意味着Control和Element属性都是有效的。调用OnElementPropertyChanged时，Element属性也有效，因为这是刚刚更改其属性的对象。
这意味着SetColor方法可以简单地将颜色从Element（Xamarin.Forms元素）传输到Control（本机对象）。为了避免名称空间冲突，此SetColor方法完全限定对名为Color的任何结构的所有引用：

namespace Xamarin.FormsBook.Platform.WinRT
{
    public class EllipseViewRenderer : ViewRenderer<EllipseView, Ellipse>
    {

        void SetColor()
        {
            if (Element.Color == Xamarin.Forms.Color.Default)
            {
                Control.Fill = null;
            }
            else
            {
                Xamarin.Forms.Color color = Element.Color;
                global::Windows.UI.Color winColor =
                global::Windows.UI.Color.FromArgb((byte)(color.A * 255),
                                                  (byte)(color.R * 255),
                                                  (byte)(color.G * 255),
                                                  (byte)(color.B * 255));
                Control.Fill = new SolidColorBrush(winColor);
            }
        }
    }
}

Windows Ellipse对象具有名为Fill的属性Brush属性。默认情况下，此属性为null，如果EllipseView的Color属性为Color.Default，则SetColor方法将其设置为null。否则，必须将Xamarin.Forms Color转换为Windows Color，然后将其传递给SolidColorBrush构造函数。 SolidColorBrush对象设置为Ellipse的Fill属性。
这是Windows版本，但是当需要为EllipseView创建iOS和Android渲染器时，您可能会感到有些不安。这里再次是ViewRenderer的第二个泛型参数的约束：

iOS：TNativeView受限于UIKit.UIView
Android：TNativeView仅限于Android.View.Views
Windows：TNativeElement仅限于Windows.UI.Xaml.FrameworkElement

这意味着要为iOS制作EllipseView渲染器，您需要一个显示椭圆的UIView衍生物。这样的事情存在吗？不，不是的。因此，你必须自己制作一个。这是制作iOS渲染器的第一步。
出于这个原因，Xamarin.FormsBook.Platform.iOS库包含一个名为EllipseUIView的类，它从UIView派生，其唯一目的是绘制一个椭圆：

using CoreGraphics;
using UIKit;
namespace Xamarin.FormsBook.Platform.iOS
{
    public class EllipseUIView : UIView
    {
        UIColor color = UIColor.Clear;
        public EllipseUIView()
        {
            BackgroundColor = UIColor.Clear;
        }
        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            using (CGContext graphics = UIGraphics.GetCurrentContext())
            {
                //Create ellipse geometry based on rect field.
                CGPath path = new CGPath();
                path.AddEllipseInRect(rect);
                path.CloseSubpath();
                //Add geometry to graphics context and draw it.
                color.SetFill();
                graphics.AddPath(path);
                graphics.DrawPath(CGPathDrawingMode.Fill);
            }
        }
        public void SetColor(UIColor color)
        {
            this.color = color;
            SetNeedsDisplay();
        }
    }
}

该类重写OnDraw方法以创建椭圆的图形路径，然后在图形上下文中绘制它。它使用的颜色存储为一个字段，最初设置为UIColor.Clear，它是透明的。但是，您会注意到底部的SetColor方法。这为类提供了新的颜色，然后调用SetNeedsDisplay，它使绘图表面无效并生成对OnDraw的另一个调用。
另请注意，UIView的BackgroundColor在UIColor.Clear的构造函数中设置。如果没有该设置，视图在椭圆未覆盖的区域中具有黑色背景。

第二十七章：自定义渲染器（三）

渲染器和属性（1）

热门文章

最新文章

相关电子书

相关实验场景