방법: 선형 그라데이션으로 영역 그리기

이 예제에서는 LinearGradientBrush 클래스를 사용하여 선형 그라데이션으로 영역을 그리는 방법을 보여 줍니다. 다음 예제에서는 노랑, 빨강, 파랑, 황록색의 순서로 바뀌는 대각선 선형 그라데이션을 사용하여 Rectangle의 Fill을 그립니다.

예제

<!-- 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;

다음 그림에서는 이전 예제에서 만든 그라데이션을 보여 줍니다.

가로 방향의 선형 그라데이션을 만들려면 LinearGradientBrush의 StartPoint 및 EndPoint를 (0,0.5) 및 (1,0.5)로 변경합니다. 다음 예제에서는 가로 방향의 선형 그라데이션을 사용하여 Rectangle을 그립니다.

<!-- 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; 

다음 그림에서는 이전 예제에서 만든 그라데이션을 보여 줍니다.

세로 방향의 선형 그라데이션을 만들려면 LinearGradientBrush의 StartPoint 및 EndPoint를 (0.5,0) 및 (0.5,1)로 변경합니다. 다음 예제에서는 세로 방향의 선형 그라데이션을 사용하여 Rectangle을 그립니다.

<!-- 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;  

다음 그림에서는 이전 예제에서 만든 그라데이션을 보여 줍니다.

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

다른 예제를 보려면 브러시 샘플을 참조하십시오. 그라데이션 및 다른 종류의 브러시에 대한 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오.