Xamarin.Forms Формы

  • Статья

Shape — это тип элемента View, позволяющего рисовать фигуры на экране. Shape объекты можно использовать внутри классов макета и большинства элементов управления, так как Shape класс является производным от View класса.

Xamarin.FormsФигуры доступны в Xamarin.Forms.Shapes пространстве имен в iOS, Android, macOS, универсальная платформа Windows (UWP) и Windows Presentation Foundation (WPF).

Shape определяет следующие свойства:

  • AspectТип , описывает, как фигура Stretchзаполняет выделенное пространство. Значение по умолчанию этого свойства равно Stretch.None.
  • Fill, типа Brush, указывает кисть, используемую для рисования интерьера фигуры.
  • Stroke, тип Brush, указывает кисть, используемую для рисования контура фигуры.
  • StrokeDashArrayтип DoubleCollection, представляющий коллекцию значений, указывающих шаблон дефисов double и пробелов, используемых для контура фигуры.
  • StrokeDashOffsetdoubleТип , указывает расстояние в шаблоне тире, где начинается тире. Значение по умолчанию этого свойства равно 0.0.
  • StrokeLineCapPenLineCapТип , описывает фигуру в начале и конце линии или сегмента. Значение по умолчанию этого свойства равно PenLineCap.Flat.
  • StrokeLineJoin, тип PenLineJoin, указывает тип соединения, который используется в вершинах фигуры. Значение по умолчанию этого свойства равно PenLineJoin.Miter.
  • StrokeMiterLimit, тип double, указывает ограничение на соотношение длины митера до половины StrokeThickness фигуры. Значение по умолчанию этого свойства равно 10.0.
  • StrokeThicknessdoubleТип , указывает ширину контура фигуры. Значение по умолчанию этого свойства — 1.0.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Xamarin.Forms определяет ряд объектов, производных от Shape класса. Это Ellipse, , Line, PathPolygonPolylineи Rectangle.

Рисование фигур

Brush объекты используются для рисования фигур Stroke и Fill:

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

В этом примере указывается штрих и заливка:Ellipse

Paint shapes

Внимание

Brush объекты используют преобразователь типов, который позволяет Color значениям, указанным для Stroke свойства.

Если объект не указан BrushStrokeили StrokeThickness задано значение 0, граница вокруг фигуры не рисуется.

Дополнительные сведения об объектах см. в Brush разделе Xamarin.Forms "Кисти". Дополнительные сведения о допустимых Color значениях см. в Xamarin.Formsразделе "Цвета".

Растяжения фигур

Shape объекты имеют Aspect свойство типа Stretch. Это свойство определяет, как Shape содержимое объекта растянуто для заполнения Shape пространства макета объекта. Shape Пространство макета объекта — это объем пространстваShape, выделенного Xamarin.Forms системой макета, из-за явного WidthRequest и HeightRequest заданного или из-за его HorizontalOptions и VerticalOptions параметров.

Перечисление Stretch определяет следующие члены:

  • None— указывает, что содержимое сохраняет исходный размер. Это значение по умолчанию для свойства Shape.Aspect.
  • Fill— указывает, что содержимое изменяется для заполнения измерений назначения. Пропорции не сохраняются.
  • Uniform, указывающий, что содержимое изменяется в соответствии с размерами назначения, сохраняя пропорции.
  • UniformToFill, указывает, что содержимое изменяется для заполнения измерений назначения, сохраняя пропорции. Если пропорции целевого прямоугольника отличаются от пропорций источника, исходное содержимое обрезается в соответствии с размерами назначения.

В следующем XAML показано, как задать 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>

В этом примере Path объект рисует сердце. Для Path объекта WidthRequest и HeightRequest свойств задано значение 100 единиц, независимых от устройства, и его Aspect свойство имеет значение Uniform. В результате содержимое объекта изменяется в соответствии с размерами назначения, сохраняя пропорции:

Stretch shapes

Рисование тиреных фигур

Shape объекты имеют StrokeDashArray свойство типа DoubleCollection. Это свойство представляет коллекцию значений, указывающих шаблон дефисов double и пробелов, используемых для контура фигуры. А DoubleCollection — это ObservableCollectiondouble значения. Каждая double из коллекций определяет длину тире или пробела. Первый элемент коллекции, расположенный по индексу 0, указывает длину тире. Второй элемент коллекции, расположенный по индексу 1, указывает длину пробела. Поэтому объекты с четным значением индекса указывают дефисы, а объекты с нечетным значением индекса указывают пробелы.

Shape Объекты также имеют StrokeDashOffset свойство типа, doubleуказывающее расстояние в шаблоне тире, где начинается тире. Сбой установки этого свойства приведет к Shape наличии твердой структуры.

Тиреные фигуры можно нарисовать, задав как свойства, так StrokeDashArray и StrokeDashOffset свойства. Свойство StrokeDashArray должно иметь одно или несколько double значений, причем каждая пара разделена одной запятой и (или) одним или несколькими пробелами. Например, "0.5 1.0" и "0,5,1.0" являются допустимыми.

В следующем примере XAML показано, как нарисовать тиреный прямоугольник:

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

В этом примере рисуется заполненный прямоугольник с тиреным росчерком:

Dashed rectangle

Концы строки управления

Строка состоит из трех частей: начальная крышка, тело строки и конец. Начальные и конечные крышки описывают фигуру в начале и конце строки или сегмента.

Shape объекты имеют StrokeLineCap свойство типа PenLineCap, описывающее фигуру в начале и конце строки или сегмента. Перечисление PenLineCap определяет следующие члены:

  • Flat, представляющий крышку, которая не расширяется до последней точки линии. Это сравнимо с без ограничения строки и является значением StrokeLineCap по умолчанию свойства.
  • Square, представляющий прямоугольник с высотой, равной толщине линии и длине, равной половине толщины линии.
  • Round, представляющий точку с запятой, которая имеет диаметр, равный толщине линии.

Внимание

Свойство StrokeLineCap не влияет, если он задан на фигуре, которая не имеет точек начала или конца. Например, это свойство не действует, если оно задано на объекте Ellipseили Rectangle.

В следующем XAML показано, как задать StrokeLineCap свойство:

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

В этом примере красная линия округляется в начале и конце строки:

Line caps

Соединения линий управления

Shape объекты имеют StrokeLineJoin свойство типа PenLineJoin, указывающее тип соединения, который используется в вершинах фигуры. Перечисление PenLineJoin определяет следующие члены:

  • Miter, представляющий регулярные вершины углов. Это значение по умолчанию для свойства StrokeLineJoin.
  • Bevel, который представляет выпущенные вершины.
  • Round, представляющий округленные вершины.

Примечание.

StrokeLineJoin Если для свойства задано Miterзначение, StrokeMiterLimit свойство можно задать для double ограничения длины мизера соединения линий в фигуре.

В следующем XAML показано, как задать StrokeLineJoin свойство:

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

В этом примере темно-синий полилайн имеет округленные соединения на вершинах:

Line joins