Silverlight3 – Binding Error 디자인하기

Silverlight 3에서는 <화면 1>에서 보는 것처럼 TextBox에 BindingError가 발생하면 빨간 화면과 함께 에러 메시지가 출력됩니다.

 

< 화면 1 >

 

이 글에서는 위와 같은 바인딩 에러 메시지 창을 어떻게 재 디자인할 수 있는지 살펴보겠습니다.

 

 

들어가기에 앞서..

이번 글을 읽기 위해서는 VisualState에 대한 개념과 Silverlight의 기본 컨트롤(Button, ListBox 등등)을 재 디자인 경험이 있으셔야 쉽게 이해가 가능합니다 ^_^

 

VisualStateGroup
Silverlight 3의 TextBox에는 바인딩 에러를 처리하기 위해서 <그림 1>와 같이 새로운 VisualStateGroup이 추가되었습니다.

 

< 그림 1 >

 

새로운 VisualStateGroup으로 "ValidationStates"가 추가되었으며, VisualStateGroup은 바인딩과 관련된 3개의 VisualState를 가지고 있습니다.

첫 번째로 Valid VisualState는 바인딩에 에러가 없을 경우 발생합니다. 뒤에 이어서 알아보겠지만 TextBox는 Valid VisualState에서 아무런 작업도 하지 않습니다.

두 번째로 InvalidUnfocused VisualState는 바인딩에 에러가 발생했지만 사용자의 커서가 TextBox에 위치하지 않은 경우에 발생하는 VisualState 입니다.

세 번째로 InvalidFocused VisualState는 바인딩에 에러가 발생했고, 사용자의 커서 또한 TextBox에 위치하는 경우 발생하는 VisualState 입니다.

 

이상으로 새롭게 추가된 VisualStateGroup과 VisualState에 대해서 알아봤으므로, TextBox에 기본적으로 적용되는 Template을 살펴보고 어떻게 이를 수정할 수 있는지 알아보겠습니다.

 

먼저 TextBox에 기본적으로 적용되는 Template를 <화면 2>을 통해 기본적인 디자인 골격을 살펴보겠습니다.

 

 

< 화면 2 > (  여기서 구한 TextBox 기본 디자인은 Blend를 통해서 구했습니다. )

 

먼저 VisualStateManager를 제외하고 총 4개의 Border로 구성되어 있는 것을 알 수 있습니다. 이 중에서 우리가 구체적으로 살펴볼 부분은 빨간 색으로 강조한 x:Name이 ValidationErrorElement인 Border 입니다. 일반적인 상황에서는 <화면 2>에서 보는 것처럼 Visibility가 Collapsed로 화면에서 보이지 않고 감추어진 상태로 존재합니다.

 

그리고 ValidationErrorElement Border에는 ToolTip이 설정되어 있는 것을 확인할 수 있습니다. 이 부분의 이해를 돕기 위해 <화면 3>를 보겠습니다.

 

< 화면 3 >

 

< 화면 3 >에서 1번으로 표시한 부분 중 얇게 빨간 테두리를 가진 부분이 ValidationErrorElement Border 입니다. 그리고 2번으로 표시한  부분 중 경고 메시지가 나오는 부분이 위에서 언급한 ToolTip 부분입니다.

앞에서는 ValidationErrorElement의 Visibility 프로퍼티가 Collapsed로 설정되어 ValidationErrorElement가 화면에 보이지 않는다고 했습니다. 하지만 위 화면처럼 바인딩 에러가 발생하면 Visibility 프로퍼티가 Visible로 변경되면서 화면에 보이게 됩니다. 이 부분은 다음에 설명할 VisualState에서 알아보겠습니다.

 

앞서 TextBox의 기본 Template를 살펴봤으니 다음으로는 새롭게 추가된 VisualStateGroup에 대해서 알아보겠습니다.

 

< 화면 4 >

 

앞에서 말했듯이 VisualStateGroup에 ValidationStates가 추가되고, 그 안에 Valid, InvalidUnFocused, InvalidFocused VisualState가 추가된 것을 확인할 수 있습니다.

 

먼저 Valid VisualState는 <화면 4>에 보이는 것처럼 아무런 작업도 수행하지 않습니다.

 

