Retângulo

Procurar no exemplo

A classe Rectangle da .NET Multi-Platform App UI (.NET MAUI) deriva da classe Shape e pode ser usada para desenhar retângulos e quadrados. Para obter informações sobre as propriedades herdadas pela classe Rectangle da classe Shape, confira Formas do .NET MAUI.

Rectangle define as propriedades a seguir:

• RadiusX, do tipo double, que é o raio do eixo x usado para arredondar os cantos do retângulo. O valor padrão desta propriedade é 0.0.
• RadiusY, do tipo double, que é o raio do eixo y usado para arredondar os cantos do retângulo. O valor padrão desta propriedade é 0.0.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

A classe Rectangle define a propriedade Aspect, herdada da classe Shape, como Stretch.Fill. Para obter mais informações sobre a propriedade Aspect, confira Formas elásticas.

Criar um Retângulo

Para desenhar um retângulo, crie um objeto Rectangle e defina suas propriedades WidthRequest e HeightRequest. Para pintar o interior do retângulo, defina sua propriedade Fill como um objeto derivado de Brush. Para dar um contorno ao retângulo, defina a respectiva propriedade Stroke como um objeto derivado de Brush. A propriedade StrokeThickness especifica a espessura do contorno do retângulo. Para obter mais informações sobre objetos de Brush, confira Pincéis.

Para dar ao retângulo cantos arredondados, defina as respectivas propriedades RadiusX e RadiusY. Essas propriedades definem os raios do eixo x e do eixo y usados para arredondar os cantos do retângulo.

Observação

Existe também uma classe RoundRectangle, que tem uma BindableProperty CornerRadius, que pode ser usada para desenhar retângulos com cantos arredondados.

Para desenhar um quadrado, torne as propriedades WidthRequest e HeightRequest do objeto Rectangle iguais.

O exemplo XAML a seguir mostra como desenhar um retângulo preenchido:

<Rectangle Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

Nesse exemplo, é desenhado um retângulo preenchido de vermelho nas dimensões 150x50 (unidades independentes de dispositivo):

O exemplo XAML a seguir mostra como desenhar um retângulo preenchido com cantos arredondados:

<Rectangle Fill="Blue"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10"
           WidthRequest="200"
           HeightRequest="100"
           HorizontalOptions="Start" />

Nesse exemplo, é desenhado um retângulo preenchido de azul com cantos arredondados:

Para obter informações sobre como desenhar um retângulo tracejado, confira Desenhar formas tracejadas.