Xamarin.Forms Forme

  • Articolo

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

Xamarin.FormsLe forme sono disponibili nello Xamarin.Forms.Shapes spazio dei nomi in iOS, Android, macOS, piattaforma UWP (Universal Windows Platform) (UWP) 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 tipo Brush, indica il pennello utilizzato per disegnare l'interno della forma.
  • Stroke, di tipo Brush, indica il pennello utilizzato per disegnare il contorno della forma.
  • StrokeDashArray, di tipo DoubleCollection, che rappresenta una raccolta di double valori che indicano il motivo di trattini e spazi vuoti utilizzati per delineare una forma.
  • StrokeDashOffset, di tipo double, specifica la distanza all'interno del motivo 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 PenLineJoin, specifica il tipo di join utilizzato nei vertici di una forma. Il valore predefinito di questa proprietà è PenLineJoin.Miter.
  • StrokeMiterLimit, di tipo double, specifica il limite per il rapporto tra la lunghezza del miter e la metà di StrokeThickness una forma. Il valore predefinito di questa proprietà è 10,0.
  • StrokeThickness, di tipo double, indica la larghezza del contorno della forma. Il valore predefinito di questa proprietà è 1,0.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

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

Disegna forme

Brush gli oggetti vengono utilizzati 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 di un oggetto Ellipse :

Paint shapes

Importante

Brush gli oggetti utilizzano un convertitore di tipi che consente di Color specificare i valori per la Stroke proprietà .

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

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

Estendere le forme

Shape gli oggetti hanno una Aspect proprietà di tipo Stretch. Questa proprietà determina il modo in cui il contenuto di un Shape oggetto viene esteso per riempire lo Shape spazio di layout dell'oggetto. Lo spazio di layout di un Shape oggetto è la quantità di spazio Shape allocata dal Xamarin.Forms sistema di layout, a causa di un'impostazione esplicita WidthRequest e HeightRequest o a causa delle relative HorizontalOptions impostazioni e 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 al tempo stesso le proporzioni.
  • UniformToFill, indica che il contenuto viene ridimensionato per riempire le dimensioni di destinazione, mantenendo al tempo stesso 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 HeightRequest dell'oggetto WidthRequest sono impostate su 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 al tempo stesso le proporzioni:

Stretch shapes

Disegna forme tratteggiate

Shape gli oggetti hanno una StrokeDashArray proprietà di tipo DoubleCollection. Questa proprietà rappresenta una raccolta di double valori che indicano il motivo di trattini e spazi vuoti utilizzati per delineare una forma. Un DoubleCollection oggetto è un ObservableCollection di double valori. Ogni double oggetto della raccolta specifica la lunghezza di un trattino o di una distanza. Il primo elemento dell'insieme, che si trova in corrispondenza dell'indice 0, specifica la lunghezza di un trattino. Il secondo elemento dell'insieme, 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 vuoti.

Shape gli oggetti hanno anche una StrokeDashOffset proprietà di tipo double, che specifica la distanza all'interno del motivo trattino in cui inizia un trattino. Se non si imposta questa proprietà, si Shape avrà un contorno solido.

Le forme tratteggiate possono essere disegnate impostando le StrokeDashArray proprietà e StrokeDashOffset . La StrokeDashArray proprietà deve essere impostata su uno o più double valori, con ogni coppia delimitata da una singola 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 riempito con un tratto tratteggiato:

Dashed rectangle

Estremità della riga di controllo

Una linea ha tre parti: estremità iniziale, corpo linea e estremità finale. Le estremità iniziale e finale descrivono la forma all'inizio e alla fine di una linea o di un segmento.

Shape gli oggetti hanno una StrokeLineCap proprietà di tipo PenLineCap, che descrive la forma all'inizio e alla fine di una linea o di un 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 altezza uguale allo spessore della linea e una lunghezza uguale a metà dello spessore della linea.
  • Round, che rappresenta un semicircolo con un diametro uguale allo spessore della linea.

Importante

La StrokeLineCap proprietà non ha alcun effetto se la si imposta su una forma senza punti iniziale o finale. Ad esempio, questa proprietà non ha alcun effetto se la si imposta su un Ellipseoggetto 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:

Line caps

Join di riga di controllo

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

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

Nota

Quando la StrokeLineJoin proprietà è impostata su Miter, la StrokeMiterLimit proprietà può essere impostata su per double limitare la lunghezza del miter dei join di riga nella 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 arrotondato join ai vertici:

Line joins