단색 및 그라데이션을 사용한 그리기 개요

  • 아티클

업데이트: 2007년 11월

이 항목에서는 SolidColorBrush, LinearGradientBrush 및 RadialGradientBrush 개체를 사용하여 단색, 선형 그라데이션 및 방사형 그라데이션으로 그리는 방법을 설명합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

  • 단색으로 영역 그리기
  • 그라데이션으로 영역 그리기
  • 선형 그라데이션
  • 방사형 그라데이션
  • 투명하거나 부분적으로 투명한 그라데이션 중지점 지정
  • 이미지, 그림, 시각적 표시 및 패턴으로 그리기
  • 관련 항목

단색으로 영역 그리기

모든 플랫폼에서 가장 일반적으로 수행하는 작업 중 하나는 단일 Color로 영역을 그리는 것입니다. 이 작업을 수행하기 위해 WPF(Windows Presentation Foundation)는 SolidColorBrush 클래스를 제공합니다. 다음 단원에서는 SolidColorBrush로 그릴 수 있는 여러 가지 방법을 설명합니다.

"XAML"에서 SolidColorBrush 사용

XAML에서 단색으로 영역을 그리려면 다음 옵션 중 하나를 사용합니다.

  • 이름별로 미리 정의된 단색 브러시를 선택합니다. 예를 들어 단추의 Background를 "Red" 또는 "MediumBlue"로 설정할 수 있습니다. 미리 정의된 다른 단색 브러시 목록은 Brushes 클래스의 정적 속성을 참조하십시오. 예를 들면 다음과 같습니다.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using a named color. -->
<Button Background="Red">A Button</Button>

  • 단색으로 조합할 빨간색, 녹색 및 파란색의 양을 지정하여 32비트 색상표에서 색을 선택합니다. 32비트 팔레트에서 색을 지정하는 형식은 "#rrggbb"입니다. 여기서 rr은 빨간색의 상대적인 양을 지정하는 2자리 16진수이며 gg는 녹색의 양을 지정하고 bb는 파란색의 양을 지정합니다. 색을 "#aarrggbb"로도 지정할 수 있습니다. 여기서 aa는 색의 알파 값 또는 투명도를 지정합니다. 이 방법을 사용하면 부분적으로 투명한 색을 만들 수 있습니다. 다음 예제에서 Button의 Background는 16진수 표기법을 사용하여 완전히 불투명한 빨간색으로 설정됩니다.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using hexadecimal notation. -->
<Button Background="#FFFF0000">A Button</Button>

  • 속성 태그 구문을 사용하여 SolidColorBrush를 설명합니다. 보다 자세한 이 구문을 사용하면 브러시의 불투명도와 같은 추가 설정을 지정할 수 있습니다. 다음 예제에서 두 Button 요소의 Background 속성은 완전히 불투명한 빨간색으로 설정됩니다. 첫 번째 브러시의 색은 미리 정의된 색 이름을 사용하여 설명되고 두 번째 브러시의 색은 16진수 표기법을 사용하여 설명됩니다.

    <!-- Both of these buttons' backgrounds are painted with red 
     SolidColorBrush objects, described using object element
     syntax. -->
<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>

코드에서 SolidColorBrush를 사용하여 그리기

코드에서 단색으로 영역을 그리려면 다음 옵션 중 하나를 사용합니다.

  • Brushes 클래스에서 제공하는 미리 정의된 브러시 중 하나를 사용합니다. 다음 예제에서 Button의 Background는 Red로 설정됩니다.

    Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;

  • SolidColorBrush를 만들고 해당 Color 속성을 Color 구조체를 사용하여 설정합니다. Colors 클래스의 미리 정의된 색을 사용하거나 정적 FromArgb 메서드를 사용하여 Color를 만들 수 있습니다.

    다음 예제에서는 미리 정의된 색을 사용하여 SolidColorBrush의 Color 속성을 설정하는 방법을 보여 줍니다.

    Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;

