WPF Korea +

Visual Stduio 2010 Webcast - WPF 4.0

안녕하세요. 김대욱입니다. 새롭게 선보인 VisualStudio 2010과 WPF 4.0에 대한 내용을 다룬 WebCast가 새로 등록되었습니다 ^^
위 그림을 클릭하시거나, 아래 주소를 통해 확인하실 수 있습니다.
세션보러가기

: http://www.techdays.co.kr/visualstudio2010/

WPF 4.0에서 새로 추가된 기능들에 대해 소개하고, WPF4.0을 이용한 Windows7용 Application개발과 관련된 데모가 포함되어있습니다 ^^ 많은관심 부탁드려요!

이올린에 북마크하기(0)

이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG visualstudio2010, WPF, WPF4, WPF4.0, 김대욱, 김대욱 MVP

Trackback 0 Comment 1

witstudio open!!

안녕하세요. 김대욱입니다. 예전부터 준비해오던 디자이너와 개발자를 위한 커뮤니티 witstudio가 드디어 오픈되었습니다 ^^
임시오픈이라 몇가지 제약사항이 존재하긴 하지만, 차츰 개선해나아갈 계획이구요. 앞으로 개발과 관련된 내용은 witstudio에서 확인하실 수 있습니다.

witstudio에서는 디자이너와 개발자간의 협업을 통해 크레이티브한 컨텐츠를 제작할 수 있는 공간으로 활용될 수 있을것이며,
개발과 디자인에 관련된 튜토리얼, 샘플, 아티클들의 정보를 제공합니다. 많은 관심 부탁드리겠습니다. 감사합니다.

위트스튜디오 : http://witstudio.net

김대욱.

이올린에 북마크하기

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG Wit, 위트스튜디오

Trackback 0 Comment 4

IP Address To Location Info(Latitude, Longitude...)

안녕하세요 김대욱입니다. 오늘 웹서핑을 하다가 우연히 알아두면 유용할것 같은 서비스 사이트를 찾아 여러분들과 공유하려 포스팅을 합니다!! 위 제목에 나와있는데로, IP주소를 입력하면 해당 IP주소의 위도 경도를 출력해주는 서비스인데요, 사용방법이 매우 간단할 뿐더러 다양한 포맷(php,xml,json 등)을 지원하기 때문에 LBS를 구축하고 계신분들이라면 매우 유용한 팁이 되지 않을가 생각합니다. 아래는 해당 업체의 사이트구요 주소는 http://geobytes.com 입니다.

일단 사이트에 접속하시면 왼쪽 중간 또는 오른쪽 상단에 IP Address Locator라는 메뉴를 찾을 수 있습니다. 해당 메뉴에 접속하시면(http://www.geobytes.com/IpLocator.htm) 아래와 같은 그림의 페이지를 접하실 수 있는데요, PHP에서 사용할 수 있는 간단한 소스코드와 현재 접속중인 IPAddress의 지역정보를 출력해줍니다.

간단하게 테스트를 해보시려면 아래 URL에 접속 하시면 되겠습니다.
http://www.geobytes.com/IpLocator.htm?GetLocation&template=xml.txt
위 URL에 접속하시면 본인 IP Address에 해당하는 지역정보를 확인하실 수 있으며, 다른 IP주소의 정보를 확인하고자 하실때는
다음과 같이 URL을 수정하시면되겠습니다.
http://www.geobytes.com/IpLocator.htm?GetLocation&template=xml.txt&IpAddress=68.3.196.148
출력형식을 변경하시고 싶으시면 template부분을 변경해주시면 되는데, 아래 URL에서 template에 대한 내용을 참고하세요.
http://forums.geobytes.com/viewtopic.php?t=593

PS. 기본적으로 위 서비스는 무료로 제공되는 서비스 이지만, 무료이용에는 횟수가 제한되어있기때문에, 상업용등으로 사용하시기 위해서는 라이센스를 구입하셔야 할것 같습니다.

이올린에 북마크하기(0)

이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG IP To Location, IPAddress, IPAddress To Location

Trackback 0 Comment 3

Custom Attribute MarkupExtenstion

안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴 내용은 임의로 제작한 Attribute를 UI에 Binding 하기 위한 MarkupExtension에 대해 소개해 드리겠습니다. 이 내용은 데브피아 WPF&Silverlight마을에서 이광현 (dololas)님께서 질문해주신 내용입니다. 간단하게 이번시간에 하고자 하는 내용을 그림으로 표현 하면 아래와 같습니다.

먼저 위 그림과 같이 Header부분에 제목, 감독, 출연배우라고 출력만 하면 되는 상황이라면 아래와 같이 직접 명시해줄 수 있을텐데요, 질문자 님께서 말씀 하신 내용은 명시적으로 Header값을 입력하지 않고, 지정한 Attribute에 따라 Header의 출력 내용을 결정 하고자 하셨으므로 이에 따른 해결 방법에 대해 알아보도록 하겠습니다.

이번 예제에 사용되는 Class와 Attribute의 구조는 다음과 같습니다.

일단 위와 같은 상황에서 가장먼저 떠오르는게 DataBinding이 지만, DataBinding은 Property와 Property간의 연결을 제공하기 때문에 Attribute와는 함께 사용하실 수 없습니다. 따라서 Attribute 값을 반환 하는 MarkupExtension을 구현하여 해결해야 합니다. 아래는 MarkupExtension 구현 부분 소스코드입니다.

MarkupExtension 파라미터로 입력받은 Type과 MemberPath정보를 기반으로, CustomAttribute의 값을 가져옵니다. 간단하죠? 실제 사용할때에는 아래와 같이 사용하시면 되겠습니다.

이상으로 이번시간 내용을 마치며, 기타 질문은 리플이나 이메일로 해주시면 답변 드리도록 하겠습니다. 아래는 이번시간에 사용된 전체소스코드입니다.

CustomAttributeExtension.zip

이올린에 북마크하기(0)

이올린에 추천하기(0)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG Attribute, MarkupExtension, WPF

Trackback 0 Comment 0

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