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 de l’espace Microsoft.Maui.Graphics de noms. Pour plus d’informations sur Microsoft.Maui.Graphics, consultez Graphiques.

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 stylisé.

GraphicsView définit les événements suivants :

• StartHoverInteraction, avec TouchEventArgs, qui est déclenché lorsqu’un pointeur entre dans la zone de test d’accès du GraphicsView.
• MoveHoverInteraction, avec TouchEventArgs, qui est déclenché lorsqu’un pointeur se déplace alors que le pointeur reste dans la zone de test d’accès du GraphicsView.
• EndHoverInteraction, qui est déclenché lorsqu’un pointeur quitte la zone de test d’accès du GraphicsView.
• StartInteraction, avec TouchEventArgs, qui est déclenché lorsque le GraphicsView est enfoncé.
• DragInteraction, avec TouchEventArgs, qui est déclenché lorsque le GraphicsView est déplacé.
• EndInteraction, avec TouchEventArgs, qui est déclenché lorsque la pression qui a déclenché l’événement StartInteraction est libérée.
• CancelInteraction, qui est déclenché lorsque la presse qui a pris contact avec perd le GraphicsView 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 IDrawableet 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 a ICanvas des arguments et RectF . L’argument ICanvas est le canevas de dessin sur lequel vous dessinez des objets graphiques. L’argument RectF est un qui contient des struct données sur la taille et l’emplacement du canevas de dessin. Pour plus d’informations sur le dessin sur un , consultez Dessiner des ICanvasobjets graphiques.

En XAML, l’objet IDrawable doit être déclaré en tant que ressource, puis consommé par un GraphicsView en spécifiant sa clé :

<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 sur ICanvas une 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 en Canvas utilisant les Center.X valeurs et Center.Y comme arguments pour une méthode de dessin. Pour plus d’informations sur le dessin sur un , consultez Dessiner des ICanvasobjets graphiques.

Invalider le canevas

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

graphicsView.Invalidate();

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