2010 프라이머 창업 엔턴쉽 데모데이에 여러분을 초대합니다.

Activity 2010/08/23 15:41 |

TAG : coordinator, Wit, 데모데이, 위트, 창업, 코디네이터, 프라이머

참관신청 접수 안내 :
http://onoffmix.com/event/1741

wit도 참가하였습니다. :D

Trackback 0 : Comment 0

Coming soon

Codinator® 2010/08/19 13:54 |

적은 시간/비용으로 효율적인 UI개발이 가능한 도구를 만들어 보자는 생각.

곧 공개하겠습니다.

Coordinator

Trackback 0 : Comment 4

WPF ReverseBinding(RadioButton DataBinding)

Tutorial/WPF 2010/08/15 17:52 |

TAG : binding, C#, RadioButton, RadioButton Binding, ReverseBinding, wpf, XAML

Introduction

WPF를 이용해 MVVM패턴으로 개발할때, ViewModel에서 View에 있는 객체에 Binding을 해야 할경우, ViewModel에서 View에 있는 객체를 직접 Access해야 하므로, View와 ViewModel의 독립성이 떨어지게 됩니다. 이번시간에는 이러한 상황에서 MarkupExtension을 이용해 View에서 ViewModel의 독립성을 유지한체 ViewModel에서 View를 Binding할 수 있도록 하는 ReverseBinding을 구현 하는 방법에 대해 소개합니다.

Create DemoView(Default Data Binding)

ReverseBinding를 구현하기에 앞서 ReverseBinding을 테스트 하기 위한 상황을 만들기 위해 위와 같이 두개의 RadioButton이 있는 간단한 DemoView를 구현했습니다. 그리고 RadioButton에 ViewModel에 정의된 IsMale속성을 Binding하고, 텍스트 박스에도 IsMale 속성을 Binding합니다. 아래는 DemoView에 해당하는 소스코드입니다.

대충 눈으로 살펴봤을때는 특별하게 문제가 없는 코드 같지만, 실제로 동작을 시켜보면 동영상과 같이 DataBinding이 정상적으로 동작하지 않는것을 확인 하실 수 있습니다.

이유는 RadioButton의 특성상 IsChecked 속성이 변경될때 같은 Group내에 포함된 다른 RadioButton들의 IsChecked속성이 영향을 받게되는데, 이 과정에서 Binding되어있던 IsChecked속성에 다른 값이 덮여 씌워지면서 Binding이 해제되어 버리기 때문입니다.

이를 해결하기 위한 RadioButton에 Binding을 하지 않고, 아래와 같이 IsMale속성에 RadioButton의 IsChecked속성을 Binding하는 방법을 사용 할 수 있습니다.
하지만 위에서 언급 했듯이 ViewModel에서 View 객체를 멤버를 직접 제어하는 방법은 독립성이 떨어지기 때문에 View와 ViewModel에 종속받지 않고 위와 같은 동작을 수행하는 ReverseBinding을 직접 구현해서 사용 할 수 있습니다.

Create ReverseBinding Extension

아래는 ReverseBinding을 구현한 소스코드의 일부분으로, 요약하면 Binding객체를 파라미터로 받는 MarkupExtension을 생성하고, ProvideValueTarget을 이용해 Source Object와 Source Property를 가져온 뒤, DataContext의 Target Property에 Binding을 수행하는 과정을 나타냅니다.public ReverseBindingExtension(Binding Binding) { this.Binding = Binding; } public override object ProvideValue(IServiceProvider serviceProvider) { IProvideValueTarget ProvideValueTarget = serviceProvider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget; SourceObject = ProvideValueTarget.TargetObject as FrameworkElement; SourceProperty = ProvideValueTarget.TargetProperty as DependencyProperty; OnSetReverseBinding(SourceObject.DataContext as DependencyObject); return SourceProperty.DefaultMetadata.DefaultValue; } protected void OnSetReverseBinding(DependencyObject Target) { if (Binding == null || SourceObject == null || SourceProperty == null || Target == null) return; Type TargetType = Target.GetType(); string TargetPath = Binding.Path.Path; DependencyPropertyDescriptor Descriptor = DependencyPropertyDescriptor.FromName(TargetPath, TargetType, TargetType); DependencyProperty TargetProperty = Descriptor.DependencyProperty; string Result = XamlWriter.Save(Binding); Binding CloneBinding = XamlReader.Parse(Result) as Binding; CloneBinding.Path = new PropertyPath(SourceProperty); CloneBinding.Source = SourceObject; SourceObject.SetValue(SourceProperty, Target.GetValue(TargetProperty)); BindingOperations.SetBinding(Target, TargetProperty, CloneBinding); }
위와 같이 구현된 ReverseBinding을 이용해 실제 XAML에서 사용할 때에는 아래와 같이 사용할 수 있습니다.

실행시켜보면 아래 동영상과 같이 Binding이 정상적으로 동작하는것을 확인 하실 수 있습니다.

아래는 이번시간에 사용된 전체소스코드입니다. 혹시 글을 읽으시고 이해가 안되시는 부분이나, 기타 문의사항은 댓글이나 이메일로 남겨주시면 답변드리도록 하겠습니다.

WIT.WPF.Sample.ReverseBindingExample.zip

Trackback 0 : Comment 4

Set LinerGradient Direction using Angle

