WPF의 그라디언트(그라데이션) 관련 xaml 코드 분석

이번에는 WPF의 장점 중 하나인 다양하게 적용할 수 있는 디자인 중 하나인 그라데이션 기능에 대하여

각각 코드별로 분석을 해보도록 하겠습니다.

 

1. Linear Gradient (선형 그라디언트)

먼저 MSDN에 있는 그라데이션 설명에 포함된 이미지입니다.

 

대각선 그라데이션

 

해당 그림은 왼쪽 상단에서 오른쪽 하단으로 이어지는 선형 그라디언트(LinearGradient)에 대한 그림입니다.

시작지점(StartPoint)과 끝지점(EndPoint)이 각각 (X,Y) 좌표의 형태를 띄고 있습니다.

먼저 위의 선형 그라디언트을 구현하기 위한 코드를 보겠습니다. 해당 코드도 MSDN에서 가져왔습니다.

 

<!-- 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은 사각형 관련 코드인데 그라디언트와는 관계가 없으므로 건너뛰겠습니다.

 

4번째 줄부터 확인해보면 LinearGradientBrush를 통해 선형 그라디언트를 사용한다고 선언하였고

StartPoint가 (0,0)이고 EndPoint가 (1,1)으로 되어있습니다.

각 포인트들의 의미가 헷갈릴 수 있는데 자세하게 들여다보겠습니다.

 

먼저 StartPoint의 (0,0)입니다. 해당 좌표는 위의 대각선 그라데이션 그림에 나와있는 왼쪽 상단 끝 지점입니다.

그리고 EndPoint의 (1,1)은 위의 대각선 그라데이션 그림에 나와있는 오른쪽 하단 끝 지점입니다.

다른 의미로는 왼쪽 상단 끝에서부터 오른쪽 하단 끝까지 일직선으로 이동하면서 색상을 표시하는 것입니다.

위의 사진만으로는 좌표가 헷갈리실 수 있어 추가 사진도 올립니다.

 

대각선 그라디언트 중간좌표

 

WPF의 그라디언트에서는 Y의 값이 위에서 아래로 내려가면서 증가하는 구조임을 알 수 있습니다.

위의 사진은 있다가 설명드릴 수평 그라디언트의 좌표와 관련되어있으니 참고하시기 바랍니다.

 

그리고 밑의 GradientStop을 선언하여 Color를 통해 색상을 지정하고, Offset을 통해 해당 색상의 시작점을 지정합니다.

예를 들어 빨간색의 Offset이 0.5라면 가운데지점 부터 양 옆으로 뻗어나가는 것을 의미합니다.

그리고 색상이 뻗어나갈 때 거리가 멀어질수록 색상이 번지는 효과를 주면서 옅어집니다.

물론 다른 색상이 있는데 그 색상의 Offset이 0.51이면 빨간색은 오른쪽으로는 더 이상 확장하지 않습니다.

또한, 다른 색상의 Offset이 0.49라면 빨간색은 왼쪽으로 더 이상 확장하지 않게됩니다.

해당 내용은 그림으로 확인하시는게 이해가 더 빠를 것입니다.

 

파란색의 Offset이 0.49인 경우

빨간색의 Offset이 0.49인 경우

 

그리고 마지막에 </LinearGradientBrush>를 넣어줌으로써 LinearGradientBrush의 종료를 알립니다.

그러나 그라데이션이 수직의 형태만 있는 건 아니기에 수평 그라디언트도 확인해보겠습니다.

원래는 속성에서 디자인을 적용해서 코드가 자동으로 생성될 경우 앞에서처럼 StartPoint가 뒤에 적힙니다.

그러나 이번에는 헷갈릴 우려가 있어 코드상의 StartPoint 위치를 앞으로 옮기겠습니다.

 

파란색의 Offset이 0.49인 경우

빨간색의 Offset이 0.49인 경우

 

해당 사진처럼 LinearGradientBrush를 유지한 상태에서 StartPoint와 EndPoint값만 바꿔주면

수평 그라디언트로 변경할 수 있습니다.

수평 그라디언트의 원리를 좀 더 자세하게 풀어보면 아래와 같습니다.

 

수평 그라디언트의 진행 방향

 

위의 그림처럼 StartPoint의 좌표부터 시작해서 EndPoint의 좌표까지 일직선으로 이동한다고 생각하시면 됩니다.

이걸 응용하면 수직, 수평, 대각선 관계없이 원하는 방향으로 그라디언트를 구성할 수 있습니다.

 

2. Radial Gradient (방사형 그라디언트)

이번에는 또 다른 그라디언트인 Radial Gradient(방사형 그라디언트)를 확인해보겠습니다.

먼저 MSDN에 있는 방사형 그라디언트 테스트 코드입니다.

 

<!-- This rectangle is painted with a radial 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">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

 

해당 코드를 분석해보겠습니다.

먼저 Rectangle 코드는 사각형 관련 코드이기 때문에 이번에도 건너뛰겠습니다.

 

4번째 줄부터 살펴보면 RadialGradientBrush를 선언하여 방사형 그라디언트를 사용하고 있는 것을 알 수 있습니다.

