Xamarin. Forms ビジュアルレンダラーを作成するCreate a Xamarin.Forms Visual Renderer

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

Xamarin を使用すると、xamarin のビューをサブクラス化VisualElementしなくても、レンダラーを作成し、オブジェクトに対して選択的に適用できます。Xamarin.Forms Visual enables renderers to be created and selectively applied to VisualElement objects, without having to subclass Xamarin.Forms views. の一部としてIVisual型を指定するレンダラーは、既定のレンダラーではなくビューでの表示に使用されます。 ExportRendererAttributeA renderer that specifies an IVisual type, as part of its ExportRendererAttribute, will be used to render opted in views, rather than the default renderer. レンダラーの選択時に、Visualビューのプロパティを検査および表示機能の選択プロセスに含まれています。At renderer selection time, the Visual property of the view is inspected and included in the renderer selection process.

重要

現在、 Visualビューを表示した後でプロパティを変更することはできませんが、今後のリリースでは変更されません。Currently the Visual property cannot be changed after the view has been rendered, but this will change in a future release.

Xamarin. Forms ビジュアルレンダラーを作成して使用するプロセスは次のとおりです。The process for creating and consuming a Xamarin.Forms Visual renderer is:

  1. 必要なビューのプラットフォームレンダラーを作成します。Create platform renderers for the required view. 詳細については、「レンダラーを作成する」を参照してください。For more information, see Create renderers.
  2. からIVisual派生する型を作成します。Create a type that derives from IVisual. 詳細については、「 IVisual 型の作成」を参照してください。For more information, see Create an IVisual type.
  3. レンダラーをIVisual装飾ExportRendererAttributeするの一部として、型を登録します。Register the IVisual type as part of the ExportRendererAttribute that decorates the renderers. 詳細については、「 IVisual 型の登録」を参照してください。For more information, see Register the IVisual type.
  4. ビューのVisualプロパティをIVisual名前に設定して、ビジュアルレンダラーを使用します。Consume the Visual renderer by setting the Visual property on the view to the IVisual name. 詳細については、「ビジュアルレンダラーの使用」を参照してください。For more information, see Consume the Visual renderer.
  5. optionalIVisual型の名前を登録します。[optional] Register a name for the IVisual type. 詳細については、「 IVisual 型の名前を登録する」を参照してください。For more information, see Register a name for the IVisual type.

プラットフォームレンダラーを作成するCreate platform renderers

レンダラークラスの作成の詳細については、「カスタムレンダラー」を参照してください。For information about creating a renderer class, see Custom Renderers. ただし、ビューをサブクラス化しなくても、ビューには Xamarin 形式のビジュアルレンダラーが適用されることに注意してください。However, note that a Xamarin.Forms Visual renderer is applied to a view without having to subclass the view.

ここで説明するレンダラークラスは、 Buttonテキストを影付きで表示するカスタムを実装します。The renderer classes outlined here implement a custom Button that displays its text with a shadow.

iOSiOS

次のコード例は、iOS 用のボタンレンダラーを示しています。The following code example shows the button renderer for iOS:

public class CustomButtonRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            // Cleanup
        }

        if (e.NewElement != null)
        {
            Control.TitleShadowOffset = new CoreGraphics.CGSize(1, 1);
            Control.SetTitleShadowColor(Color.Black.ToUIColor(), UIKit.UIControlState.Normal);
        }
    }
}

AndroidAndroid

次のコード例は、Android 用の button レンダラーを示しています。The following code example shows the button renderer for Android:

public class CustomButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
    public CustomButtonRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            // Cleanup
        }

        if (e.NewElement != null)
        {
            Control.SetShadowLayer(5, 3, 3, Color.Black.ToAndroid());
        }
    }
}

IVisual 型を作成するCreate an IVisual type

クロスプラットフォームライブラリで、からIVisual派生する型を作成します。In your cross-platform library, create a type that derives from IVisual:

public class CustomVisual : IVisual
{
}

