GráficosVer

Navegue pelo exemplo

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) GraphicsView é uma tela de gráficos na qual gráficos 2D podem ser desenhados usando tipos do Microsoft.Maui.Graphics namespace. Para obter mais informações sobre Microsoft.Maui.Graphicso , consulte Gráficos.

GraphicsView define a Drawable propriedade, do tipo IDrawable, que especifica o conteúdo que será desenhado. Essa propriedade é apoiada por um BindableProperty, o que significa que ela pode ser o destino da associação de dados e estilizada.

GraphicsView define os seguintes eventos:

• StartHoverInteraction, com TouchEventArgs, que é gerado quando um ponteiro entra na área de teste de acerto do GraphicsView.
• MoveHoverInteraction, com TouchEventArgs, que é gerado quando um ponteiro se move enquanto o ponteiro permanece dentro da área de teste de acerto do GraphicsView.
• EndHoverInteraction, que é gerado quando um ponteiro deixa a área de teste de acerto do GraphicsView.
• StartInteraction, com TouchEventArgs, que é levantado quando o GraphicsView é pressionado.
• DragInteraction, com TouchEventArgs, que é levantado quando o é arrastado GraphicsView .
• EndInteraction, com TouchEventArgs, que é levantado quando a imprensa que levantou o StartInteraction evento é divulgada.
• CancelInteraction, que é levantada quando a imprensa que fez contato com o perde contato GraphicsView .

Criar um GraphicsView

A GraphicsView deve definir um IDrawable objeto que especifica o conteúdo que será desenhado no controle. Isso pode ser alcançado criando um objeto que deriva de IDrawable, e implementando seu Draw método:

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

O Draw método tem ICanvas e RectF argumentos. O ICanvas argumento é a tela de desenho na qual você desenha objetos gráficos. O RectF argumento é um struct que contém dados sobre o tamanho e a localização da tela de desenho. Para obter mais informações sobre como desenhar em um ICanvas, consulte Desenhar objetos gráficos.

Em XAML, o objeto pode ser declarado como um recurso e, em seguida, consumido por um GraphicsView especificando sua chave como o IDrawable valor da Drawable propriedade:

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

Objetos gráficos de posição e tamanho

O local e o ICanvas tamanho do em uma página podem ser determinados examinando as RectF propriedades do argumento no Draw método.

A RectF struct define as seguintes propriedades:

• Bottom, do tipo float, que representa a coordenada y da borda inferior da tela.
• Center, do tipo PointF, que especifica as coordenadas do centro da tela.
• Height, do tipo float, que define a altura da tela.
• IsEmpty, do tipo bool, que indica se a tela tem tamanho e localização zero.
• Left, do tipo float, que representa a coordenada x da borda esquerda da tela.
• Location, do tipo PointF, que define as coordenadas do canto superior esquerdo da tela.
• Right, do tipo float, que representa a coordenada x da borda direita da tela.
• Size, do tipo SizeF, que define a largura e a altura da tela.
• Top, do tipo float, que representa a coordenada y da borda superior da tela.
• Width, do tipo float, que define a largura da tela.
• X, do tipo float, que define a coordenada x do canto superior esquerdo da tela.
• Y, do tipo float, que define a coordenada y do canto superior esquerdo da tela.

Essas propriedades podem ser usadas para posicionar e dimensionar ICanvasobjetos gráficos no . Por exemplo, objetos gráficos podem ser colocados no centro do usando os Center.X valores e Center.Y como argumentos para um método de Canvas desenho. Para obter informações sobre como desenhar em um ICanvas, consulte Desenhar objetos gráficos.

Invalidar a tela

GraphicsView tem um Invalidate método que informa à tela que ela precisa se redesenhar. Esse método deve ser chamado em uma GraphicsView instância:

graphicsView.Invalidate();

O .NET MAUI invalida automaticamente o GraphicsView conforme necessário pela interface do usuário. Por exemplo, quando o elemento é mostrado pela primeira vez, entra em exibição ou é revelado movendo um elemento de cima dele, ele é redesenhado. A única vez que você precisa ligar Invalidate é quando você quer forçar o GraphicsView redesenho a si mesmo, como se você tiver alterado seu conteúdo enquanto ele ainda está visível.