일단 방사형 그라디언트는 선형 그라디언트보다 속성이 더 많습니다.

 

1. GradientOrigin

MSDN에서는 '그라데이션 시작을 정의하는 2차원 초점의 위치를 가져오거나 설정합니다.' 라고 되어있습니다.

그러나 이 정도의 설명으로는 정확한 의미를 알기가 힘들죠. 그래서 코드로 직접 확인해보았습니다.

 

각 방향으로 방사형 그라디언트 적용

 

사진상에 보이는 코드는 맨 위에 있는 노란색이 위로 향하는 그림에 대한 코드입니다.

방사형 그라디언트도 선형 그라디언트처럼 좌표의 개념만 이해하면 알기 쉽습니다.

GradientOrigin 값만 수정하였는데 (0.5, 0.1)로 하니 저렇게 되는 걸 확인할 수 있습니다.

 

해당 속성은 Center 속성과 연계되어 있습니다.

현재 Center값이 (0.5, 0.5)이기 때문에 중심점이 위로 잡아끌려있는 형태를 하고있지만

Center값이 (0.5, 0.1)으로 GradientOrigin 값과 같아지면

 

Center == GradientOrigin인 경우

 

위로 잡아끌려있는 형태를 하고있던 원이 Center의 위치를 기점으로 올바르게 잡혀있는 것을 확인할 수 있습니다.

따라서 해당 속성은 Center 위치를 기준으로 잡아 끌리는 방향을 설정한다고 생각하시면 됩니다.

 

2. Center

먼저 MSDN에 기재 되어있는 설명을 보겠습니다.

'방사형 그라데이션의 중심에 있는 2차원 점입니다.'

다른 모든 속성 값에 영향을 주는 속성입니다.

MSDN의 설명대로 중심점이라고 생각하시면 되며, 해당 위치를 기점으로 원의 형태로 색상들이 뻗어나가고 모양이

변하는 등의 동작이 진행되기 때문에 연관관계를 잘 고려하여 설정해야 합니다.

 

3. RadiusX

다음은 MSDN에 기재된 설명입니다.

'방사형 그라데이션에서 가장 바깥쪽 원의 가로 반경입니다. 기본값은 0.5입니다.'

경우에 따라서는 뭔가 이해하기 살짝 어려운 설명입니다.

그래서 이 내용을 참고해서 테스트를 해보았습니다.

 

상단 왼쪽부터 각각 RadiusX 0.1, 0.5, 0.9의 값을 가진 3개의 그림

 

위의 3개의 그림을 보면 RadiusX 값이 각각 0.1, 0.5, 0.9로 설정되어 있습니다.

첫 번째 그림은 Center 좌표를 기준으로 좌우로 각각 0.1만큼 뻗어나가고,

두 번째 그림은 Center 좌표를 기준으로 좌우로 각각 0.5만큼 뻗어나가고,

세 번째 그림은 Center 좌표를 기준으로 좌우로 각각 0.9만큼 뻗어나가는 것을 확인할 수 있습니다.

 

그래서 RadiusX 값을 0으로 설정하면 좌우로 뻗어나가는 거리가 0이기 때문에 도형이 사라지게됩니다.

세 도형의 X 위치값을 각각 좌표로 보면 (0.4 ~ 0.6), (0 ~ 1.0), (-0.4 ~ 1.4)로 나타낼 수 있습니다.

 

4. RadiusY

MSDN에 나오는 설명입니다.

'방사형 그라데이션에서 가장 바깥쪽 원의 세로 반경입니다. 기본값은 0.5입니다.'

RadiusX와 비슷한 효과를 가진 속성입니다.

RadiusX는 좌우로 뻗어나가는 거리를 설정하는 속성이지만

RadiusY는 상하로 뻗어나가는 거리를 설정하는 속성입니다.

이번에는 RadiusY 값에 변화를 주어 테스트한 결과를 보겠습니다.

 

상단 왼쪽부터 각각 RadiusY 0.1, 0.5, 0.9의 값을 가진 3개의 그림

 

제일 왼쪽 그림부터 보면 원통이 압축된 모양처럼 그려져있습니다.

RadiusY 값을 0.1로 주었기 때문인데, RadiusX 처럼 Center 좌표를 기준으로

위아래로 0.1의 길이만큼 그려졌기 때문입니다.

당연히 해당값도 0을 주게 되면 도형이 사라집니다.

RadiusY 값이 0.5인 도형은 안정적이고, 0.9인 도형은 위아래로 많이 뻗어있음을 볼 수 있습니다.

 

그 밑에있는 Offset은 선형 그라디언트와 마찬가지로 색상이 뻗어나가는 시작점입니다.

그래서 다른 색상과의 Offset 차이가 많이나면 날수록 색상이 멀리까지 퍼지는 모양이 나옵니다.

 

마지막으로 모든 그라디언트의 속성 값들은 1이 최대치가 아니며, 수치가 크면 괴상한 모양이 나올 수 있습니다.

이상으로 WPF의 그라디언트에 대해서 분석해보는 시간을 가졌습니다.

사실과 다른점이 있을 경우 지적해주시면 반영하겠습니다.