Sdílet prostřednictvím

Xamarin.Forms Tvary

  • Článek

A Shape je typ View , který umožňuje nakreslit obrazec na obrazovku. Shape objekty lze použít uvnitř tříd rozložení a většiny ovládacích prvků, protože Shape třída je odvozena od View třídy.

Xamarin.FormsObrazce jsou k dispozici v oboru názvů v Xamarin.Forms.Shapes systémech iOS, Android, macOS, Univerzální platforma Windows (UPW) a Windows Presentation Foundation (WPF).

Shape definuje následující vlastnosti:

  • Aspect, typu Stretch, popisuje, jak obrazec vyplní přidělený prostor. Výchozí hodnota této vlastnosti je Stretch.None.
  • Fill, typu Brush, označuje štětec použitý k malování interiéru obrazce.
  • Stroke, typu Brushoznačuje štětec použitý k vykreslení obrysu obrazce.
  • StrokeDashArray, typu DoubleCollection, který představuje kolekci double hodnot, které označují vzor pomlček a mezer, které se používají k obrysu obrazce.
  • StrokeDashOffset, typu double, určuje vzdálenost v pomlčkovém vzoru, kde začíná pomlčka. Výchozí hodnota této vlastnosti je 0,0.
  • StrokeLineCap, typu PenLineCap, popisuje obrazec na začátku a na konci čáry nebo segmentu. Výchozí hodnota této vlastnosti je PenLineCap.Flat.
  • StrokeLineJoin, typu PenLineJoin, určuje typ spojení, které se používá na vrcholech obrazce. Výchozí hodnota této vlastnosti je PenLineJoin.Miter.
  • StrokeMiterLimit, typu double, určuje omezení poměru délky miteru na polovinu StrokeThickness obrazce. Výchozí hodnota této vlastnosti je 10,0.
  • StrokeThickness, typu doubleoznačuje šířku obrysu obrazce. Výchozí hodnota této vlastnosti je 1,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Xamarin.Forms definuje počet objektů, které jsou odvozeny z Shape třídy. Jedná se Ellipseo , , LinePath, Polygon, Polylinea Rectangle.

Malování obrazců

Brush objekty se používají k malování obrazců Stroke a Fill:

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

V tomto příkladu jsou zadány tahy a výplně Ellipse :

Malování obrazců

Důležité

Brush objekty používají převaděč typů, který umožňuje Color zadání hodnot pro Stroke vlastnost.

Pokud neurčíte Brush objekt pro Strokehodnotu 0 nebo pokud nastavíte StrokeThickness hodnotu 0, nebude ohraničení kolem obrazce nakresleno.

Další informace o Brush objektech naleznete v tématu Xamarin.Forms Štětce. Další informace o platných Color hodnotách naleznete v tématu Barvy v Xamarin.Forms.

Roztažení obrazců

Shape objekty mají Aspect vlastnost typu Stretch. Tato vlastnost určuje, jak Shape se obsah objektu roztáhne tak, aby vyplnil Shape prostor rozložení objektu. Prostor Shape rozložení objektu je velikost prostoru, který Shape je přidělen Xamarin.Forms systémem rozložení, a to z důvodu explicitního WidthRequest a HeightRequest nastavení nebo z důvodu jeho HorizontalOptions a VerticalOptions nastavení.

Výčet Stretch definuje následující členy:

  • None, což označuje, že obsah zachovává původní velikost. Toto je výchozí hodnota Shape.Aspect vlastnosti.
  • Fill, což označuje, že obsah je změněn tak, aby vyplnil cílové dimenze. Poměr stran není zachován.
  • Uniform, což označuje, že obsah se mění tak, aby odpovídal cílovým dimenzím a zachoval poměr stran.
  • UniformToFill, označuje, že obsah je změněn tak, aby vyplnil cílové rozměry při zachování poměru stran. Pokud se poměr stran cílového obdélníku liší od zdroje, zdrojový obsah se vystřihne tak, aby se vešel do cílových dimenzí.

Následující XAML ukazuje, jak nastavit Aspect vlastnost:

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

