GraphicsView
サンプルを参照する.NET Multi-Platform App UI (.NET MAUI) GraphicsView は、Microsoft.Maui.Graphics 名前空間の型を使用して 2D グラフィックスを描画できるグラフィックス キャンバスです。 Microsoft.Maui.Graphics の詳細については、「グラフィックス」をご覧ください。
GraphicsView は、描画するコンテンツを指定する IDrawable 型の Drawable プロパティを定義します。 このプロパティは、データ バインディングのターゲットであり、スタイルを設定できる BindableProperty によってサポートされます。
GraphicsView では、次のイベントが定義されます。
StartHoverInteractionをTouchEventArgsで指定すると、ポインタが GraphicsView のヒット テスト領域に入ったときに発生します。MoveHoverInteractionをTouchEventArgsで指定すると、ポインタが GraphicsView のヒット テスト領域内にとどまっている間に、ポインタが移動すると発生します。EndHoverInteraction:を指定すると、ポインタが GraphicsView のヒット テスト領域から離れると発生します。StartInteractionでTouchEventArgsを指定すると、GraphicsView が押されたときに発生します。DragInteractionをTouchEventArgsで指定すると、GraphicsView のドラッグ時に発生します。EndInteractionをTouchEventArgsで指定すると、StartInteractionイベントを発生させたプレスが解放されたときに発生します。CancelInteractionは、GraphicsView との接点のあるプレスが接点を失ったときに発生します。
GraphicsView を作成する
GraphicsView は、コントロールに描画されるコンテンツを指定する IDrawable オブジェクトを定義する必要があります。 これを実行するには、IDrawable から派生したオブジェクトを作成し、その Draw メソッドで実装します。
namespace MyMauiApp
{
public class GraphicsDrawable : IDrawable
{
public void Draw(ICanvas canvas, RectF dirtyRect)
{
// Drawing code goes here
}
}
}
Draw メソッドには ICanvas と RectF の引数があります。 ICanvas 引数は 、グラフィカル オブジェクトを描画する描画キャンバスです。 RectF 引数は、描画キャンバスのサイズと位置に関するデータを含む struct です。 ICanvas での描画に関する詳細については、「グラフィカル オブジェクトを描画する」をご覧ください。
XAML では、IDrawable オブジェクトをリソースとして宣言し、そのキーを Drawable プロパティの値として指定し GraphicsView によって使用できます。
<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
xmlns:drawable="clr-namespace:MyMauiApp"
x:Class="MyMauiApp.MainPage">
<ContentPage.Resources>
<drawable:GraphicsDrawable x:Key="drawable" />
</ContentPage.Resources>
<VerticalStackLayout>
<GraphicsView Drawable="{StaticResource drawable}"
HeightRequest="300"
WidthRequest="400" />
</VerticalStackLayout>
</ContentPage>
グラフィカル オブジェクトの位置とサイズ
ページ上の ICanvas の位置とサイズは Draw メソッド内の RectF 引数のプロパティを調べることで決定できます。
RectF 構造体は、次のプロパティを定義します。
float型のBottomはキャンバスの下端の y 座標を表します。PointF型のCenterはキャンバスの中心の座標を指定します。float型のHeightはキャンバスの高さを定義します。bool型のIsEmptyはキャンバスのサイズと位置が 0 かどうかを示します。float型のLeftは、キャンバスの左端の x 座標を表します。PointF型のLocationはキャンバスの左上隅の座標を定義します。float型のRightは、キャンバスの右端の x 座標を表します。SizeF型のSizeはキャンバスの幅と高さを定義します。float型のTopはキャンバスの上端の y 座標を表します。float型のWidthはキャンバスの幅を定義します。float型のXはキャンバスの左上隅の x 座標を定義します。float型のYはキャンバスの左上隅の y 座標を定義します。
これらのプロパティは、ICanvas でグラフィカル オブジェクトの位置とサイズを設定するのに使用できます。 たとえば、グラフィカル オブジェクトは、描画メソッドで Center.X と Center.Y の値を引数として使用すると、Canvas の中心に配置できます。 ICanvas での描画の詳細については、「グラフィカル オブジェクトを描画する」をご覧ください。
キャンバスを無効にする
GraphicsView には、それ自体を再描画する必要があることをキャンバスに通知する Invalidate メソッドがあります。 このメソッドは、GraphicsView インスタンスで呼び出す必要があります。
graphicsView.Invalidate();
.NET MAUI は、UI で必要に応じて GraphicsView を自動的に無効化します。 たとえば、要素が最初に表示されたり、表示されるようになったり、要素の上から要素を移動して表示されたりすると、再描画されます。 Invalidate を呼び出す必要があるのは、コンテンツがまだ表示されている間にコンテンツを変更した場合など、GraphicsView を強制的に再描画する必要がある場合だけです。
.NET MAUI