Xamarin.Forms Formas

  • Artigo

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

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

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 delinear uma forma.
  • StrokeDashOffset, do tipo double, especifica a distância dentro do padrão de traço onde um traço começa. O valor padrão dessa 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 metade da StrokeThickness forma de uma forma. O valor padrão dessa propriedade é 10.0.
  • StrokeThickness, do tipo double, indica a largura do contorno da forma. O valor padrão dessa 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, Polylinee Rectangle.

Pintar formas

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

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

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

Pintar formas

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 Strokeo , 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 objetos têm uma Aspect propriedade, do tipo Stretch. Essa propriedade determina como o conteúdo de um Shape objeto é estendido para preencher o Shape espaço de layout do objeto. O espaço de layout de um Shape objeto é a quantidade de espaço alocada Shape pelo Xamarin.Forms sistema de layout, devido a uma configuração explícita WidthRequest ou HeightRequest devido a suas HorizontalOptions e VerticalOptions configurações.

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 proporção.
  • UniformToFill, indica que o conteúdo é redimensionado para preencher as dimensões de destino, preservando a 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 Path objeto desenha um coração. As Path propriedades e HeightRequest o WidthRequest objeto 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 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 delinear uma forma. A DoubleCollection é um ObservableCollection de 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 onde um traço começa. A falha ao definir essa propriedade resultará em um contorno Shape 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 ambos 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çado 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 tampas 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 nenhum limite de linha e é o StrokeLineCap valor padrão da 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 de início ou fim. Por exemplo, essa propriedade não terá efeito se você defini-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 esquadria 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:

Juntas de linha