V tomto příkladu objekt Path nakreslí srdce. Objekt Path a vlastnosti jsou nastaveny na 100 jednotek nezávislých na zařízení a jeho Aspect vlastnost je nastavena na Uniform.HeightRequest WidthRequest V důsledku toho se obsah objektu mění tak, aby odpovídal cílovým dimenzím a zachoval poměr stran:

Roztažení obrazců

Kreslení přerušovaných obrazců

Shape objekty mají StrokeDashArray vlastnost typu DoubleCollection. Tato vlastnost představuje kolekci double hodnot, které označují vzor pomlček a mezer, které se používají k obrysu obrazce. A DoubleCollection je hodnota ObservableCollection double . Každá double z kolekcí určuje délku pomlčky nebo mezery. První položka v kolekci, která se nachází v indexu 0, určuje délku pomlčky. Druhá položka v kolekci, která se nachází v indexu 1, určuje délku mezery. Objekty s sudou hodnotou indexu proto určují pomlčky, zatímco objekty s lichou hodnotou indexu určují mezery.

Shape objekty mají StrokeDashOffset také vlastnost typu double, která určuje vzdálenost v rámci vzoru pomlčky, kde začíná pomlčka. Pokud tuto vlastnost nastavíte, bude mít plnou osnovu Shape .

Přerušované obrazce lze kreslit nastavením obou StrokeDashArray StrokeDashOffset vlastností. Vlastnost StrokeDashArray by měla být nastavena na jednu nebo více double hodnot s každou dvojicí oddělenou jednou čárkou a/nebo jednou nebo více mezerami. Například "0.5 1.0" a "0,5,1.0" jsou obě platné.

Následující příklad XAML ukazuje, jak nakreslit přerušovaný obdélník:

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

V tomto příkladu se nakreslí vyplněný obdélník přerušovaným tahem:

Přerušovaný obdélník

Řídicí čára končí

Čára má tři části: počáteční čepici, tělo čáry a koncovou čepici. Počáteční a koncová zakončení popisují obrazec na začátku a konci čáry nebo segmentu.

Shape objekty mají StrokeLineCap vlastnost typu PenLineCap, která popisuje obrazec na začátku a konci čáry nebo segmentu. Výčet PenLineCap definuje následující členy:

  • Flat, který představuje zakončení, které se neprodlouží za poslední bod čáry. To je srovnatelné s žádným limitem řádku a je výchozí hodnotou StrokeLineCap vlastnosti.
  • Square, který představuje obdélník, který má výšku rovnou tloušťku čáry a délku rovnající se polovině tloušťky čáry.
  • Round, který představuje středník, který má průměr, který se rovná tloušťkě čáry.

Důležité

Vlastnost StrokeLineCap nemá žádný vliv, pokud ji nastavíte na obrazec, který nemá žádné počáteční nebo koncové body. Například tato vlastnost nemá žádný vliv, pokud ji nastavíte na objekt nebo EllipseRectangle.

Následující XAML ukazuje, jak nastavit StrokeLineCap vlastnost:

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

V tomto příkladu je červená čára zaokrouhlená na začátku a na konci řádku:

Zakončení čar

Spojení řídicích čar

Shape objekty mají StrokeLineJoin vlastnost typu PenLineJoin, která určuje typ spojení, které se používá na vrcholech obrazce. Výčet PenLineJoin definuje následující členy:

  • Miter, který představuje pravidelné úhlové vrcholy. Toto je výchozí hodnota StrokeLineJoin vlastnosti.
  • Bevel, který představuje zkosené vrcholy.
  • Round, který představuje zaokrouhlené vrcholy.

Poznámka:

StrokeLineJoin Pokud je vlastnost nastavena na Miter, StrokeMiterLimit lze vlastnost nastavit na double omezení délky miter spojnic v obrazci.

Následující XAML ukazuje, jak nastavit StrokeLineJoin vlastnost:

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

V tomto příkladu má tmavě modrá křivka zaokrouhlené spojení na vrcholech:

Spojnicové spojení