Xamarin.Forms Forme

È Shape un tipo di che consente di disegnare una forma sullo View schermo. Shape Gli oggetti possono essere usati all'interno delle classi di layout e della maggior parte dei controlli, perché Shape la classe deriva dalla classe View .

Xamarin.FormsForme è disponibile nello spazio dei nomi Xamarin.Forms.Shapes in iOS, Android, macOS, UWP (Universal Windows Platform) e Windows Presentation Foundation (WPF).

Shape definisce le proprietà seguenti:

  • Aspect, di tipo Stretch , descrive il modo in cui la forma riempie lo spazio allocato. Il valore predefinito di questa proprietà è Stretch.None.
  • Fill, di Brush tipo , indica il pennello utilizzato per disegnare l'interno della forma.
  • Stroke, di Brush tipo , indica il pennello utilizzato per disegnare il contorno della forma.
  • StrokeDashArray, di tipo , che rappresenta una raccolta di valori che indicano il modello di trattini e spazi usati per DoubleCollection double delineare una forma.
  • StrokeDashOffset, di tipo double , specifica la distanza all'interno del modello di trattino in cui inizia un trattino. Il valore predefinito di questa proprietà è 0,0.
  • StrokeLineCap, di tipo PenLineCap , descrive la forma all'inizio e alla fine di una linea o di un segmento. Il valore predefinito di questa proprietà è PenLineCap.Flat.
  • StrokeLineJoin, di tipo , specifica il tipo di join utilizzato PenLineJoin ai vertici di una forma. Il valore predefinito di questa proprietà è PenLineJoin.Miter.
  • StrokeMiterLimit, di tipo , specifica il limite sul rapporto tra la lunghezza dell'intarsio e double la metà di una StrokeThickness forma. Il valore predefinito di questa proprietà è 10.0.
  • StrokeThickness, di double tipo , indica la larghezza del contorno della forma. Il valore predefinito di questa proprietà è 1.0.

Queste proprietà sono supportate da oggetti , ovvero possono essere BindableProperty destinazioni di data binding e con stile.

Xamarin.Forms definisce un numero di oggetti che derivano dalla Shape classe . Si tratta Ellipse di , , , , e Line Path Polygon Polyline Rectangle .

Paint forme

Brush Gli oggetti vengono usati per disegnare le forme Stroke e Fill :

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

In questo esempio vengono specificati il tratto e il riempimento Ellipse di un oggetto :

Paint forme.

Importante

Brush Gli oggetti usano un convertitore di tipi che Color consente di impostare i valori per la proprietà Stroke .

Se non si specifica un oggetto per o se si imposta su 0, il bordo intorno Brush alla forma non viene Stroke StrokeThickness disegnato.

Per altre informazioni sugli Brush oggetti, vedere Xamarin.Forms Pennelli. Per altre informazioni sui valori Color validi, vedere Colori Xamarin.Forms in .

Estendere le forme

Shape Gli oggetti hanno Aspect una proprietà di tipo Stretch . Questa proprietà determina la modalità di estensione del contenuto di un oggetto Shape per riempire lo spazio di layout Shape dell'oggetto. Lo spazio di layout di un oggetto è la quantità di spazio allocata dal sistema di layout, a causa di un'impostazione esplicita e o delle Shape Shape relative impostazioni e Xamarin.Forms WidthRequest HeightRequest HorizontalOptions VerticalOptions .

L'enumerazione Stretch definisce i membri seguenti:

  • None, che indica che il contenuto mantiene le dimensioni originali. Questo è il valore predefinito per la proprietà Shape.Aspect.
  • Fill, che indica che il contenuto viene ridimensionato per riempire le dimensioni di destinazione. Le proporzioni non vengono mantenute.
  • Uniform, che indica che il contenuto viene ridimensionato in base alle dimensioni di destinazione, mantenendo le proporzioni.
  • UniformToFillindica che il contenuto viene ridimensionato per riempire le dimensioni di destinazione, mantenendo le proporzioni. Se le proporzioni del rettangolo di destinazione sono diverse da quelle del contenuto di origine, questo viene ritagliato in base alle dimensioni di destinazione.

Il codice XAML seguente illustra come impostare la Aspect proprietà :

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

