Xamarin.Forms Forme

Un Shape è un tipo di View che consente di 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 spazio dei nomi in Xamarin.Forms.Shapes iOS, Android, macOS, la piattaforma UWP (Universal Windows Platform) (UWP) e la Windows Presentation Foundation (WPF).

Shape definisce le proprietà seguenti:

  • Aspect, di tipo Stretch, descrive come la forma riempie lo spazio allocato. Il valore predefinito di questa proprietà è Stretch.None.
  • Fill, di tipo Brush, indica il pennello usato per disegnare l'interno della forma.
  • Stroke, di tipo Brush, indica il pennello usato per disegnare la struttura della forma.
  • StrokeDashArray, di tipo , che rappresenta una raccolta di valori che indicano il modello DoubleCollectiondi double trattini e spazi vuoti usati per strutturare una forma.
  • StrokeDashOffset, di tipo double, specifica la distanza all'interno del modello 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 sul rapporto della lunghezza del miter a metà della StrokeThickness forma. Il valore predefinito di questa proprietà è 10.0.
  • StrokeThickness, di tipo double, indica la larghezza della struttura della forma. Il valore predefinito di questa proprietà è 1.0.

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

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

Disegnare 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 viene specificato il tratto e il riempimento di un Ellipse oggetto:

Disegnare forme

Importante

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

Se non si specifica un Brush oggetto per Strokeo se si imposta StrokeThickness su 0, il bordo intorno 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 o a causa delle HorizontalOptions relative impostazioni e HeightRequestVerticalOptions.

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 per adattare le dimensioni di destinazione, mantenendo il rapporto di aspetto.
  • UniformToFill, indica che il contenuto viene ridimensionato per riempire le dimensioni di destinazione, mantenendo il rapporto di aspetto. 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 per adattare le dimensioni di destinazione, mantenendo il rapporto di aspetto:

Estendere le forme

Disegna forme tratteggiate

Shape gli oggetti hanno una StrokeDashArray proprietà, di tipo DoubleCollection. Questa proprietà rappresenta una raccolta di valori che indicano il modello di double trattini e spazi vuoti usati per strutturare una forma. Un DoubleCollection è un ObservableCollection valore di double valori. Ogni double elemento della raccolta specifica la lunghezza di un trattino o di uno spazio. Il primo elemento della raccolta, che si trova all'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 uniforme specificano trattini, mentre gli oggetti con un valore di indice dispari specificano le lacune.

Shape gli oggetti hanno anche una StrokeDashOffset proprietà, di tipo double, che specifica la distanza all'interno del modello trattino in cui inizia un trattino. L'errore Shape di impostare questa proprietà comporta la presenza di una struttura solida.

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

Nell'esempio XAML seguente viene illustrato come disegnare un rettangolo trattino:

<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:

Linea tratteggiata del rettangolo tratteggiata

Fine della riga di controllo

Una linea ha tre parti: capo iniziale, corpo linea e capo 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 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 riga. È paragonabile a nessun limite di riga ed è il valore predefinito della StrokeLineCap proprietà.
  • Square, che rappresenta un rettangolo che ha un'altezza uguale allo spessore della linea e una lunghezza uguale a metà dello spessore della linea.
  • Round, che rappresenta un semicircore che ha un diametro uguale allo spessore della linea.

Importante

La StrokeLineCap proprietà non ha alcun effetto se la si imposta su una forma senza punti di inizio o di fine. 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:

Linee maiuscole linee

Join della 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 vertici di rilievo.
  • Round, che rappresenta vertici arrotondati.

Nota

Quando la proprietà è impostata su Miter, la StrokeLineJoinStrokeMiterLimit proprietà può essere impostata su un double per 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 i join ai suoi vertici:

Join line joins Line