다음으로 InvalidUnfocused VisualState는 <화면 5>과 같이 Storyboard를 수행합니다.

 

< 화면 5 >

 

< 화면 5 >에서 보는 것처럼 InvalidUnfocused VisualState가 발생하면 Storyboard를 수행합니다. Storyboard의 타깃은 앞서 살펴봤던 ValidationErrorElement이며 타깃 프로퍼티는 Visibility 입니다. 그리고 이 값을 Visible로 변경합니다. 즉, 바인딩 에러가 발생하면 InvalidUnfocused VisualState의 Storyboard가 수행되어 ValidationErrorElement의 Visibility 속성을 Visible로 변경함으로써 바인딩 에러를 알리는 빨간 테두리를 볼 수 있는 것입니다.
( ObjectAnimationUsingKeyFrames는 Silverlight 3에 새롭게 추가된 Animation으로 Object의 값을 변경할 때 사용합니다. )

 

마지막으로 InvalidFocused VisualState를 살펴보겠습니다.

 

< 화면 6 >

 

< 화면 6 >는 InvalidFocused VisualState를 나타낸 것입니다.

InvalidFocused 역시 InvalidUnfocused처럼 Storyboard를 가지고 있습니다. 하지만 InvalidUnfocused와는 달리 2개의 ObjectAnimationUsingKeyFrames를 사용합니다.

첫 번째 AnimationUsingKeyFrames는 앞서 살펴봤던 InvalidUnfocused의 그것과 동일합니다. 즉, 화면에 빨간 경고 테두리를 보여주는 역할을 합니다.

두 번째 AnimationUsingKeyFrames는 ValidationErrorElement의 ToolTip(< 화면 2 >에서 확인할 수 있습니다.)인 validationTooltip을 Open하고 있습니다. 즉, 사용자에게 빨간 테두리를 보여주고 오른쪽에 경고 ToolTip을 출력해주는 것입니다.
 

이상으로 TextBox가 바인딩 에러를 출력하는 방법을 알아봤습니다. 하지만 앞서 알아본 것은 단순히 바인딩 에러의 빨간 테두리와 ToolTip을 Open하는 과정만 가지고 있습니다. 실제 에러메시지는 ToolTip 안에서 출력되게 되며 이 부분은 ToolTip의 Template를 확인함으로써 에러메시지를 출력하는 방법을 알 수 있습니다.

 

< 화면 7 >

 

<화면 7>에서 ToolTip을 살펴보면 Template가 {StaticResource ValidationToolTipTemplate}로 설정되어 있습니다. 그럼 이어서 ValidationToolTipTemplate를 살펴보면..

 

< 화면 8 >

 

<화면 8>은 VlidationToolTipTemplate의 기본 XAML 코드입니다. 여기서 가장 중요한 부분은 위에서 강조해놓은 Text를 바인딩 하는 부분입니다.여기서 Path를 보면 (Validation.Errors)[0].Exception.Message라는 문장을 확인할 수 있습니다.

바로 이 문장이 현재 TextBox에서 발생한 Validation Error를 가져와 그 Exception을 출력하는 역할을 합니다.

 

 

마치며..

이상으로 TextBox의 Validation과 관련된 부분을 살펴봤습니다. 프로그래머나 디자이너가 이를 재 디자인한다면 앞서 살펴봤던 3개의 VisualState에 자기가 디자인한 부분을 Visible하거나 Collapsed 함으로써 완성할 수 있습니다. 그리고 기본적으로 적용된 TextBox의 디자인처럼 꼭 ToolTip을 사용해야 하는 것은 아닙니다.

 

< 화면 9 >

 

TextBox가 바인딩 에러를 처리해서 디자인을 보여주는 이론적인(?) 이야기를 많이 해서 실제 예제를 못 보여 드렸네요. 예제는 따로 첨부파일에 프로젝트로 넣어놨습니다. 실행시켜 보시면 < 화면 9 >처럼 단순히 바인딩 에러 ToolTip과 Border의 색을 빨간색에서 핑크색으로 변경하는 간단한 예제가 들어있습니다. 참고하시고 더 궁금한 부분 있으시면 리플 부탁 드리겠습니다.

 

첨부 파일 다운로드