Xamarin.Forms 素材ビジュアルXamarin.Forms Material Visual

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

マテリアルの設計 は、Google によって作成されたこだわりデザインシステムで、ビューやレイアウトの外観と動作について、サイズ、色、スペース、およびその他の側面を規定します。Material Design is an opinionated design system created by Google, that prescribes the size, color, spacing, and other aspects of how views and layouts should look and behave.

Xamarin.Forms 素材ビジュアルを使用して、アプリケーションにマテリアルデザインルールを適用し Xamarin.Forms 、iOS と Android でほぼ同一のアプリケーションを作成できます。Xamarin.Forms Material Visual can be used to apply Material Design rules to Xamarin.Forms applications, creating applications that look largely identical on iOS and Android. 素材ビジュアルが有効になっている場合、サポートされているビューでは、同じデザインクロスプラットフォームが採用されており、統一されたルックアンドフィールが作成されます。When Material Visual is enabled, supported views adopt the same design cross-platform, creating a unified look and feel.

素材の視覚的スクリーンショットMaterial Visual screenshots

アプリケーションで素材を視覚化するためのプロセス Xamarin.Forms は次のとおりです。The process for enabling Xamarin.Forms Material Visual in your application is:

  1. を追加 Xamarin.Forms します。Visual。 iOS および Android プラットフォームのプロジェクトに NuGet パッケージを作成します。Add the Xamarin.Forms.Visual.Material NuGet package to your iOS and Android platform projects. この NuGet パッケージは、iOS および Android で最適化されたマテリアルデザインレンダラーを提供します。This NuGet package delivers optimized Material Design renderers on iOS and Android. IOS では、パッケージは MaterialComponentsに推移的な依存関係を提供します。これは、 Ios 用の Google のマテリアルコンポーネントに対する C# バインドです。On iOS, the package provides the transitive dependency to Xamarin.iOS.MaterialComponents, which is a C# binding to Google's Material Components for iOS. Android では、TargetFramework が正しくセットアップされていることを確認するために、パッケージにビルドターゲットが用意されています。On Android, the package provides build targets to ensure that your TargetFramework is correctly set up.
  2. 各プラットフォームプロジェクトのマテリアルビジュアルを初期化します。Initialize Material Visual in each platform project. 詳細については、「 マテリアルビジュアルの初期化」を参照してください。For more information, see Initialize Material Visual.
  3. 素材デザインルールを適用する Visual ページでプロパティをに設定して、素材ビジュアルコントロールを作成し Material ます。Create Material Visual controls by setting the Visual property to Material on any pages that should adopt the Material Design rules. 詳細については、「 マテリアルレンダラーの使用」を参照してください。For more information, see Consume Material renderers.
  4. optionalマテリアルコントロールをカスタマイズします。[optional] Customize Material controls. 詳細については、「 マテリアルコントロールをカスタマイズする」を参照してください。For more information, see Customize Material controls.


Android では、マテリアルビジュアルには 5.0 (API 21) 以上のバージョンと、バージョン 9.0 (API 28) の TargetFramework が必要です。On Android, Material Visual requires a minimum version of 5.0 (API 21) or greater, and a TargetFramework of version 9.0 (API 28). さらに、プラットフォームプロジェクトには Android サポートライブラリ28.0.0 以上が必要です。また、そのテーマは、マテリアルコンポーネントのテーマを継承するか、AppCompat テーマから継承する必要があります。In addition, your platform project requires Android support libraries 28.0.0 or greater, and its theme needs to inherit from a Material Components theme or continue to inherit from an AppCompat theme. 詳細については、「 Android 用のマテリアルコンポーネントの概要」を参照してください。For more information, see Getting started with Material Components for Android.

素材ビジュアルは現在、次のコントロールをサポートしています。Material Visual currently supports the following controls:

マテリアルコントロールは、マテリアルデザインルールを適用するマテリアルレンダラーによって実現されます。Material controls are realized by Material renderers, which apply the Material Design rules. 機能的には、素材レンダラーは既定のレンダラーとは異なります。Functionally, Material renderers are no different to the default renderers. 詳細については、「 素材ビジュアルをカスタマイズする」を参照してください。For more information, see Customize Material Visual.

マテリアルビジュアルの初期化Initialize Material Visual

をインストールした後 Xamarin.Forms 。Visual のNuGet パッケージ。マテリアルレンダラーは、各プラットフォームプロジェクトで初期化する必要があります。After installing the Xamarin.Forms.Visual.Material NuGet package, the Material renderers must be initialized in each platform project.

IOS では、メソッドの後にメソッドを呼び出すことによって、 AppDelegate.csでこれを行う必要があり Xamarin.Forms.FormsMaterial.Init after Xamarin.Forms.Forms.Init ます。On iOS, this should occur in AppDelegate.cs by invoking the Xamarin.Forms.FormsMaterial.Init method after the Xamarin.Forms.Forms.Init method:


Android では、メソッドの後にメソッドを呼び出すことによって、 MainActivity.csでこれを行う必要があり Xamarin.Forms.FormsMaterial.Init after Xamarin.Forms.Forms.Init ます。On Android, this should occur in MainActivity.cs by invoking the Xamarin.Forms.FormsMaterial.Init method after the Xamarin.Forms.Forms.Init method:

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

マテリアルビジュアルの適用Apply Material Visual

アプリケーションでは、 VisualElement.Visual ページ、レイアウト、またはビューのプロパティを次のように設定することによって、素材をビジュアル化できます MaterialApplications can enable Material Visual by setting the VisualElement.Visual property on a page, layout, or view, to Material:

<ContentPage Visual="Material"

これに相当する C# コードを次に示します。The equivalent C# code is:

ContentPage contentPage = new ContentPage();
contentPage.Visual = VisualMarker.Material;

プロパティをに設定すると、アプリケーションでは、 VisualElement.Visual Material 既定のレンダラーの代わりに素材ビジュアルレンダラーを使用するように指示されます。Setting the VisualElement.Visual property to Material directs your application to use the Material Visual renderers instead of the default renderers. Visualプロパティは、を実装する任意の型に設定でき IVisual VisualMarker ます。クラスでは、次のプロパティを指定し IVisual ます。The Visual property can be set to any type that implements IVisual, with the VisualMarker class providing the following IVisual properties:

  • Default –ビューが既定のレンダラーを使用して表示されることを示します。Default – indicates that the view should render using the default renderer.
  • MatchParent –ビューが直接の親と同じレンダラーを使用する必要があることを示します。MatchParent – indicates that the view should use the same renderer as its direct parent.
  • Material –ビューがマテリアルレンダラーを使用して表示されることを示します。Material – indicates that the view should render using a Material renderer.


Visualプロパティはクラスで定義され VisualElement 、ビューは親の Visual プロパティ値を継承します。The Visual property is defined in the VisualElement class, with views inheriting the Visual property value from their parents. そのため、でプロパティを設定すると、 Visual ContentPage ページ内のサポートされているすべてのビューでそのビジュアルが使用されるようになります。Therefore, setting the Visual property on a ContentPage ensures that any supported views in the page will use that Visual. また、プロパティは Visual ビューでオーバーライドできます。In addition, the Visual property can be overridden on a view.

次のスクリーンショットは、既定のレンダラーを使用して表示されるユーザーインターフェイスを示しています。The following screenshots show a user interface rendered using the default renderers:

IOS と Android での既定のレンダラーのスクリーンショットScreenshot of default renderers, on iOS and Android

次のスクリーンショットは、素材レンダラーを使用してレンダリングされたのと同じユーザーインターフェイスを示しています。The following screenshots show the same user interface rendered using the Material renderers:

IOS と Android でのマテリアルレンダラーのスクリーンショットScreenshot of Material renderers, on iOS and Android

