GraphicsView

Beispiel durchsuchen

.NET Multi-Platform App UI(.NET MAUI)-GraphicsView ist ein Grafikzeichenbereich, auf dem 2D-Grafiken mithilfe von Schrifttypen aus dem Microsoft.Maui.Graphics-Namespace gezeichnet werden können. Weitere Informationen zu Microsoft.Maui.Graphics finden Sie unter Grafiken.

GraphicsView definiert die Eigenschaft Drawable vom Typ IDrawable, die den Inhalt angibt, der gezeichnet wird. Diese Eigenschaft wird durch BindableProperty gestützt, was bedeutet, dass sie das Ziel von Datenbindungen und geformt sein kann.

GraphicsView definiert die folgenden Ereignisse:

• StartHoverInteraction mit TouchEventArgs: wird ausgelöst, wenn ein Zeiger in den Treffertestbereich von GraphicsView eintritt
• MoveHoverInteraction mit TouchEventArgs: wird ausgelöst, wenn ein Zeiger bewegt wird und dabei im Treffertestbereich von GraphicsView bleibt
• EndHoverInteraction wird ausgelöst, wenn ein Zeiger den Treffertestbereich von GraphicsView verlässt
• StartInteraction mit TouchEventArgs: wird ausgelöst, wenn GraphicsView gedrückt wird
• DragInteraction mit TouchEventArgs: wird ausgelöst, wenn GraphicsView gezogen wird
• EndInteraction mit TouchEventArgs: wird ausgelöst, wenn die Taste, die das StartInteraction-Ereignis ausgelöst hat, losgelassen wird
• CancelInteraction: wird ausgelöst, wenn die gedrückte Taste, die Kontakt mit GraphicsView hergestellt hat, den Kontakt verliert

GraphicsView erstellen

GraphicsView muss ein IDrawable-Objekt definieren, das den Inhalt angibt, der auf dem Steuerelement gezeichnet wird. Dazu kann ein Objekt erstellt werden, das von IDrawable abgeleitet wird, und seine Draw-Methode implementiert werden:

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

Die Draw-Methode besitzt die Argumente ICanvas und RectF. Das ICanvas-Argument ist der Zeichenbereich, in dem Sie grafische Objekte zeichnen. Das RectF-Argument ist ein struct-Element, das Daten zur Größe und Position des Zeichenbereichs enthält. Weitere Informationen zum Zeichnen auf ICanvas finden Sie unter Zeichnen grafischer Objekte.

In XAML kann das IDrawable-Objekt als Ressource deklariert und dann von einer GraphicsView genutzt werden, indem Sie den zugehörigen Schlüssel als Wert der Drawable-Eigenschaft angeben:

<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>

Positionieren und Anpassen grafischer Objekte

Die Position und Größe von ICanvas auf einer Seite kann bestimmt werden, indem die Eigenschaften des RectF-Arguments in der Draw-Methode überprüft werden.

Die RectF-Struktur definiert die folgenden Eigenschaften:

• Bottom vom Typ float: stellt die y-Koordinate des unteren Rands des Zeichenbereichs dar
• Center vom Typ PointF: gibt die Koordinaten der Mitte des Zeichenbereichs an
• Height vom Typ float: definiert die Höhe des Zeichenbereichs
• IsEmpty vom Typ bool: gibt an, ob der Zeichenbereich eine Nullgröße und -position hat
• Left vom Typ float: stellt die x-Koordinate des linken Rands des Zeichenbereichs dar
• Location vom Typ PointF: definiert die Koordinaten der oberen linken Ecke des Zeichenbereichs
• Right vom Typ float: stellt die x-Koordinate des rechten Rands des Zeichenbereichs dar
• Size vom Typ SizeF: definiert die Breite und Höhe des Zeichenbereichs
• Top vom Typ float: stellt die y-Koordinate des oberen Rands des Zeichenbereichs dar
• Width vom Typ float: definiert die Breite des Zeichenbereichs
• X vom Typ float: definiert die x-Koordinate der oberen linken Ecke des Zeichenbereichs
• Y vom Typ float: definiert die y-Koordinate der oberen linken Ecke des Zeichenbereichs

Diese Eigenschaften können verwendet werden, um grafische Objekte auf ICanvas zu positionieren und ihre Größe anzupassen. Grafische Objekte können z. B. in der Mitte von Canvas platziert werden, indem die Werte Center.X und Center.Y als Argumente für eine Zeichnungsmethode verwendet werden. Informationen zum Zeichnen auf einem ICanvas-Objekt finden Sie unter Zeichnen grafischer Objekte.

Den Zeichenbereich ungültig machen

GraphicsView verfügt über eine Invalidate-Methode, die den Zeichenbereich informiert, dass er sich neu zeichnen muss. Diese Methode muss für eine GraphicsView-Instanz aufgerufen werden:

graphicsView.Invalidate();

.NET MAUI macht GraphicsView entsprechend den Anforderungen der UI automatisch ungültig. Wenn das Element beispielsweise zum ersten Mal angezeigt wird, in der Ansicht erscheint oder durch Verschieben eines Elements von oben angezeigt wird, wird es neu gezeichnet. Der einzige Fall, in dem Sie Invalidate aufrufen müssen, ist, wenn Sie erzwingen möchten, dass sich GraphicsView selbst neu zeichnet, z. B. wenn Sie den Inhalt geändert haben, während er noch sichtbar ist.