Xamarin.Forms Kształty

  • Artykuł

Element Shape to typ View , który umożliwia rysowanie kształtu na ekranie. Shape obiekty mogą być używane wewnątrz klas układu i większości kontrolek, ponieważ Shape klasa pochodzi z View klasy.

Xamarin.FormsKształty są dostępne w Xamarin.Forms.Shapes przestrzeni nazw w systemach iOS, Android, macOS, platforma uniwersalna systemu Windows (UWP) i Windows Presentation Foundation (WPF).

Shape definiuje następujące właściwości:

  • Aspect, typu Stretch, opisuje, jak kształt wypełnia przydzielone miejsce. Wartość domyślna tej właściwości to Stretch.None.
  • Fill, typu Brush, wskazuje szczotkę używaną do malowania wnętrza kształtu.
  • Stroke, typu Brush, wskazuje szczotkę używaną do malowania konturu kształtu.
  • StrokeDashArray, typu DoubleCollection, który reprezentuje kolekcję double wartości, które wskazują wzorzec kreski i przerw, które są używane do nakreślenia kształtu.
  • StrokeDashOffset, typu double, określa odległość w deseniu kreski, w którym rozpoczyna się kreska. Wartość domyślna tej właściwości to 0,0.
  • StrokeLineCap, typu PenLineCap, opisuje kształt na początku i końcu wiersza lub segmentu. Wartość domyślna tej właściwości to PenLineCap.Flat.
  • StrokeLineJoin, typu PenLineJoin, określa typ sprzężenia używanego w wierzchołkach kształtu. Wartość domyślna tej właściwości to PenLineJoin.Miter.
  • StrokeMiterLimit, typu double, określa limit stosunku długości miter do połowy StrokeThickness kształtu. Wartość domyślna tej właściwości to 10.0.
  • StrokeThickness, typu double, wskazuje szerokość konturu kształtu. Wartość domyślna tej właściwości to 1.0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Xamarin.Forms definiuje liczbę obiektów, które pochodzą z Shape klasy . EllipseSą to : , , LinePath, Polygon, Polylinei Rectangle.

Malowanie kształtów

Brush obiekty są używane do malowania kształtów Stroke i Fill:

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

W tym przykładzie określono pociągnięcie i wypełnienie elementu Ellipse :

Paint shapes

Ważne

Brush obiekty używają konwertera typów, który umożliwia Color określenie wartości dla Stroke właściwości.

Jeśli nie określisz Brush obiektu dla Stroke, lub jeśli ustawisz wartość StrokeThickness 0, obramowanie wokół kształtu nie zostanie narysowane.

Aby uzyskać więcej informacji na temat Brush obiektów, zobacz Xamarin.Forms Szczotki. Aby uzyskać więcej informacji na temat prawidłowych Color wartości, zobacz Kolory w pliku Xamarin.Forms.

Rozciągnij kształty

Shape obiekty mają Aspect właściwość typu Stretch. Ta właściwość określa sposób Shape rozciągania zawartości obiektu w celu wypełnienia Shape przestrzeni układu obiektu. Shape Przestrzeń układu obiektu to ilość miejsca Shape przydzielonego przez Xamarin.Forms system układu z powodu jawnego WidthRequest ustawienia lub HeightRequest ze względu na jego HorizontalOptions ustawienia iVerticalOptions.

Wyliczenie Stretch definiuje następujące elementy członkowskie:

  • None, który wskazuje, że zawartość zachowuje oryginalny rozmiar. Jest to wartość domyślna Shape.Aspect właściwości.
  • Fill, który wskazuje, że rozmiar zawartości jest zmieniany w celu wypełnienia wymiarów docelowych. Współczynnik proporcji nie jest zachowywany.
  • Uniform, który wskazuje, że rozmiar zawartości jest zmieniany tak, aby pasował do wymiarów docelowych, zachowując współczynnik proporcji.
  • UniformToFill, wskazuje, że rozmiar zawartości jest zmieniany w celu wypełnienia wymiarów docelowych przy zachowaniu współczynnika proporcji. Jeśli współczynnik proporcji prostokąta docelowego różni się od źródła, zawartość źródłowa zostanie obcięta, aby zmieścić się w wymiarach docelowych.