その後、 Button 型をレンダラークラスに対して登録し、オブジェクトにレンダラーの使用を許可することCustomVisualができます。The CustomVisual type can then be registered against the renderer classes, permitting Button objects to opt into using the renderers.

IVisual 型の登録Register the IVisual type

プラットフォームプロジェクトで、アセンブリレベルでExportRendererAttributeを追加します。In the platform projects, add the ExportRendererAttribute at the assembly level:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer), new[] { typeof(CustomVisual) })]
namespace VisualDemos.iOS
{
    public class CustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            // ...
        }
    }
}

IOS プラットフォームプロジェクトのこの例では、はExportRendererAttribute 、3番CustomButtonRenderer目の引数として登録ButtonされたIVisual型を使用して、クラスを使用してオブジェクトをレンダリングすることを指定します。In this example for the iOS platform project, the ExportRendererAttribute specifies that the CustomButtonRenderer class will be used to render consuming Button objects, with the IVisual type registered as the third argument. の一部としてIVisual型を指定するレンダラーは、既定のレンダラーではなくビューでの表示に使用されます。 ExportRendererAttributeA renderer that specifies an IVisual type, as part of its ExportRendererAttribute, will be used to render opted in views, rather than the default renderer.

ビジュアルレンダラーを使用するConsume the Visual renderer

オブジェクトButtonは、そのVisualプロパティをに設定するCustomことによって、レンダラークラスの使用を選択できます。A Button object can opt into using the renderer classes by setting its Visual property to Custom:

<Button Visual="Custom"
        Text="CUSTOM BUTTON"
        BackgroundColor="{StaticResource PrimaryColor}"
        TextColor="{StaticResource SecondaryTextColor}"
        HorizontalOptions="FillAndExpand" />

注意

XAML では、型コンバーターによって、 Visualプロパティ値に "Visual" サフィックスを含める必要がなくなります。In XAML, a type converter removes the need to include the "Visual" suffix in the Visual property value. ただし、完全な型名を指定することもできます。However, the full type name can also be specified.

同等の C# コードに示します。The equivalent C# code is:

Button button = new Button { Text = "CUSTOM BUTTON", ... };
button.Visual = new CustomVisual();

Visual レンダラーButtonの選択時に、のプロパティが検査され、レンダラーの選択プロセスに含まれます。At renderer selection time, the Visual property of the Button is inspected and included in the renderer selection process. レンダラーが見つからない場合は、Xamarin. フォームの既定のレンダラーが使用されます。If a renderer isn't located, the Xamarin.Forms default renderer will be used.

次のスクリーンショットは、 Button表示されたを示しています。これは、テキストを影付きで表示します。The following screenshots show the rendered Button, which displays its text with a shadow:

IOS と Android でのシャドウテキスト付きカスタムボタンのスクリーンショットScreenshot of custom Button with shadow text, on iOS and Android

IVisual 型の名前を登録するRegister a name for the IVisual type

VisualAttribute 、必要に応じて、 IVisual型に別の名前を登録するために使用できます。The VisualAttribute can be used to optionally register a different name for the IVisual type. この方法を使用すると、さまざまなビジュアルライブラリ間での名前の競合を解決できます。また、その型名とは異なる名前でビジュアルを参照する場合もあります。This approach can be used to resolve naming conflicts between different Visual libraries, or in situations where you just want to refer to a Visual by a different name than its type name.

VisualAttribute 、クロスプラットフォームライブラリまたはプラットフォームプロジェクトのアセンブリレベルで定義する必要があります。The VisualAttribute should be defined at the assembly level in either the cross-platform library, or in the platform project:

[assembly: Visual("MyVisual", typeof(CustomVisual))]

このIVisual型は、登録された名前を使用して使用できます。The IVisual type can then be consumed through its registered name:

<Button Visual="MyVisual"
        ... />

注意

登録された名前を使用してビジュアルを使用する場合は、任意の "ビジュアル" サフィックスを含める必要があります。When consuming a Visual through its registered name, any "Visual" suffix must be included.