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 dessa 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 dessa 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 Rectangle classe define a Aspect propriedade, herdada da Shape classe, como Stretch.Fill. Para obter mais informações sobre a Aspect propriedade, consulte Esticar formas.

Criar um retângulo

Para desenhar um retângulo, crie um Rectangle objeto e defina suas WidthRequest e HeightRequest propriedades. Para pintar o interior do retângulo, defina sua Fill propriedade como um Brushobjeto derivado. Para dar ao retângulo um contorno, defina sua Stroke propriedade como um Brushobjeto -derivado. A StrokeThickness propriedade 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 suas RadiusX e RadiusY propriedades. Essas propriedades definem os raios dos eixos x e y usados para arredondar os cantos do retângulo.

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

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

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

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

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

Neste exemplo, um retângulo preenchido em azul com cantos arredondados é desenhado:

Retângulo com cantos arredondados

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