ここで示す既定のレンダラーと素材レンダラーの主な違いは、素材レンダラーによってテキストが大文字 Button になり、境界の角が丸くなることです FrameThe main visible differences between the default renderers and Material renderers, shown here, are that the Material renderers capitalize Button text, and round the corners of Frame borders. ただし、マテリアルレンダラーではネイティブコントロールが使用されるため、フォント、影、色、昇格などの領域では、プラットフォーム間にユーザーインターフェイスの違いが存在する可能性があります。However, Material renderers use native controls, and therefore there may still be user interface differences between platforms for areas such as fonts, shadows, colors, and elevation.


マテリアルデザインコンポーネントは、Google のガイドラインに密接に準拠しています。Material Design components adhere closely to Google's guidelines. そのため、素材デザインレンダラーは、そのサイズと動作にバイアスをかけます。As a result, Material Design renderers are biased towards that sizing and behavior. スタイルまたは動作をより細かく制御する必要がある場合でも、独自の 効果動作、または カスタムレンダラー を作成して、必要な詳細を実現できます。When you require greater control of styles or behavior, you can still create your own Effect, Behavior, or Custom Renderer to achieve the detail you require.

素材ビジュアルのカスタマイズCustomize Material Visual

マテリアルビジュアル NuGet パッケージは、コントロールを認識するレンダラーのコレクションです Xamarin.Forms 。The Material Visual NuGet package is a collection of renderers that realize the Xamarin.Forms controls. カスタマイズ (素材を) ビジュアルコントロールは、既定のコントロールのカスタマイズと同じです。Customizing Material Visual controls is identical to customizing default controls.

既存のコントロールをカスタマイズすることを目標とする場合は、効果が推奨される方法です。Effects are the recommended technique when the goal is to customize an existing control. マテリアルビジュアルレンダラーが存在する場合は、レンダラーをサブクラス化するよりも効果があるため、コントロールをカスタマイズする作業はあまりありません。If a Material Visual renderer exists, it is less work to customize the control with an effect than it is to subclass the renderer. 効果の詳細については、「 Xamarin.Forms 効果」を参照してください。For more information about effects see Xamarin.Forms effects.

カスタムレンダラーは、マテリアルレンダラーが存在しない場合に推奨される方法です。Custom renderers are the recommended technique when a Material renderer does not exist. 次のレンダラークラスは、素材ビジュアルに含まれています。The following renderer classes are included with Material Visual:

  • MaterialButtonRenderer
  • MaterialCheckBoxRenderer
  • MaterialEntryRenderer
  • MaterialFrameRenderer
  • MaterialProgressBarRenderer
  • MaterialDatePickerRenderer
  • MaterialTimePickerRenderer
  • MaterialPickerRenderer
  • MaterialActivityIndicatorRenderer
  • MaterialEditorRenderer
  • MaterialSliderRenderer
  • MaterialStepperRenderer

素材レンダラーのサブクラス化は、非マテリアルレンダラーとほぼ同じです。Subclassing a Material renderer is almost identical to non-Material renderers. ただし、素材レンダラーをサブクラス化するレンダラーをエクスポートする場合は、型を指定する属性に3番目の引数を指定する必要があり ExportRenderer VisualMarker.MaterialVisual ます。However, when exporting a renderer that subclasses a Material renderer, you must provide a third argument to the ExportRenderer attribute that specifies the VisualMarker.MaterialVisual type:

using Xamarin.Forms.Material.Android;

[assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomMaterialProgressBarRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace MyApp.Android
    public class CustomMaterialProgressBarRenderer : MaterialProgressBarRenderer

この例では、は、 ExportRendererAttribute CustomMaterialProgressBarRenderer ProgressBar IVisual 3 番目の引数として登録された型を使用して、ビューを表示するためにクラスを使用することを指定しています。In this example, the ExportRendererAttribute specifies that the CustomMaterialProgressBarRenderer class will be used to render the ProgressBar view, with the IVisual type registered as the third argument.


IVisualの一部として型を指定するレンダラーは、 ExportRendererAttribute 既定のレンダラーではなくビューでの表示に使用されます。A 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.

カスタムレンダラーの詳細については、「 カスタムレンダラー」を参照してください。For more information about custom renderers, see Custom Renderers.