GraphicsView

Parcourir l’exemple

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) GraphicsView est un canevas graphique sur lequel les graphiques 2D peuvent être dessinés à l’aide de types à partir de l’espace Microsoft.Maui.Graphics de noms. Pour plus d’informations sur Microsoft.Maui.Graphics, consultez Graphics.

GraphicsView définit la Drawable propriété, de type IDrawable, qui spécifie le contenu qui sera dessiné. Cette propriété est soutenue par un BindableProperty, ce qui signifie qu’elle peut être la cible de la liaison de données et styleée.

GraphicsView définit les événements suivants :

• StartHoverInteraction, avec TouchEventArgs, qui est déclenché lorsqu’un pointeur entre dans la zone de test de positionnement du GraphicsView.
• MoveHoverInteraction, avec TouchEventArgs, qui est déclenché lorsqu’un pointeur se déplace pendant que le pointeur reste dans la zone de test de positionnement du GraphicsView.
• EndHoverInteraction, qui est déclenché lorsqu’un pointeur quitte la zone de test de positionnement du GraphicsView.
• StartInteraction, avec TouchEventArgs, qui est déclenché lorsque la GraphicsView pression est enfoncée.
• DragInteraction, avec TouchEventArgs, qui est déclenché lorsque l’objet GraphicsView est déplacé.
• EndInteraction, avec TouchEventArgs, qui est déclenché lorsque la presse qui a déclenché l’événement StartInteraction est relâchée.
• CancelInteraction, qui est déclenché lorsque la presse qui a fait contact avec le GraphicsView contact perd le contact.

Créer un GraphicsView

Un GraphicsView doit définir un IDrawable objet qui spécifie le contenu qui sera dessiné sur le contrôle. Pour ce faire, créez un objet qui dérive de IDrawable, et implémentez sa Draw méthode :

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

La Draw méthode comporte ICanvas et RectF arguments. L’argument ICanvas est le canevas de dessin sur lequel vous dessinez des objets graphiques. L’argument RectF est un struct qui contient des données sur la taille et l’emplacement du canevas de dessin. Pour plus d’informations sur le dessin sur un ICanvasobjet graphique, consultez Dessin d’objets graphiques.

En XAML, l’objet IDrawable peut être déclaré en tant que ressource, puis consommé par une GraphicsView en spécifiant sa clé comme valeur de la Drawable propriété :

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

Positionner et dimensionner des objets graphiques

L’emplacement et la taille de la ICanvas page peuvent être déterminés en examinant les propriétés de l’argument RectF dans la Draw méthode.

Le RectF struct définit les propriétés suivantes :

• Bottom, de type float, qui représente la coordonnée y du bord inférieur du canevas.
• Center, de type PointF, qui spécifie les coordonnées du centre du canevas.
• Height, de type float, qui définit la hauteur du canevas.
• IsEmpty, de type bool, qui indique si le canevas a une taille et un emplacement zéro.
• Left, de type float, qui représente la coordonnée x du bord gauche du canevas.
• Location, de type PointF, qui définit les coordonnées du coin supérieur gauche du canevas.
• Right, de type float, qui représente la coordonnée x du bord droit du canevas.
• Size, de type SizeF, qui définit la largeur et la hauteur du canevas.
• Top, de type float, qui représente la coordonnée y du bord supérieur du canevas.
• Width, de type float, qui définit la largeur du canevas.
• X, de type float, qui définit la coordonnée x du coin supérieur gauche du canevas.
• Y, de type float, qui définit la coordonnée y du coin supérieur gauche du canevas.

Ces propriétés peuvent être utilisées pour positionner et dimensionner des objets graphiques sur le ICanvas. Par exemple, les objets graphiques peuvent être placés au centre de l’application Canvas à l’aide des Center.X valeurs et Center.Y des arguments d’une méthode de dessin. Pour plus d’informations sur le dessin sur un ICanvasobjet graphique, consultez Dessin d’objets graphiques.

Invalider le canevas

GraphicsView a une Invalidate méthode qui informe le canevas qu’il doit redessiner lui-même. Cette méthode doit être appelée sur une GraphicsView instance :

graphicsView.Invalidate();

.NET MAUI invalide automatiquement le GraphicsView cas échéant par l’interface utilisateur. Par exemple, lorsque l’élément est affiché pour la première fois, est affiché ou est révélé en déplaçant un élément à partir de celui-ci, il est redessiné. La seule fois que vous devez appeler Invalidate est lorsque vous souhaitez forcer le GraphicsView redessinage lui-même, par exemple si vous avez modifié son contenu alors qu’il est toujours visible.