정적 FromArgb를 사용하면 색의 알파, 빨간색, 녹색 및 파란색 값을 지정할 수 있습니다. 이러한 값 각각의 일반적인 범위는 0-255입니다. 예를 들어 알파 값 0은 색이 완전히 투명함을 나타내며 값 255는 색이 완전히 불투명함을 나타냅니다. 마찬가지로 빨간색 값 0은 색에 전혀 빨간색이 없음을 나타내며 값 255는 색에 최대한의 빨간색이 있음을 나타냅니다. 다음 예제에서는 알파, 빨간색, 녹색 및 파란색 값을 지정하여 브러시의 색을 설명합니다.

색을 지정하는 다른 방법은 Color 참조 항목을 참조하십시오.

그라데이션으로 영역 그리기

그라데이션 브러시는 축을 따라 서로 혼합되는 여러 가지 색으로 영역을 그립니다. 이러한 브러시를 통해 명암 효과를 만들어 컨트롤에 3차원 느낌을 줄 수 있습니다. 이러한 브러시를 통해 유리, 크롬, 물 및 기타 부드러운 표면을 시뮬레이션할 수도 있습니다. WPF는 LinearGradientBrush와 RadialGradientBrush라는 두 가지 그라데이션 브러시 형식을 제공합니다.

선형 그라데이션

LinearGradientBrush는 하나의 선, 즉 그라데이션 축을 따라 정의된 그라데이션으로 영역을 그립니다. GradientStop 개체를 사용하여 그라데이션 축을 따라 그라데이션의 색과 해당 위치를 지정합니다. 가로 및 세로 그라데이션을 만들고 그라데이션 방향을 반대로 바꿀 수 있도록 하는 그라데이션 축을 수정할 수도 있습니다. 그라데이션 축은 다음 단원에서 설명합니다. 기본적으로 대각선 그라데이션이 만들어집니다.

다음 예제에서는 네 가지 색을 사용하여 선형 그라데이션을 만드는 코드를 보여 줍니다.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

이 코드는 다음과 같은 그라데이션을 생성합니다.

대각선 선형 그라데이션

참고: 이 항목의 그라데이션 예제에서는 시작점과 끝점을 설정하기 위해 기본 좌표계를 사용합니다. 기본 좌표계는 경계 상자에 상대적입니다. 0은 경계 상자의 0%를 나타내고 1은 경계 상자의 100%를 나타냅니다. MappingMode 속성을 값 Absolute로 설정하여 이 좌표계를 변경할 수 있습니다. 절대 좌표계는 경계 상자에 상대적이지 않으며 값이 로컬 공간에서 직접 해석됩니다.

GradientStop은 그라데이션 브러시의 기본 빌딩 블록입니다. 그라데이션 중지점은 Offset에서 그라데이션 축을 따라 Color를 지정합니다.

  • 그라데이션 중지점의 Color 속성은 그라데이션 중지점의 색을 지정합니다. 미리 정의된 색(Colors 클래스에서 제공)을 사용하거나 ScRGB 또는 ARGB 값을 지정하여 색을 설정할 수 있습니다. XAML에서는 16진수 표기법을 사용하여 색을 설명할 수도 있습니다. 자세한 내용은 Color 구조체를 참조하십시오.

  • 그라데이션 중지점의 Offset 속성은 그라데이션 축에서 그라데이션 중지점 색의 위치를 지정합니다. 오프셋은 0-1 범위의 Double입니다. 그라데이션 중지점의 오프셋 값이 0에 가까울수록 색이 그라데이션의 시작 부분에 가까워집니다. 또한 그라데이션의 오프셋 값이 1에 가까울수록 색이 그라데이션의 끝 부분에 가까워집니다.

그라데이션 중지점 사이에 있는 각 지점의 색은 두 경계 그라데이션 중지점으로 지정한 색의 조합으로 선형 보간됩니다. 다음 그림에서는 이전 예제의 그라데이션 중지점을 강조 표시합니다. 원은 그라데이션 중지점의 위치를 표시하고 파선은 그라데이션 축을 표시합니다.

선형 그라데이션에서 그라데이션 중지

