Xamarin.Forms Şekillerine

, ShapeView Ekrana bir şekil çizmenizi sağlayan bir türüdür. Shape nesneler, sınıf sınıfından türediğinden düzen sınıfları ve çoğu denetim içinde kullanılabilir ShapeView .

Xamarin.Formsşekiller, Xamarin.Forms.Shapes iOS, Android, macos, Evrensel Windows Platformu (UWP) ve Windows Presentation Foundation (WPF) üzerindeki ad alanında kullanılabilir.

Shape aşağıdaki özellikleri tanımlar:

  • Aspect, türünde Stretch , şeklin ayrılan alanı nasıl doldurduğunu açıklar. Bu özelliğin varsayılan değeri Stretch.None .
  • Fill, türü Brush , şeklin iç kısmını boyamak için kullanılan fırçayı gösterir.
  • Stroke, türünde Brush , şeklin ana hattını boyamak için kullanılan fırçayı gösterir.
  • StrokeDashArray, DoubleCollectiondouble bir şeklin anahatlarını belirlemek için kullanılan tireler ve boşlukların düzenlerini belirten bir değer koleksiyonunu temsil eden türü.
  • StrokeDashOffset, türünde double , çizginin başladığı tire deseninin içindeki mesafeyi belirtir. Bu özelliğin varsayılan değeri 0,0 ' dir.
  • StrokeLineCap, türünde PenLineCap , bir satırın veya segmentin başlangıç ve sonundaki şekli açıklar. Bu özelliğin varsayılan değeri PenLineCap.Flat .
  • StrokeLineJoin, türünde PenLineJoin , bir şeklin köşelerine göre kullanılan birleştirmenin türünü belirtir. Bu özelliğin varsayılan değeri PenLineJoin.Miter .
  • StrokeMiterLimit, türünde double , gönye uzunluğunun bir şeklin yarısına oranını belirtir StrokeThickness . Bu özelliğin varsayılan değeri 10,0 ' dir.
  • StrokeThickness, türü double , şekil anahattının genişliğini gösterir. Bu özelliğin varsayılan değeri 1,0 ' dir.

Bu özellikler nesneler tarafından desteklenir BindableProperty , bu, veri bağlamalarının hedefleri olabileceği ve stillendirilmiş olduğu anlamına gelir.

Xamarin.Forms sınıfından türetilen nesne sayısını tanımlar Shape . Bunlar,,,, ve ' dir EllipseLinePathPolygonPolylineRectangle .

Paint şekilleri

Brush nesneler, bir şeklin ve şekillerin boyamak için Stroke kullanılır Fill :

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

Bu örnekte, bir öğesinin konturu ve dolgusu Ellipse belirtilir:

Paint shapesşekil şekilleri

Önemli

Brush nesneler Color , özellik için belirtilen değerleri sağlayan bir tür dönüştürücüsü kullanır Stroke .

Brushİçin bir nesne belirtmezseniz Stroke veya StrokeThickness 0 olarak ayarlarsanız, şeklin çevresindeki sınır çizilmez.

Nesneler hakkında daha fazla bilgi için Brush bkz Xamarin.Forms Brushes .. Geçerli değerler hakkında daha fazla bilgi için Color bkz Colors in Xamarin.Forms ..

Uzatma şekilleri

Shape nesneler Aspect , türünde bir özelliğe sahiptir Stretch . Bu özellik nesnenin Shape düzen alanını doldurmak için bir nesnenin içeriklerinin nasıl uzatılacağını belirler Shape . ShapeNesnenin düzen alanı, ShapeXamarin.Forms bir açık WidthRequest ve HeightRequest ayar ya da kendi ayarları nedeniyle, Düzen sistemi tarafından ayrılan HorizontalOptions alan miktarıdır VerticalOptions .

StretchSabit listesi aşağıdaki üyeleri tanımlar:

  • None, içeriğin özgün boyutunu koruyacağını gösterir. Bu, özelliğin varsayılan değeridir Shape.Aspect .
  • Fill, içeriğin hedef boyutları dolduracak şekilde yeniden boyutlandırıldığını gösterir. En boy oranı korunmaz.
  • UniformBu, içeriğin hedef boyutlara sığacak şekilde yeniden boyutlandırıldığını belirten, en boy oranını korurken.
  • UniformToFill, içeriğin hedef boyutları dolduracak şekilde yeniden boyutlandırıldığını, ancak en boy oranını korurken emin olduğunu gösterir. Hedef dikdörtgenin en boy oranı kaynaktan farklıysa, kaynak içerik hedef boyutlara sığacak şekilde kırpılır.

Aşağıdaki XAML, özelliği ayarlamayı göstermektedir Aspect :

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

