Introduction

이전 시간에서 이야기한 바와 같이 포토샵을 사용하는 디자이너와 협업하여 WPF프로젝트를 진행하다보면, 포토샵을 사용해 디자인을 하는 디자이너의 의도를 WPF의 기본 기능만을 활용해서 수용하기란 한계가 따릅니다. 이번시간에는 포토샵을 이용해 디자인을 한 디자이너가 Gradient을 편집할 때 사용하는 Angle속성을 WPF에서 사용하는 방법에 대해 소개합니다.

What is the Gradient Angle?

Linear Gradient에서의 Angle이란 Gradient의 방향을 의미 하며, Angle을 변경하게 되면, 원의 중심을 Gradient의 시작점으로 하고 원의 끝을 Gradient의 종료지점으로 하는 Gradation이 생성됩니다. 포토샵에서는 위 그림과 같이 간단하게 각도를 입력하거나, 마우스를 이용해 각도를 조절할 수 있지만, WPF에서는 아래와 같이 시작점과 끝점을 이용해서 Gradation의 방향을 지정하게 됩니다.

시작점과 끝점을 이용하는 방법은 상황에 따라 더 디테일한 Gradation을 표현할 수 있기 때문에 유용하지만, 단순 각도만으로 방향을 지정해 주고 싶거나, 포토샵을 이용하는 디자이너와의 협업과정에서는 수작업으로 각도에 해당하는 시작점과 끝점을 지정해주어야 한다는점에서 번거러울수 있습니다.

Calculate Gradient Direction Using Angle

각도를 이용해 Gradient의 시작점과 끝점을 계산하기 위해 수식을 이용해서 직접 계산해내는 방법이 있지만, 간단하게 WPF에서 제공하는 RotateTransfrom을 이용하면 쉽게 계산해낼 수 있습니다. 아래는 RotateTransfrom을 이용하여 Gradient의 시작점과 끝점을 계산하는 코드입니다.

public static class GradientHelper
{
    public static double GetAngle(LinearGradientBrush obj)
    {
        return (double)obj.GetValue(AngleProperty);
    }
    public static void SetAngle(LinearGradientBrush obj, double value)
    {
        obj.SetValue(AngleProperty, value);
    }
    public static readonly DependencyProperty AngleProperty = 
        DependencyProperty.RegisterAttached("Angle", typeof(double), typeof(GradientHelper), new UIPropertyMetadata(-45.0, OnAnglePropertyChanged));

public static void OnAnglePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        LinearGradientBrush Target = sender as LinearGradientBrush;

double Angle = (double)e.NewValue;

RotateTransform RotateTransform = new RotateTransform();
        RotateTransform.CenterX = 0.5;
        RotateTransform.CenterY = 0.5;
        RotateTransform.Angle = -Angle;

Target.StartPoint = RotateTransform.Transform(new Point(0, 0));
        Target.EndPoint = RotateTransform.Transform(new Point(1, 0));

}
}

WPF 에서는 Brush자체의 Transfrom에 대해 지원하기 때문에 직접 Transform을 적용 할 수 있지만, 위와 같은 방법을 이용해 직접 Start Point와 End Point를 지정해주면 Rendering Time에 매번 Transfrom을 위한 연산을 절약 할 수 있습니다. 실제로 XAML에서 사용할 때에는 아래와 같이 이용할 수 있습니다.

아래는 이번시간에 사용된 전체 소스코드입니다. 이 글을 읽으시고 궁금하신점이나 기타 문의 사항은 리플로 남겨주시면 답변드리도록 하겠습니다.

WIT.WPF.Sample.CreateGradientFromAngle.zip

wit studio

Set LinerGradient Direction using Angle

Introduction

What is the Gradient Angle?

Calculate Gradient Direction Using Angle

티스토리툴바

Set LinerGradient Direction using Angle

Introduction

What is the Gradient Angle?

Calculate Gradient Direction Using Angle

'Development/WPF' Related Articles

티스토리툴바