Partilhar via

Xamarin.Forms Formas

  • Artigo

A Shape é um tipo de View que permite desenhar uma forma na tela. Shape Os objetos podem ser usados dentro de classes de layout e da maioria dos controles, pois a classe deriva Shape da View classe.

Xamarin.Forms As formas estão disponíveis no Xamarin.Forms.Shapes namespace no iOS, Android, macOS, UWP (Plataforma Universal do Windows) e WPF (Windows Presentation Foundation).

Shape define as propriedades a seguir:

  • Aspect, do tipo Stretch, descreve como a forma preenche seu espaço alocado. O valor padrão dessa propriedade é Stretch.None.
  • Fill, do tipo Brush, indica o pincel usado para pintar o interior da forma.
  • Stroke, do tipo Brush, indica o pincel usado para pintar o contorno da forma.
  • StrokeDashArray, do tipo DoubleCollection, que representa uma coleção de double valores que indicam o padrão de traços e lacunas usados para contornar uma forma.
  • StrokeDashOffset, do tipo double, especifica a distância dentro do padrão de traços onde um traço começa. O valor padrão desta propriedade é 0.0.
  • StrokeLineCap, do tipo PenLineCap, descreve a forma no início e no final de uma linha ou segmento. O valor padrão dessa propriedade é PenLineCap.Flat.
  • StrokeLineJoin, do tipo PenLineJoin, especifica o tipo de junção que é usado nos vértices de uma forma. O valor padrão dessa propriedade é PenLineJoin.Miter.
  • StrokeMiterLimit, do tipo double, especifica o limite da proporção do comprimento da esquadria para a metade StrokeThickness de uma forma. O valor padrão desta propriedade é 10.0.
  • StrokeThickness, do tipo double, indica a largura do contorno da forma. O valor padrão desta propriedade é 1.0.

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

Xamarin.Forms define um número de objetos que derivam da Shape classe. Estes são Ellipse, Line, Path, Polygon, Polyline, e Rectangle.

Formas de pintura

Brush objetos são usados para pintar formas Stroke e Fill:

<Ellipse Fill="DarkBlue"
         Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Start" />

Neste exemplo, o traçado e o preenchimento de an Ellipse são especificados:

Formas de pintura

Importante

Brush Os objetos usam um conversor de tipo que permite Color que os valores sejam especificados para a Stroke propriedade.

Se você não especificar um Brush objeto para Stroke, ou se definir StrokeThickness como 0, a borda ao redor da forma não será desenhada.

Para obter mais informações sobre Brush objetos, consulte Xamarin.Forms Pincéis. Para obter mais informações sobre valores válidos Color , consulte Cores no Xamarin.Forms.

Esticar formas

Shape Os objetos têm uma Aspect propriedade, do tipo Stretch. Essa propriedade determina como o conteúdo de um Shape objeto é esticado para preencher o Shape espaço de layout do objeto. O espaço de layout de um Shape objeto é a quantidade de espaço que é Shape alocada pelo Xamarin.Forms sistema de layout, devido a uma configuração explícita WidthRequest e HeightRequest ou por causa de suas HorizontalOptions configurações e VerticalOptions .

A enumeração Stretch define os seguintes membros:

  • None, o que indica que o conteúdo preserva seu tamanho original. Este é o valor padrão da propriedade Shape.Aspect.
  • Fill, que indica que o conteúdo é redimensionado para preencher as dimensões de destino. A taxa de proporção não é preservada.
  • Uniform, que indica que o conteúdo é redimensionado para se ajustar às dimensões de destino, preservando a taxa de proporção.
  • UniformToFill, indica que o conteúdo é redimensionado para preencher as dimensões de destino, preservando a taxa de proporção. Se a taxa de proporção do retângulo de destino for diferente da origem, o conteúdo de origem será cortado para se ajustar às dimensões de destino.

O XAML a seguir mostra como definir a Aspect propriedade:

<Path Aspect="Uniform"
      Stroke="Yellow"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>

Neste exemplo, um objeto desenha Path um coração. O Path objeto e HeightRequest as WidthRequest propriedades são definidos como 100 unidades independentes de dispositivo e sua Aspect propriedade é definida como Uniform. Como resultado, o conteúdo do objeto é redimensionado para se ajustar às dimensões de destino, preservando a taxa de proporção:

Esticar formas

Desenhar formas tracejadas

Shape objetos têm uma propriedade StrokeDashArray, do tipo DoubleCollection. Essa propriedade representa uma coleção de double valores que indicam o padrão de traços e lacunas usados para contornar uma forma. A DoubleCollection é um ObservableCollection dos double valores. Cada double um na coleção especifica o comprimento de um traço ou lacuna. O primeiro item da coleção, localizado no índice 0, especifica o comprimento de um traço. O segundo item da coleção, localizado no índice 1, especifica o comprimento de uma lacuna. Portanto, objetos com um valor de índice par especificam traços, enquanto objetos com um valor de índice ímpar especificam lacunas.

Shape Os objetos também têm uma StrokeDashOffset propriedade, do tipo double, que especifica a distância dentro do padrão de traço em que um traço começa. A falha ao definir essa propriedade resultará em Shape um contorno sólido.

As formas tracejadas podem ser desenhadas definindo as StrokeDashArray propriedades e StrokeDashOffset . A StrokeDashArray propriedade deve ser definida como um ou mais double valores, com cada par delimitado por uma única vírgula e/ou um ou mais espaços. Por exemplo, "0,5 1,0" e "0,5,1,0" são válidos.

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

<Rectangle Fill="DarkBlue"
           Stroke="Red"
           StrokeThickness="4"
           StrokeDashArray="1,1"
           StrokeDashOffset="6"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

Neste exemplo, um retângulo preenchido com um traço tracejado é desenhado:

Retângulo tracejado

A linha de controle termina

Uma linha tem três partes: limite inicial, corpo da linha e limite final. As arestas inicial e final descrevem a forma no início e no final de uma linha ou segmento.

Shape Os objetos têm uma StrokeLineCap propriedade, do tipo PenLineCap, que descreve a forma no início e no final de uma linha ou segmento. A enumeração PenLineCap define os seguintes membros:

  • Flat, que representa um limite que não se estende além do último ponto da linha. Isso é comparável a nenhuma limitação de linha e é o valor padrão da StrokeLineCap propriedade.
  • Square, que representa um retângulo que tem uma altura igual à espessura da linha e um comprimento igual à metade da espessura da linha.
  • Round, que representa um semicírculo que tem um diâmetro igual à espessura da linha.

Importante

A StrokeLineCap propriedade não terá efeito se você defini-la em uma forma que não tenha pontos inicial ou final. Por exemplo, essa propriedade não terá efeito se você configurá-la em um Ellipse, ou Rectangle.

O XAML a seguir mostra como definir a StrokeLineCap propriedade:

<Line X1="0"
      Y1="20"
      X2="300"
      Y2="20"
      StrokeLineCap="Round"
      Stroke="Red"
      StrokeThickness="12" />

Nesse exemplo, a linha vermelha é arredondada no início e no final da linha:

Tampas de linha

Junções de linha de controle

Shape Os objetos têm uma StrokeLineJoin propriedade, do tipo PenLineJoin, que especifica o tipo de junção que é usado nos vértices da forma. A enumeração PenLineJoin define os seguintes membros:

  • Miter, que representa vértices angulares regulares. Este é o valor padrão da propriedade StrokeLineJoin.
  • Bevel, que representa vértices chanfrados.
  • Round, que representa vértices arredondados.

Observação

Quando a StrokeLineJoin propriedade é definida como Miter, a StrokeMiterLimit propriedade pode ser definida como a double para limitar o comprimento da mitra das junções de linha na forma.

O XAML a seguir mostra como definir a StrokeLineJoin propriedade:

<Polyline Points="20 20,250 50,20 120"
          Stroke="DarkBlue"
          StrokeThickness="20"
          StrokeLineJoin="Round" />

Neste exemplo, a polilinha azul escura tem junções arredondadas em seus vértices:

Junções de linha