In questo esempio, un Path oggetto disegna un cuore. Le Path proprietà e WidthRequest dell'oggetto sono impostate su HeightRequest 100 unità indipendenti dal dispositivo e la relativa Aspect proprietà è impostata su Uniform . Di conseguenza, il contenuto dell'oggetto viene ridimensionato in base alle dimensioni di destinazione, mantenendo le proporzioni:

Estendere le forme.

Disegnare forme tratteggiate

Shape Gli oggetti hanno StrokeDashArray una proprietà di tipo DoubleCollection . Questa proprietà rappresenta una raccolta di valori che indicano il modello di trattini e spazi usati per double delineare una forma. È DoubleCollection un oggetto di valori ObservableCollection double . Ogni double nella raccolta specifica la lunghezza di un trattino o di un gap. Il primo elemento della raccolta, che si trova in corrispondenza dell'indice 0, specifica la lunghezza di un trattino. Il secondo elemento della raccolta, che si trova in corrispondenza dell'indice 1, specifica la lunghezza di un gap. Pertanto, gli oggetti con un valore di indice pari specificano trattini, mentre gli oggetti con un valore di indice dispari specificano spazi.

Shape Gli oggetti hanno anche una proprietà , di tipo , che specifica la distanza all'interno del modello StrokeDashOffset double di trattino in cui inizia un trattino. Se non si imposta questa proprietà, Shape l'oggetto avrà una struttura a tinta unita.

Le forme tratteggiate possono essere disegnate impostando StrokeDashArray entrambe le proprietà e StrokeDashOffset . La proprietà deve essere impostata su uno o più valori, con ogni coppia delimitata da una singola StrokeDashArray double virgola e/o da uno o più spazi. Ad esempio, "0.5 1.0" e "0.5,1.0" sono entrambi validi.

L'esempio XAML seguente illustra come disegnare un rettangolo tratteggiato:

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

In questo esempio viene disegnato un rettangolo pieno con un tratto tratteggiato:

Rettangolo tratteggiato.

Estremità della riga di controllo

Una linea è in tre parti: estremità iniziale, corpo della linea e estremità finale. I limiti iniziale e finale descrivono la forma all'inizio e alla fine di una linea o di un segmento.

Shape Gli oggetti hanno una proprietà di tipo , che descrive la forma all'inizio e alla StrokeLineCap fine di una linea o di un PenLineCap segmento. L'enumerazione PenLineCap definisce i membri seguenti:

  • Flat, che rappresenta un limite che non si estende oltre l'ultimo punto della linea. È paragonabile a nessun limite di riga ed è il valore predefinito della StrokeLineCap proprietà .
  • Square, che rappresenta un rettangolo con un'altezza uguale allo spessore della linea e una lunghezza pari a metà dello spessore della linea.
  • Round, che rappresenta un semicircolo con un diametro uguale allo spessore della linea.

Importante

La proprietà non ha alcun effetto se viene impostata su una forma senza punti di inizio StrokeLineCap o di fine. Ad esempio, questa proprietà non ha alcun effetto se viene impostata su un oggetto Ellipse o Rectangle .

Il codice XAML seguente illustra come impostare la StrokeLineCap proprietà :

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

In questo esempio la linea rossa viene arrotondata all'inizio e alla fine della riga:

Estremità della riga.

Controllare i join di linea

Shape Gli oggetti hanno una proprietà di tipo , che specifica il tipo di join utilizzato ai StrokeLineJoin PenLineJoin vertici della forma. L'enumerazione PenLineJoin definisce i membri seguenti:

  • Miter, che rappresenta i normali vertici angolari. Questo è il valore predefinito per la proprietà StrokeLineJoin.
  • Bevel, che rappresenta i vertici smussati.
  • Round, che rappresenta vertici arrotondati.

Nota

Quando la proprietà è impostata su , la proprietà può essere impostata su per limitare la lunghezza miter dei StrokeLineJoin join di linee nella Miter StrokeMiterLimit double forma.

Il codice XAML seguente illustra come impostare la StrokeLineJoin proprietà :

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

In questo esempio, la polilinea blu scuro ha join arrotondati ai vertici:

Join di linee.