테두리

아티클
05/14/2024

.NET 다중 플랫폼 앱 UI(.NET MAUI) Border 는 다른 컨트롤 주위에 테두리, 배경 또는 둘 다를 그리는 컨테이너 컨트롤입니다. A는 Border 하나의 자식 개체만 포함할 수 있습니다. 여러 개체 주위에 테두리를 배치하려면 레이아웃과 같은 컨테이너 개체에 래핑합니다. 레이아웃에 대한 자세한 내용은 레이아웃을 참조하세요.

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

Content형식 IView의 는 테두리에 표시할 콘텐츠를 나타냅니다. 이 속성은 ContentProperty 클래스의 Border 속성이므로 XAML에서 명시적으로 설정할 필요가 없습니다.
Padding형식 Thickness의 는 테두리와 해당 자식 요소 사이의 거리를 나타냅니다.
StrokeShape형식의 IShape테두리 모양을 설명합니다. 이 속성에는 문자열을 해당하는 IShape형식으로 변환할 수 있는 형식 변환기가 적용되어 있습니다. 기본값은 .입니다 Rectangle. 따라서 기본적으로 직 Border 사각형이 됩니다.
Stroke형식 Brush의 테두리를 그리는 데 사용되는 브러시를 나타냅니다.
StrokeThickness형식 double의 은 테두리의 너비를 나타냅니다. 이 속성의 기본값은 1.0입니다.
StrokeDashArray- 테두리를 구성하는 파선과 간격의 double 패턴을 나타내는 값 컬렉션을 나타내는 형식DoubleCollection입니다.
StrokeDashOffset형식 double의 는 대시가 시작되는 대시 패턴 내의 거리를 지정합니다. 이 속성의 기본값은 0.0입니다.
StrokeLineCap형식 PenLineCap의 경우 선의 시작과 끝에 있는 셰이프를 설명합니다. 이 속성의 기본값은 PenLineCap.Flat입니다.
StrokeLineJoin형식 PenLineJoin의 경우 스트로크 셰이프의 꼭짓점에서 사용되는 조인의 형식을 지정합니다. 이 속성의 기본값은 PenLineJoin.Miter입니다.
StrokeMiterLimit형식 double의 는 스트로크 두께의 절반에 대한 미터 길이의 비율에 대한 제한을 지정합니다. 이 속성의 기본값은 10.0입니다.

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

Important

또는 닫힌 셰이프와 같은 셰이프를 사용하여 테두리를 Rectangle Polygon만들 때는 닫힌 셰이프만 사용해야 합니다. 따라서 열려 있는 셰이프(예: Line 지원되지 않음)가 지원되지 않습니다.

테두리의 도형과 스트로크를 제어하는 속성에 대한 자세한 내용은 셰이프를 참조 하세요.

테두리 만들기

테두리를 그리려면 개체를 Border 만들고 해당 속성을 설정하여 모양을 정의합니다. 그런 다음 해당 자식의 테두리를 추가할 컨트롤로 설정합니다.

다음 XAML 예제에서는 테두리를 주위에 그리는 방법을 보여 있습니다.Label

<Border Stroke="#C49B33"
        StrokeThickness="4"
        StrokeShape="RoundRectangle 40,0,0,40"
        Background="#2B0B98"
        Padding="16,8"
        HorizontalOptions="Center">
    <Label Text=".NET MAUI"
           TextColor="White"
           FontSize="18"
           FontAttributes="Bold" />
</Border>

StrokeShape 또는 속성 태그 구문을 사용하여 속성 값을 지정할 수 있습니다.

<Border Stroke="#C49B33"
        StrokeThickness="4"
        Background="#2B0B98"
        Padding="16,8"
        HorizontalOptions="Center">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="40,0,0,40" />
    </Border.StrokeShape>
    <Label Text=".NET MAUI"
           TextColor="White"
           FontSize="18"
           FontAttributes="Bold" />
</Border>

해당하는 C# 코드는 다음과 같습니다.

using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...

Border border = new Border
{
    Stroke = Color.FromArgb("#C49B33"),
    Background = Color.FromArgb("#2B0B98"),
    StrokeThickness = 4,
    Padding = new Thickness(16, 8),
    HorizontalOptions = LayoutOptions.Center,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(40, 0, 0, 40)
    },
    Content = new Label
    {
        Text = ".NET MAUI",
        TextColor = Colors.White,
        FontSize = 18,
        FontAttributes = FontAttributes.Bold
    }
};

이 예제에서는 왼쪽 위와 오른쪽 아래 모서리가 둥근 테두리를 그립니다 Label. 테두리 도형은 개체로 RoundRectangle 정의되며, 해당 CornerRadius 속성은 사각형의 각 모서리를 독립적으로 제어할 수 있는 값으로 설정 Thickness 됩니다.

Border around a Label screenshot.

속성 형식 Stroke 이므로 Brush그라데이션을 사용하여 테두리를 그릴 수도 있습니다.

<Border StrokeThickness="4"
        StrokeShape="RoundRectangle 40,0,0,40"
        Background="#2B0B98"
        Padding="16,8"
        HorizontalOptions="Center">
    <Border.Stroke>
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Orange"
                          Offset="0.1" />
            <GradientStop Color="Brown"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Border.Stroke>
    <Label Text=".NET MAUI"
           TextColor="White"
           FontSize="18"
           FontAttributes="Bold" />
</Border>

해당하는 C# 코드는 다음과 같습니다.

using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...

Border gradientBorder = new Border
{
    StrokeThickness = 4,
    Background = Color.FromArgb("#2B0B98"),
    Padding = new Thickness(16, 8),
    HorizontalOptions = LayoutOptions.Center,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(40, 0, 0, 40)
    },
    Stroke = new LinearGradientBrush
    {
        EndPoint = new Point(0, 1),
        GradientStops = new GradientStopCollection
        {
            new GradientStop { Color = Colors.Orange, Offset = 0.1f },
            new GradientStop { Color = Colors.Brown, Offset = 1.0f }
        },
    },
    Content = new Label
    {
        Text = ".NET MAUI",
        TextColor = Colors.White,
        FontSize = 18,
        FontAttributes = FontAttributes.Bold
    }
};

이 예제에서는 선형 그라데이션을 사용하는 테두리가 다음과 같이 그려집니다 Label.

Linear gradient border around a Label screenshot.

문자열을 사용하여 테두리 셰이프 정의

XAML에서 속성 값 StrokeShape 은 속성 태그 구문을 사용하거나 string로 정의할 수 있습니다. 속성의 StrokeShape 유효한 string 값은 다음과 같습니다.

Ellipse
Line- 다음으로 하나 또는 두 개의 x-좌표 쌍과 y 좌표 쌍이 잇습니다. 예를 들어 Line 10 20 (10,20)에서 (0,0 Line 10 20, 100 120 )까지의 선을 그리고 (10,20)에서 (100,120)까지의 선을 그립니다.
Path경로 태그 구문 데이터 뒤에 잇습니다. 예를 들어 Path M 10,100 L 100,100 100,50Z 삼각형 테두리를 그립니다. 경로 태그 구문에 대한 자세한 내용은 경로 태그 구문을 참조 하세요.
Polygonx 및 y 좌표 쌍의 컬렉션 뒤에 잇습니다. 예: Polygon 40 10, 70 80, 10 50.
Polyline컬렉션 x 및 y 좌표 쌍 뒤에 잇습니다. 예: Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
Rectangle
RoundRectangle선택적으로 모퉁이 반경 뒤에 잇습니다. 예를 들어 RoundRectangle 40 또는 RoundRectangle 40,0,0,40입니다.

Important

Line 속성에 유효한 stringStrokeShape 값이지만 해당 사용은 지원되지 않습니다.

String-based x- 및 y 좌표 쌍은 단일 쉼표 및/또는 하나 이상의 공백으로 구분할 수 있습니다. 예를 들어 "40,10 70,80" 및 "40 10, 70 80"은 모두 유효합니다. 좌표 쌍은 형식double의 정의 X 및 Y 속성 개체로 Point 변환됩니다.

다음을 통해 공유

테두리

테두리 만들기

문자열을 사용하여 테두리 셰이프 정의

피드백

추가 리소스