본문 바로가기
.NET WPF

[Xaml] Gradient 그리기

by 태디 2007. 8. 25.
728x90

[Silverlight:Xaml 문법] Gradient 그리기
 
Properties

LinearGradientBrush

 StartPoint  Gradient 시작점 좌표
 EndPoint  Gradient 끝점 좌표

RadialGradientBrush

 GradientOrigin  Gradient 시작점 좌표
 Center  Gradient 중심점 좌표
 RadiusX  Gradient 반지름 X값
 RadiusY  Gradient 반지름 Y값

GradientStop 

 Color  Gradient Color
 Offset  Gradient 기준점


Gradient 그리기는 직선형과 원형의 2가지 방법이 있습니다.

직선형의 Gradient은 LinearGradientBrush로 그릴 수 있습니다. Gradient를 그리는 방향은 대각선, 가로, 세로 그릴수 있습니다.

1. 대각선 Gradient

<Rectangle Width="326" Height="192" Stroke="#FF000000" Canvas.Left="170" Canvas.Top="125">
   
<Rectangle.Fill>
       
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
           
<GradientStop Color="#FFFF0A04" Offset="0"/>
            <
GradientStop Color="#FEE89435" Offset="0.173"/>
            <
GradientStop Color="#FEE1C004" Offset="0.341"/>
            <
GradientStop Color="#FE00FF00" Offset="0.51"/>
            <
GradientStop Color="#FE0000FF" Offset="0.692"/>
            <
GradientStop Color="#FE040738" Offset="0.841"/>
            <
GradientStop Color="#FFFF027D" Offset="0.995"/>
        </
LinearGradientBrush>
   
</Rectangle.Fill>
</Rectangle>


사용자 삽입 이미지


Gradient은 StartPoint와 EndPoint 두 지점 사이에 그려지며 그사이에 Offset(기준점)을 경계로 Gradient색을 표현합니다.

StartPoint="0,0" EndPoint="1,1"
사용자 삽입 이미지

2. 가로 Gradient

<Rectangle Width="326" Height="192" Stroke="#FF000000" Canvas.Left="170" Canvas.Top="125">
   
<Rectangle.Fill>
       
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
           
<GradientStop Color="#FFFF0A04" Offset="0"/>
            <
GradientStop Color="#FEE89435" Offset="0.173"/>
            <
GradientStop Color="#FEE1C004" Offset="0.341"/>
            <
GradientStop Color="#FE00FF00" Offset="0.51"/>
            <
GradientStop Color="#FE0000FF" Offset="0.692"/>
            <
GradientStop Color="#FE040738" Offset="0.841"/>
            <
GradientStop Color="#FFFF027D" Offset="0.995"/>
        </
LinearGradientBrush>
   
</Rectangle.Fill>
</Rectangle>


StartPoint="0, 0.5" EndPoint="1, 0.5"

사용자 삽입 이미지


3. 세로 Gradient

<Rectangle Width="326" Height="192" Stroke="#FF000000" Canvas.Left="170" Canvas.Top="125">
   
<Rectangle.Fill>
       
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
           
<GradientStop Color="#FFFF0A04" Offset="0"/>
            <
GradientStop Color="#FEE89435" Offset="0.173"/>
            <
GradientStop Color="#FEE1C004" Offset="0.341"/>
            <
GradientStop Color="#FE00FF00" Offset="0.51"/>
            <
GradientStop Color="#FE0000FF" Offset="0.692"/>
            <
GradientStop Color="#FE040738" Offset="0.841"/>
            <
GradientStop Color="#FFFF027D" Offset="0.995"/>
        </
LinearGradientBrush>
   
</Rectangle.Fill>
</Rectangle>


StartPoint="0.5, 0" EndPoint="0.5, 1"

사용자 삽입 이미지


곡선형태의 Gradient는 RadialGradientBrush로 그릴수 있습니다.

<Rectangle Width="326" Height="192" Stroke="#FF000000" Canvas.Left="170" Canvas.Top="125">
   
<Rectangle.Fill>
       
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" 
                             RadiusX
="0.5" RadiusY="0.5">
           
<GradientStop Color="#FFFF0A04" Offset="0"/>
            <
GradientStop Color="#FEE89435" Offset="0.173"/>
            <
GradientStop Color="#FEE1C004" Offset="0.341"/>
            <
GradientStop Color="#FE00FF00" Offset="0.51"/>
            <
GradientStop Color="#FE0000FF" Offset="0.692"/>
            <
GradientStop Color="#FE040738" Offset="0.841"/>
            <
GradientStop Color="#FFFF027D" Offset="0.995"/>
        </
RadialGradientBrush>
   
</Rectangle.Fill>
</Rectangle>


GradientOrigin="0.5, 0.5" Center="0.5, 0.5" RadiusX="0.5" RadiusY="0.5"

사용자 삽입 이미지


Gradient, GradientOrigin, RadiusX, RadiusY의 값에 따라 밑의 그림처럼 다양하게 곡선형태의 Gridient를 그릴수 있습니다.

RadialGradientBrush settings 
[http://msdn2.microsoft.com/en-us/library/bb412383.aspx 그림 참조]

아직까지 Expression Blend에서는 완벽하게 Gradient의 효과를 줄 수 없습니다. 그러므로 디테일하게 Gradient를 다룰경우 Xaml 속성을 값을 다양하게 변경할 수 있습니다.

댓글