Compartilhar via

Xamarin.Forms Formas: Retângulo

  • Artigo

A Rectangle classe deriva da Shape classe e pode ser usada para desenhar retângulos e quadrados. Para obter informações sobre as propriedades que a Rectangle classe herda da Shape classe, consulte Xamarin.Forms Formas.

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 Brush objetos, consulte Xamarin.Forms 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.

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

Retângulo preenchido

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:

Retângulo com cantos arredondados

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