Tutorial/WPF 2010/08/10 17:22 |

TAG : angle, Gradient Angle, Linear GradientBrush, wpf, XAML

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

Trackback 0 : Comment 0

MidPoint GradientStop For WPF

Tutorial/WPF 2010/08/09 19:30 |

TAG : Gradient, GradientStop, MidPoint, Photoshop, wpf, XAML

Introduction

포토샵을 사용하는 디자이너와 협업하여 WPF프로젝트를 진행하다보면, 디자이너가 작업한 결과물들을 사용가능한 형태(XAML)로 변환하는 과정이 필요한데, 전문 디자인 툴인 포토샵의 기능들을 기본적으로 제공되는 WPF의 기능만으로 표현해 내는것은 한계가 따릅니다. 대표적인 예로 GradientBrush, Effect, Blend Mode등이 대표적인 예입니다. 이번시간에는 포토샵에서 Gradient를 편집할때 사용 할 수 있는 MidPoint GradientStop을 WPF에서 적용 할 수 있는 방법에 대해 생각해보고 구현하는 방법에 대해 소개합니다.

What is the MidPoint GradientStop?

MidPoint Gradient란, 시작 GradientStop에서 종료 GradientStop까지 색이 변화 하는 과정에서 두 색이 절반씩 섞여 중간색으로 변환되는 시점을 말합니다. 실제 포토샵에서는 예를 이용해 조금더 설명을 하자면, 아래 그림의 경우 빨간색을 시작으로 파란색으로 끝나는 Gradation에서 MidPoint가 0.5 즉, 빨간색과 파란색의 중간색인 보라색이 0.5지점에 위치하는걸 확인 할 수 있습니다.

마찬가지로 MidPoint가 0.9에 위치하게 되면, 아래 그림과 같이 중간색인 보라색이 0.9지점에 위치하게 됩니다.

간단한 논리로 생각을 해보면, 두개의 GradientStop을 지정했지만, 실제로는 MidPoint가 변경되거나, Start 혹은 End의 색이 변경될때 중간 값을 띄는 GradientStop이 하나 더존재 한다고 생각할 수 있겠습니다.

Create MidPoint Attached Property

WPF에서는 기본적으로 위에서 설명한 MidPoint를 지원하지 않기 때문에 MidPoint를 지원하도록 하기 위해 가장먼저 GradientStop에 MidPoint를 지정 할 수 있도록 아래와 같이 Attached DependencyProperty를 정의합니다. GradientStop에만 사용되기 때문에 대상 타입을 Gradient Stop으로 지정했습니다.

이제 MidPoint Attached Property가 정의되었으면, 위에서 이야기 한바와 같이 MidPoint와 관련된 일을 수행하는 GradientStop을 생성해야 합니다. 그리고 기준 GradientStop과 이전 GradientStop의 색에 따라 중간 색이 변경될 수 있도록 Binding을 하고, Converter를 이용해 중간색을 계산합니다.

Calculate Mid Point Color & Offset

public class GradientStopMidPointConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (parameter.ToString() == "OFFSET")
        {
            double Start = (double)values[0];
            double End = (double)values[1];
            double MidPoint = (double)values[2];
            return Start + (End - Start) * MidPoint;
        }
        else if (parameter.ToString() == "COLOR")
        {
            Color Start = (Color)values[0];
            Color End = (Color)values[1];
            Color ResultColor = new Color();
            ResultColor.A = (Byte)((0.5 * Start.A) + (0.5 * End.A));
            ResultColor.R = (Byte)((0.5 * Start.R) + (0.5 * End.R));
            ResultColor.G = (Byte)((0.5 * Start.G) + (0.5 * End.G));
            ResultColor.B = (Byte)((0.5 * Start.B) + (0.5 * End.B));

return ResultColor;
        }
        return null;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

위 코드는 두 GradientStop의 Offset을 입력받아 상대 값으로 입력된 MidPoint를 절대값 Offset으로 변환 하는 부분과 두 색을 입력받아 중간 색을 계산하는 코드입니다. 그리고 다음과 같이 XAML 에서 MidPoint를 적용하실 수 있습니다.

이번시간에 사용된 소스코드는 아래에서 다운로드 받으실수 있으며, 기타 궁금하신 점이나 문의 사항은 댓글달아주시면 답변 드리도록 하겠습니다. 감사합니다.

WIT.WPF.Sample.MidPointGradientSample.zip

Trackback 0 : Comment 0

Category

Tags

Recent Comments

'2010/08'에 해당되는 글 6건

2010 프라이머 창업 엔턴쉽 데모데이에 여러분을 초대합니다.

Trackback Address :: http://blog.witstudio.net/trackback/79

Coming soon

Trackback Address :: http://blog.witstudio.net/trackback/78

WPF ReverseBinding(RadioButton DataBinding)

Introduction

Create DemoView(Default Data Binding)

Create ReverseBinding Extension

Trackback Address :: http://blog.witstudio.net/trackback/77

Set LinerGradient Direction using Angle

Introduction

What is the Gradient Angle?

Calculate Gradient Direction Using Angle

Trackback Address :: http://blog.witstudio.net/trackback/76

MidPoint GradientStop For WPF

Introduction

What is the MidPoint GradientStop?

Create MidPoint Attached Property

Calculate Mid Point Color & Offset

Trackback Address :: http://blog.witstudio.net/trackback/75