WPF Korea +_+ :: WPF Custom AngleGradientBrush Using MarkupExtension

WPF2009/08/20 21:33

WPF Custom AngleGradientBrush Using MarkupExtension

안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴내용은 WPF에서 사용할 수 있는 AngleGradientBrush를 제작하는 방법이 되겠습니다. AngleGradient란 아래 그림을 보시면 쉽게 이해 하실 수 있을텐데요, WPF에서는 LinearGradient, RadialGradient만을 제공하는걸 하기때문에 (ReflectedGradient와 Diamond Gradient는 LinearGradient를 이용해 구현할 수 있습니다.)
Angle Gradient와 같은효과 나타내고자 한다면 직접 구현해서 사용해야 합니다.

그런데, 막상 구현을 해서 사용하려고 보면 WPF에서 Custom Brush 제작을 지원하고 있지 않아 직접 구현하는것도 어려워보입니다. 해외 포럼이나 블로거들을 보면 많은 분들께서 Angle Gradient와 관련된 내용에 대해 궁금해 하시는걸 확인할 수 있었는데요. 대부분 Angle Gradient를 Photoshop등에서 미리 그려서 Image File로 가지고 있다가, ImageBrush를 사용하는 방법을 사용한다고 합니다. 하지만, 이런 방법의 경우 Runtime 중에 Gradient Stop을 지정할 수 자유도가 많이 떨어지게 됩니다.

그렇다면 진정 구현할 방법는 것일가요??!?!?!?!?!?!

WPF에서 제공하는 MarkupExtension을 사용하면 생각보다 간단하게 CustomBrush를 구현할 수 있습니다. MarkupExtension이란 XAML을 좀더 확장할 수 있도록 돕는 객체로, 자세한 내용은 아래 URL을 참고하시기 바랍니다.
http://msdn.microsoft.com/ko-kr/library/system.windows.markup.markupextension.aspx
먼저 이번시간에 구현하게될 내용의 시연 동영상을 보고 더 자세히 설명하도록 하겠습니다.

위동영상을 보시면 Runtime중에 자유롭게 Gradient Stop을 지정할 수 있고, Gradient Size, Gradient Detial, CenterPoint등을 의 크기를 지정할 수 있습니다. 원리는 아주 간단합니다. Property를 통해 GradientStop 정보와 Size, Detail, CenterPoint 등의 정보를 입력받고 이를 기반으로 직접 Gradient Image를 생성합니다. 그리고 MarkupExtension의 ProvideValue에 생성한 Image를 사용하는 ImageBrush를 반환 하는 방법을 사용합니다.

그럼 이제 중요한건 Angle Gradient Image를 어떻게 생성하는가가 되겠습니다. 저같은 경우 아래와 그림과 같은 방법을 이용하여 Gradient Color를 계산하고 활용했습니다. WPF에서는 이미 LinearGradient를 제공하기 때문에 Gradient Stop을 입력하면 자연스러운 Gradient 색상을 추출 할 수 있고, 회전 각에 따라 추출된 색상정보를 매핑하면 아래와 같은 Angle Gradient Image를 생성 할 수 있습니다.

아래 코드는 GradientStopCollection에 저장된 GradientStop정보를 가지고 Gradient Color Code를 추출 하는 내용과 ColorCode를 이용해 AngleGradient Image를 생성하는 코드입니다. 코드 자체는 특별하게 어려운 부분은 없으니 한줄한줄 천천히 살펴보시면 이해하시는데에는 무리가 없을것같습니다.

protected void UpdateGradient()
{
    
    // 생성할 Gradient Image의 Size
    int Size = GradientSize * 2;

// 상대좌표로 입력된 Gradient Center Point를 절대좌표로 변환
    Point RealCenterPoint = new Point(Size * CenterPoint.X, Size * CenterPoint.Y);

// Gradient Image가 저장될 공간
    int[,] PixelData = new int[Size, Size];

// Gradient Color 추출
    int[] GradationColorList = GetGradationColorInteger();

for (int X = 0; X < Size; X++)
    {
        for (int Y = 0; Y < Size; Y++)
        {
            // 해당 좌표의 원점으로부터의 각도
            double Angle = Math.Atan2(Y - RealCenterPoint.X, X - RealCenterPoint.Y) * 180 / Math.PI;
            int ColorIndex = (int)(Angle / GradientDetail);

if (ColorIndex < 0) ColorIndex = GradationColorList.Length + ColorIndex;
            int IntColor = GradationColorList[ColorIndex];
            PixelData[X, Y] = IntColor;
        }
    }

// WriteableBitmap를 사용해 PixelData를 Image로 변환
    WriteableBitmap WriteableBitmap = new WriteableBitmap(Size, Size, 96, 96, PixelFormats.Pbgra32, null);
    WriteableBitmap.WritePixels(new Int32Rect(0, 0, Size, Size), PixelData, (int)WriteableBitmap.Width * 4, 0);
    WriteableBitmap.Freeze();

BaseBrush.ImageSource = WriteableBitmap;

}

protected int[] GetGradationColorInteger()
{

int GradationCount = (int)(360 / GradientDetail);   // 추출할 Gradient Color의 갯수
    int[] ResultColorCode = new int[GradationCount];    // Gradient Color가 저장될 공간

////////////////////////////////////////////////////////////////////////////////////
    // DrawingVisual과 LinearGradientBrush를 이용하여 Gradient를 그립니다.
    ////////////////////////////////////////////////////////////////////////////////////
    DrawingVisual DrawingVisual = new DrawingVisual();
    DrawingContext DrawingContext = DrawingVisual.RenderOpen();

LinearGradientBrush LinearGradientBrush = new LinearGradientBrush(Gradients) 
    { StartPoint = new Point(0, 0), EndPoint = new Point(1, 0) };

DrawingContext.DrawRectangle(LinearGradientBrush, null, new Rect(0, 0, GradationCount, 1));
    DrawingContext.Close();
    ////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
    // RenderTargetBitmap을 이용해 위에서 그린 Gradient를 데이터를 추출합니다.
    ////////////////////////////////////////////////////////////////////////////////////
    RenderTargetBitmap GradientImage = new RenderTargetBitmap(GradationCount, 1, 96, 96, PixelFormats.Pbgra32);
    GradientImage.Render(DrawingVisual);           
    GradientImage.CopyPixels(new Int32Rect(0, 0, GradationCount, 1), ResultColorCode, GradationCount * 4, 0);
    ////////////////////////////////////////////////////////////////////////////////////

return ResultColorCode;

}

그리고 실제 사용할 때에는 아래와 같이 사용할 수 있습니다.

<Rectangle> <Rectangle.Fill> <m:AngleGradientBrush> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="Blue" Offset="1"/> </m:AngleGradientBrush> </Rectangle.Fill> </Rectangle>

이번시간에 중요한 내용은 MarkupExtension을 이용해 XAML을 확장하는 방법과 그리고 Gradient Image를 생성하는 부분이 되겠습니다. 그리고 아래는 이번시간에 사용한 전체 소스코드이며, 기타 질문이나 문의는 리플이나, 이메일로 주시면 되겠습니다!

AngleGradientBrushSample.zip