Bu örnekte, bir Path nesne kalp çizer. PathNesnenin WidthRequest ve HeightRequest Özellikleri 100 cihazdan bağımsız birim olarak ayarlanır ve Aspect özelliği olarak ayarlanır Uniform . Sonuç olarak, nesnenin içeriği hedef boyutlara sığacak şekilde yeniden boyutlandırılır, ancak en boy oranı korunur:

Uzatma şekilleri

Kesik çizgili şekiller çizme

Shape nesneler StrokeDashArray , türünde bir özelliğe sahiptir DoubleCollection . Bu özellik double bir şekli ana hatlarıyla göstermek için kullanılan tireler ve boşlukların düzenlerini gösteren bir değerler koleksiyonunu temsil eder. DoubleCollection, Bir ObservableCollectiondouble değerlerdir. doubleKoleksiyondaki her bir çizginin veya boşluğun uzunluğunu belirtir. Koleksiyonda bulunan, 0 dizininde bulunan ilk öğe bir çizginin uzunluğunu belirtir. Koleksiyonda bulunan ikinci öğe, Dizin 1 ' de yer alır ve bir boşluğun uzunluğunu belirtir. Bu nedenle, Çift dizinli bir dizin değerine sahip nesneler, tek bir dizin değerine sahip nesneler boşluklar belirtirken çizgiler belirler.

Shape nesneler Ayrıca, StrokeDashOffsetdouble bir çizginin başladığı tire deseninin içindeki mesafeyi belirten türünde bir özelliğine sahiptir. Bu özelliğin ayarlanamaması, Shape düz bir anahatta neden olur.

Kesikli şekiller hem hem de özellikleri ayarlanarak çizilebilirler StrokeDashArrayStrokeDashOffset . StrokeDashArrayÖzelliği bir veya daha fazla double değere ayarlanmalıdır, her bir çiftin tek bir virgül ve/veya bir veya daha fazla boşluk ile ayrılmış olması gerekir. Örneğin, "0,5 1,0" ve "0,5, 1.0" her ikisi de geçerlidir.

Aşağıdaki XAML örneği, bir kesikli dikdörtgenin nasıl çizileceğini göstermektedir:

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

Bu örnekte, kesikli bir kontura sahip doldurulmuş bir dikdörtgen çizilir:

Kesik çizgili dikdörtgen

Denetim çizgisi uçları

Satır üç bölümden oluşur: başlangıç ucu, satır gövdesi ve bitiş ucu. Başlangıç ve bitiş harfleri, bir satırın başlangıcında ve sonunda şekli veya segmenti anlatmaktadır.

Shape nesneler, StrokeLineCapPenLineCap bir satırın başlangıcında ve sonundaki şekli veya segmenti açıklayan türünde bir özelliğine sahiptir. PenLineCapSabit listesi aşağıdaki üyeleri tanımlar:

  • Flat, satırın son noktasını genişlemeyen bir üst sınırı temsil eder. Bu, çizgi ucu olmadan karşılaştırılabilir ve özelliğinin varsayılan değeridir StrokeLineCap .
  • Square, çizgi kalınlığına eşit yüksekliğe sahip bir dikdörtgeni ve çizgi kalınlığının yarısını eşit olan bir uzunluğu temsil eder.
  • Round, çizgi kalınlığına eşit çapa sahip bir yarım daire temsil eder.

Önemli

StrokeLineCapBaşlangıç veya bitiş noktaları olmayan bir şekil üzerinde ayarlarsanız özelliğin etkisi yoktur. Örneğin, veya ' de ayarlarsanız, bu özelliğin hiçbir etkisi yoktur EllipseRectangle .

Aşağıdaki XAML, özelliği ayarlamayı göstermektedir StrokeLineCap :

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

Bu örnekte, kırmızı çizgi satırın başlangıcına ve sonuna yuvarlanır:

Çizgi Caps üst sınırı

Denetim çizgisi birleşimleri

Shape nesneler StrokeLineJoinPenLineJoin , şeklin köşelerine göre kullanılan birleştirmenin türünü belirten türünde bir özelliğine sahiptir. PenLineJoinSabit listesi aşağıdaki üyeleri tanımlar:

  • Miter, normal Ansal köşeleri temsil eder. Bu, özelliğin varsayılan değeridir StrokeLineJoin .
  • Bevel, eğimli köşeleri temsil eder.
  • Round, Yuvarlatılmış köşeleri temsil eder.

Not

StrokeLineJoinÖzelliği olarak ayarlandığında Miter ,, StrokeMiterLimitdouble şekildeki satır birleşmelerini sınırlamak için özelliği bir olarak ayarlanabilir.

Aşağıdaki XAML, özelliği ayarlamayı göstermektedir StrokeLineJoin :

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

Bu örnekte, koyu mavi çoklu çizgi, köşelerine göre yuvarlatılmış birleşimler içerir:

Çizgi birleştirir