Poniższy kod XAML pokazuje, jak ustawić Aspect właściwość:

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

W tym przykładzie Path obiekt rysuje serce. WidthRequest Właściwości Path obiektu i HeightRequest są ustawione na 100 jednostek niezależnych od urządzenia, a jego Aspect właściwość jest ustawiona na Uniformwartość . W związku z tym rozmiar zawartości obiektu jest zmieniany tak, aby pasował do wymiarów docelowych, zachowując współczynnik proporcji:

Stretch shapes

Rysuj kształty kreskowane

Shape obiekty mają StrokeDashArray właściwość typu DoubleCollection. Ta właściwość reprezentuje kolekcję double wartości, które wskazują wzorzec kresek i przerw, które są używane do konturowania kształtu. A DoubleCollection jest wartościami doubleObservableCollection. Każda double z nich w kolekcji określa długość kreski lub szczeliny. Pierwszy element w kolekcji, który znajduje się w indeksie 0, określa długość kreski. Drugi element w kolekcji, który znajduje się w indeksie 1, określa długość luki. W związku z tym obiekty z parzystą wartością indeksu określają kreski, podczas gdy obiekty z nieparzystną wartością indeksu określają luki.

Shape obiekty mają StrokeDashOffset również właściwość typu double, która określa odległość w deseniu kreski, w którym rozpoczyna się kreska. Nie można ustawić tej właściwości, co spowoduje Shape powstanie solidnego konspektu.

Kształty kreskowane można narysować, ustawiając właściwości StrokeDashArray i StrokeDashOffset . Właściwość StrokeDashArray powinna być ustawiona na co najmniej jedną double wartość, z każdą parą rozdzielaną przecinkami lub co najmniej jedną spacją. Na przykład wartości "0.5 1.0" i "0.5,1.0" są prawidłowe.

W poniższym przykładzie XAML pokazano, jak narysować prostokąt przerywany:

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

W tym przykładzie narysowany jest wypełniony prostokąt z kreskowanym pociągnięciem:

Dashed rectangle

Końce linii sterowania

Linia ma trzy części: czapkę początkową, treść linii i czapkę końcową. Limity początkowe i końcowe opisują kształt na początku i końcu wiersza lub segmentu.

Shape obiekty mają StrokeLineCap właściwość typu PenLineCap, która opisuje kształt na początku i na końcu wiersza lub segmentu. Wyliczenie PenLineCap definiuje następujące elementy członkowskie:

  • Flat, który reprezentuje limit, który nie rozszerza ostatniego punktu wiersza. Jest to porównywalne z żadnym limitem wiersza i jest wartością domyślną StrokeLineCap właściwości.
  • Square, który reprezentuje prostokąt o wysokości równej grubości linii i długości równej połowie grubości linii.
  • Round, który reprezentuje półokrąg, który ma średnicę równą grubości linii.

Ważne

Właściwość StrokeLineCap nie ma wpływu, jeśli ustawisz ją na kształcie, który nie ma punktów początkowych ani końcowych. Na przykład ta właściwość nie ma wpływu, jeśli ustawisz ją na obiekcie Ellipselub Rectangle.

Poniższy kod XAML pokazuje, jak ustawić StrokeLineCap właściwość:

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

W tym przykładzie czerwona linia jest zaokrąglona na początku i na końcu wiersza:

Line caps

Sprzężenia linii sterowania

Shape obiekty mają StrokeLineJoin właściwość typu PenLineJoin, która określa typ sprzężenia używanego w wierzchołkach kształtu. Wyliczenie PenLineJoin definiuje następujące elementy członkowskie:

  • Miter, który reprezentuje regularne wierzchołki kątowe. Jest to wartość domyślna StrokeLineJoin właściwości.
  • Bevel, który reprezentuje skośne wierzchołki.
  • Round, który reprezentuje zaokrąglone wierzchołki.

Uwaga

StrokeLineJoin Gdy właściwość jest ustawiona na Miterwartość , StrokeMiterLimit właściwość można ustawić na wartość , double aby ograniczyć długość miter sprzężeń linii w kształcie.

Poniższy kod XAML pokazuje, jak ustawić StrokeLineJoin właściwość:

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

W tym przykładzie ciemnoniebieska wielolinia zaokrągla sprzężenia na jego wierzchołkach:

Line joins