첫 번째 그라데이션 중지점은 0.0의 오프셋에서 노란색을 지정합니다. 두 번째 그라데이션 중지점은 0.25의 오프셋에서 빨간색을 지정합니다. 이러한 두 중지점 사이의 지점은 그라데이션 축을 따라 왼쪽에서 오른쪽으로 이동하면서 점차적으로 노란색에서 빨간색으로 변경됩니다. 세 번째 그라데이션 중지점은 0.75의 오프셋에서 파란색을 지정합니다. 두 번째와 세 번째 그라데이션 중지점 사이의 지점은 점차적으로 빨간색에서 파란색으로 변경됩니다. 네 번째 그라데이션 중지점은 1.0의 오프셋에서 황록색을 지정합니다. 세 번째와 네 번째 그라데이션 중지점 사이의 지점은 점차적으로 파란색에서 황록색으로 변경됩니다.

그라데이션 축

앞에서도 언급했듯이 선형 그라데이션 브러시의 그라데이션 중지점은 하나의 선, 즉 그라데이션 축을 따라 배치됩니다. 브러시의 StartPoint 및 EndPoint 속성을 사용하여 선의 방향과 크기를 변경할 수 있습니다. 브러시의 StartPoint 및 EndPoint를 조작하면 가로 및 세로 그라데이션을 만들고, 그라데이션 방향을 반대로 바꾸고, 그라데이션 범위를 압축하는 등의 작업을 수행할 수 있습니다.

기본적으로 선형 그라데이션 브러시의 StartPoint 및 EndPoint는 그리는 영역에 상대적입니다. (0, 0) 지점은 그리는 영역의 왼쪽 위 모퉁이를 나타내고 (1, 1)은 그리는 영역의 오른쪽 아래 모퉁이를 나타냅니다. LinearGradientBrush의 기본 StartPoint는 (0,0)이고 기본 EndPoint는 (1,1)입니다. 이 경우 왼쪽 위 모퉁이에서 시작하여 그리는 영역의 오른쪽 아래 모퉁이로 확장되는 대각선 그라데이션이 만들어집니다. 다음 그림에서는 기본 StartPoint 및 EndPoint를 사용하여 선형 그라데이션 브러시의 그라데이션 축을 보여 줍니다.

대각선 선형 그라데이션의 그라데이션 축

다음 예제에서는 브러시의 StartPoint 및 EndPoint를 지정하여 가로 그라데이션을 만드는 방법을 보여 줍니다. 그라데이션 중지점은 이전 예제의 그라데이션 중지점과 같습니다. 여기서는 StartPoint 및 EndPoint만 변경하여 그라데이션을 대각선에서 가로로 변경했습니다.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient;

다음 그림에서는 만들어진 그라데이션을 보여 줍니다. 그라데이션 축은 파선으로 표시되고 그라데이션 중지점은 원으로 표시됩니다.

가로 선형 그라데이션의 그라데이션 축

다음 예제에서는 세로 그라데이션을 만드는 방법을 보여 줍니다.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

다음 그림에서는 만들어진 그라데이션을 보여 줍니다. 그라데이션 축은 파선으로 표시되고 그라데이션 중지점은 원으로 표시됩니다.

세로 그라데이션의 그라데이션 축

방사형 그라데이션

LinearGradientBrush처럼 RadialGradientBrush는 축을 따라 함께 혼합되는 색으로 영역을 그립니다. 이전 예제에서는 선형 그라데이션 브러시의 축이 직선임을 보여 주었습니다. 그러나 방사형 그라데이션 브러시의 축은 원으로 정의되며 해당 색이 원점에서 바깥쪽으로 "방사"합니다.

다음 예제에서는 사각형의 내부를 그리기 위해 방사형 그라데이션 브러시가 사용됩니다.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>


RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

다음 그림에서는 이전 예제에서 만든 그라데이션을 보여 줍니다. 브러시의 그라데이션 중지점이 강조 표시되었습니다. 결과는 다르지만 이 예제의 그라데이션 중지점은 이전 선형 그라데이션 브러시 예제의 그라데이션 중지점과 같습니다.

