다음을 통해 공유

Xamarin.Forms 셰이프

  • 아티클

Shape는 화면에 도형을 그릴 수 있는 View의 형식에 속합니다. Shape 개체는 클래스에서 파생되므로 레이아웃 클래스 및 대부분의 컨트롤 Shape 내에서 사용할 수 있습니다 View .

Xamarin.Forms셰이프는 iOS, Android, macOS, 유니버설 Windows 플랫폼(UWP) 및 WPF(Windows Presentation Foundation)의 네임스페이스에서 사용할 수 Xamarin.Forms.Shapes 있습니다.

Shape는 다음 속성을 정의합니다.

  • Aspect형식 Stretch의 도형이 할당된 공간을 채우는 방법을 설명합니다. 이 속성의 기본값은 Stretch.None입니다.
  • Fill형식 Brush의 경우 셰이프의 내부를 그리는 데 사용되는 브러시를 나타냅니다.
  • Stroke형식 Brush의 경우 셰이프의 윤곽선을 그리는 데 사용되는 브러시를 나타냅니다.
  • StrokeDashArray도형의 윤곽을 지정하는 데 사용되는 파선과 간격의 double 패턴을 나타내는 값의 컬렉션을 나타내는 형식DoubleCollection의
  • StrokeDashOffset형식 double의 는 대시가 시작되는 대시 패턴 내의 거리를 지정합니다. 이 속성의 기본값은 0.0입니다.
  • StrokeLineCap형식 PenLineCap의 경우 선 또는 세그먼트의 시작과 끝에 있는 셰이프를 설명합니다. 이 속성의 기본값은 PenLineCap.Flat입니다.
  • StrokeLineJoin형식 PenLineJoin의 경우 셰이프의 꼭짓점에서 사용되는 조인 유형을 지정합니다. 이 속성의 기본값은 PenLineJoin.Miter입니다.
  • StrokeMiterLimit형식 double의 는 셰이프의 절반 StrokeThickness 에 대한 미터 길이의 비율에 대한 제한을 지정합니다. 이 속성의 기본값은 10.0입니다.
  • StrokeThickness형식 double의 는 도형 윤곽선의 너비를 나타냅니다. 이 속성의 기본값은 1.0입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

Xamarin.Forms 는 클래스에서 파생되는 여러 개체를 정의합니다 Shape . 이러한 항목은 Ellipse, Line, PolygonPath, Polyline및 Rectangle.

도형 그리기

Brush개체는 셰이프 및 다음을 그리는 데 사용됩니다.Stroke Fill 

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

이 예제에서는 스트로크 및 채우기가 Ellipse 지정됩니다.

도형 그리기

Important

Brush개체는 속성에 대해 값을 지정할 Stroke 수 있도록 하는 Color 형식 변환기를 사용합니다.

개체를 Stroke지정하지 않거나 0으로 Brush 설정 StrokeThickness 하면 셰이프 주위의 테두리가 그려지지 않습니다.

개체에 대한 Brush 자세한 내용은 Brushes를 참조 Xamarin.Forms 하세요. 유효한 Color 값에 대한 자세한 내용은 의 색을 Xamarin.Forms참조하세요.

셰이프 늘이기

Shape 개체에는 Aspect 형식 Stretch의 속성이 있습니다. 이 속성은 개체의 레이아웃 공간을 채우기 Shape 위해 개체의 내용을 늘이는 방법을 Shape 결정합니다. Shape 개체의 레이아웃 공간은 명시적 WidthRequest 및 HeightRequest 설정 또는 해당 설정으로 인해 레이아웃 시스템에서 할당 Xamarin.Forms 하는 공간 Shape 의 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 하트를 그립니다. 개체 WidthRequest 및 속성은 Path 100개의 디바이스 독립적 단위로 설정되고 해당 Aspect 속성은 .로 Uniform설정 HeightRequest 됩니다. 결과적으로 개체의 내용은 가로 세로 비율을 유지하면서 대상 차원에 맞게 크기가 조정됩니다.

셰이프 늘이기

파선 도형 그리기

Shape 개체에는 StrokeDashArray 형식 DoubleCollection의 속성이 있습니다. 이 속성은 도형의 double 윤곽을 지정하는 데 사용되는 파선과 간격의 패턴을 나타내는 값의 컬렉션을 나타냅니다. A DoubleCollection 는 값의 double 값입니다ObservableCollection. 컬렉션의 각각 double 은 대시 또는 간격의 길이를 지정합니다. 인덱스 0에 있는 컬렉션의 첫 번째 항목은 대시의 길이를 지정합니다. 인덱스 1에 있는 컬렉션의 두 번째 항목은 간격의 길이를 지정합니다. 따라서 인덱스 값이 짝수인 개체는 대시를 지정하고 홀수 인덱스 값이 있는 개체는 간격을 지정합니다.

Shape 개체에는 대시가 StrokeDashOffset 시작되는 대시 패턴 내의 거리를 지정하는 형식 double의 속성도 있습니다. 이 속성을 설정하지 않으면 윤곽선이 Shape 고정됩니다.

파선 셰이프는 속성과 StrokeDashOffset 속성을 모두 StrokeDashArray 설정하여 그릴 수 있습니다. 속성은 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" />

이 예제에서는 파선이 있는 채워진 사각형을 그립니다.

파선 사각형

제어줄 끝

선에는 시작 캡, 선 본문 및 끝 캡의 세 부분으로 구성됩니다. 시작 및 끝 대문자에서는 선의 시작과 끝에 있는 셰이프 또는 세그먼트를 설명합니다.

Shape 개체에는 StrokeLineCap 선의 시작과 끝에 있는 셰이프 또는 세그먼트를 설명하는 형식 PenLineCap의 속성이 있습니다. PenLineCap 열거형은 다음 멤버를 정의합니다.

  • Flat줄의 마지막 지점을 지나서 확장되지 않는 상한을 나타냅니다. 이는 줄 한도와 비교할 수 없으며 속성의 StrokeLineCap 기본값입니다.
  • Square선 두께와 높이가 같고 길이가 선 두께의 절반인 사각형을 나타냅니다.
  • Round- 선 두께와 같은 지름을 갖는 반원을 나타냅니다.

Important

StrokeLineCap 시작점이나 끝점이 없는 셰이프에 설정하면 속성이 적용되지 않습니다. 예를 들어 이 속성은 설정하면 영향을 주지 않습니다.EllipseRectangle

다음 XAML은 속성을 설정하는 StrokeLineCap 방법을 보여줍니다.

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

이 예제에서는 줄의 시작과 끝에서 빨간색 선이 반올림됩니다.

선 대문자

제어줄 조인

Shape 개체에는 StrokeLineJoin 셰이프의 PenLineJoin꼭짓점에서 사용되는 조인 유형을 지정하는 형식의 속성이 있습니다. PenLineJoin 열거형은 다음 멤버를 정의합니다.

  • Miter- 일반 각 꼭짓점을 나타냅니다. StrokeLineJoin 속성의 기본값입니다.
  • Bevel- 경사진 꼭짓점을 나타냅니다.
  • Round은 둥근 꼭짓점을 나타냅니다.

참고 항목

속성이 StrokeLineJoin 설정 Miter되면 셰이프에서 StrokeMiterLimit 선 조인의 마이터 길이를 제한하도록 속성을 a로 설정할 double 수 있습니다.

다음 XAML은 속성을 설정하는 StrokeLineJoin 방법을 보여줍니다.

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

이 예제에서 진한 파란색 폴리라인은 꼭짓점에서 둥근 조인을 가집니다.

줄 조인