방사형 그라데이션에서 중지된 그라데이션

GradientOrigin은 방사형 그라데이션 브러시의 그라데이션 축에 대한 시작점을 지정합니다. 그라데이션 축은 그라데이션 원점에서 그라데이션 원으로 방사합니다. 브러시의 그라데이션 원은 해당 Center, RadiusX 및 RadiusY 속성으로 정의합니다.

다음 그림에서는 다양한 GradientOrigin, Center, RadiusX 및 RadiusY 설정이 지정된 여러 가지 방사형 그라데이션을 보여 줍니다.

다양한 GradientOrigin, Center, RadiusX 및 RadiusY 설정이 지정된 RadialGradientBrush

RadialGradientBrush 설정

투명하거나 부분적으로 투명한 그라데이션 중지점 지정

그라데이션 중지점은 불투명도 속성을 제공하지 않으므로 태그에서 ARGB 16진수 표기법을 사용하여 색의 알파 채널을 지정하거나 Color.FromScRgb 메서드를 사용하여 투명하거나 부분적으로 투명한 그라데이션 중지점을 만들어야 합니다. 다음 단원에서는 XAML 및 코드에서 부분적으로 투명한 그라데이션 중지점을 만드는 방법을 보여 줍니다. 전체 브러시의 불투명도를 설정하는 방법에 대한 자세한 내용은 브러시의 불투명도 지정 단원을 참조하십시오.

"XAML"에서 색 불투명도 지정

XAML에서는 ARGB 16진수 표기법을 사용하여 개별 색의 불투명도를 지정합니다. ARGB 16진수 표기법에는 다음 구문이 사용됩니다.

#aarrggbb

위 줄에서 aa는 색의 불투명도를 지정하는 데 사용되는 2자리 16진수 값을 나타냅니다. rr, gg 및 bb는 각각 색에서 빨간색, 녹색 및 파란색의 양을 지정하는 데 사용되는 2자리 16진수 값을 나타냅니다. 각 16진수는 0-9 또는 A-F의 값을 가집니다. 0이 가장 작은 값이고 F가 가장 큰 값입니다. 알파 값이 00이면 색이 완전히 투명해지고 알파 값이 FF이면 색이 완전히 불투명해집니다. 다음 예제에서는 두 개의 색을 지정하기 위해 16진수 ARGB 표기법이 사용됩니다. 첫 번째는 부분적으로 투명(알파 값: x20)하고 두 번째는 완전히 불투명합니다.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

코드에서 색 불투명도 지정

코드를 사용할 경우 정적 FromArgb 메서드를 사용하면 색을 만들 때 알파 값을 지정할 수 있습니다. 이 메서드는 Byte 형식의 네 가지 매개 변수를 사용합니다. 첫 번째 매개 변수는 색의 알파 채널을 지정하고 다른 세 매개 변수는 빨간색, 녹색 및 파란색 값을 지정합니다. 각 값은 0 이상 255 이하여야 합니다. 알파 값이 0이면 색이 완전히 투명해지고 알파 값이 255이면 색이 완전히 불투명해집니다. 다음 예제에서는 두 개의 색을 생성하기 위해 FromArgb 메서드가 사용됩니다. 첫 번째 색은 부분적으로 투명(알파 값: 32)하고 두 번째 색은 완전히 불투명합니다.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

ScRGB 값을 사용하여 색을 만들 수 있도록 하는 FromScRgb 메서드를 사용할 수도 있습니다.

이미지, 그림, 시각적 표시 및 패턴으로 그리기

ImageBrush, DrawingBrush 및 VisualBrush 클래스를 사용하면 이미지, 그림 및 시각적 표시로 영역을 그릴 수 있습니다. 이미지, 그림 및 패턴으로 그리는 방법에 대한 자세한 내용은 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

참고 항목

개념

이미지, 그림 및 시각적 표시로 그리기

브러시 변환 개요

그래픽 렌더링 계층

참조

Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush