모아온 글(영어)2012.08.14 11:07

The WPF and Silverlight platforms use late bound data binding resolution for bindings in XAML files. This feature allows a DataContext to be set at run-time and the objects within that DataContext to resolve their property bindings then. This late binding enables cool features like DataTemplates, composable applications and run-time loading of loose XAML.

A side effect of late bound binding resolution that can cause developers some minor frustration is that their controls do not display the expected data at run-time.

This article will explain troubleshooting techniques that can help you locate and correct the problem.

Data Binding Overview

Data binding is fundamental to WPF and Silverlight. You will struggle with your application designs, coding and troubleshooting until you understand data binding in these platforms.

The best data binding resource available is the MSDN Data Binding Overview topic. If you have not read or don't fully understand the material in this topic, please take the required amount of time to learn this material.

Ounce of Prevention is Worth a Pound of Cure

Visual Studio 2010 has great tooling to wire up data bindings and checked them at design-time. Please read this article: How to Enable Using the Binding Builder in WPF and Silverlight Applications.

Visual Studio 2010 has excellent design-time sample data support. If you use design-time sample data, you'll immediately see controls that don't have expected data values at design-time.

For a detailed examination of sample data in the WPF and Silverlight Designer for Visual Studio 2010, please read this article: Sample Data in the WPF and Silverlight Designer.

Troubleshooting List

  • Verify that DataContext is set in either XAML or code
  • Run the application and view the output in the Debug Output Window
    • For WPF applications you can increase or decrease the amount of information displayed in the Debug Output Window by changing the WPF Trace Settings, Data Binding value
  • Name the control that has DataContext assigned, set a break point in the code, and view the named control's DataContext property in the debugger
  • If binding to a CLR object, put a breakpoint in the source property getter to see that its actually being queried
  • Add a converter to a binding, then put a breakpoint in the converter


 

Verify that DataContext is set in either XAML or Code

This tip is along the lines of, "if the TV won't turn on, check that it's plugged in."

This is important for many reasons, but one is easily overlooked; if a DataContext is null, the Debug Output Window will not display any error messages in Silverlight or in WPF.

In WPF you can use the below PresentationTraceSources on a binding and set the TraceLevel to High to view errors related to a null DataContext.

View the Debug Output Window

If you have the DataContext set, any data bindings within that DataContext that can't be resolved will be listed in the Debug Output Window at run-time.

Sample Debug Output Window Data Binding Error

Sample One

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName' property not found on 'object' ''Object' (HashCode=62178992)'. BindingExpression:Path=FirstName; DataItem='Object' (HashCode=62178992); target element is 'TextBox' (Name=''); target property is 'Text' (type 'String')

Sample Two

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName' property not found on 'object' ''Customer' (HashCode=13640894)'. BindingExpression:Path=FirstName; DataItem='Customer' (HashCode=13640894); target element is 'TextBox' (Name=''); target property is 'Tag' (type 'Object')

While the above messages look verbose and complex, you can glean several interesting points of information that will help you correct this data binding:

  • The Binding Path is FirstName. Search your XAML file for FirstName and see if you expect the DataContext to expose a FirstName property whose scope will allow this binding to resolve this property.
  • The Source object in Sample One is of Type Object. There is a good chance the Type Object does not have a FirstName property.
  • The Source object in Sample Two is of Type Customer. Check your Customer Type; does it have a FirstName property?
  • Notice in Sample Two, the target property is Tag. In all likelihood, the Text property was the desired target property and not Tag. Also the Type of Tag is Object; you would probably be expecting String when binding to the FirstName property.

Review

  • Verify the property name is spelled correctly
  • Verify the property name has the correct character casing. FirstName is not the same as firstName.
  • Verify the property is a member of the DataContext Type
  • Verify the target element is the correct Type
  • Verify the target property name and Type are correct



 

Important

Data binding property path names are Case Sensitive.



 

WPF Trace Settings, Data Binding


 

Important

The default value of the WPF Trace Settings, Data Binding is "Error." It is recommended that you change this setting to "Warning." Please read this short blog postfor more information.

This is required if you use the attached property PresentationTraceSources.TraceLevel. If the value is set to "Error" you won't see any of the PresentationTraceSources.TraceLevel warning messages.

To change the WPF Trace Settings, Data Binding value to "Warning," navigate to Tools, Options, Debugging, Output Window, WPF Trace Settings, Data Binding and set the value to Warning as I've done in the below image.

Note

This setting affects all bindings in WPF the application. For a more targeting approach, see the PresentationTraceSources.TraceLevel section below.



 

Important

If this setting is set to, "Off" you will not see any WPF Data Binding Errors in the Debug Output Window.


 

PresentationTraceSources.TraceLevel

Introduced to WPF in .NET 3.5 SP1, the PresentationTraceSources.TraceLevel attached property allows developers to dial up the amount of information outputted in the Debugger Output Window for a binding.

The below XAML snippet shows how to apply the PresentationTraceSources.TraceLevel attached property to a binding. 

<Window 
    xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
    xmlns:local="clr-namespace:DebugDataBindings"
    x:Class="DebugDataBindings.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="layoutRoot">
        <Grid.Resources>
            <local:DebugConverter x:Key="debugConverter" /> 
        </Grid.Resources>
        <TextBox 
            Text="{Binding Path=Customer.FirstName, diag:PresentationTraceSources.TraceLevel=High}"   
            Height="23" HorizontalAlignment="Left" Margin="90,18,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>
</Window>

Use the Debugger Quick Watch to View the DataContext

If the above suggestions to do not solve your problem:

  • Locate the control's parent panel like a Grid in your XAML
  • Apply a x:Name to the control
  • Set a break point in your code, and view the named panel control's DataContext property in the debugger

Open the QuickWatch dialog, change the Expression to the named control in the XAML and look at the control's DataContext property.

  • In the below image, I have changed the Expression to, "this.layoutRoot.DataContext" in VB.NET you would change it to, , "Me.layoutRoot.DataContext"

This information will at least confirm the shape (Type) of the DataContext and the values inside the DataContext.

This tip provides value in two ways:

  • If the DataContext had been set then subsequently changed by some other code, you'll be expecting the initial value but will see another value
  • If the property was nested within another class, you can easily see the shape of your DataContext and then ensure that your bindings are properly dotted in.
    • Notice the path to the FirstName property is DataContext.Customer.FirstName.
    • This means that if you wanted to data bind to the Text property on a TextBox that was a child of the Grid named layoutRoot, the binding expression must read:

      <TextBox Text="{Binding Path=Customer.FirstName}" ... />

Place a Breakpoint inside the Source Property Getter

If you are binding to a CLR object, put a breakpoint in the source property getter to see that it's actually being queried.

If it's not be queried, you have a mismatch in the property name, property is not properly dotted in, DataContext is null or does not contain this property.

Add a Converter to a binding, then put a Breakpoint in the Converter

Important

The use of a converter to troubleshoot a data binding only works if the DataContext is not null, and the DataContext Type exposes a property with the same name in the binding expression.

A ValueConverter allows you to view the data as its being moved between the target and source. In the below image the converter in the middle is named "ColorBrushConverter."

The below converter is a no-op converter named, "DebugConverter." This reusable converter will allow you to place a breakpoint in the Convert and ConvertBack methods and then view the value of the "value" parameter at debug time. 

using System;
using System.Windows.Data;

namespace DebugDataBindings {
    public class DebugConverter : IValueConverter {

        public Object Convert(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) {

            //set a breakpoint here
            return value;
        }

        public Object ConvertBack(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) {

            //set a breakpoint here
            return value;
        }
    }
}

The below XAML show the above converter being applied to the TextBox.Text property binding.

<Grid x:Name="layoutRoot">
        <Grid.Resources>
            <local:DebugConverter x:Key="debugConverter" /> 
        </Grid.Resources>
        <TextBox Text="{Binding Path=Customer.FirstName, Converter={StaticResource debugConverter}}"   
            Height="23" HorizontalAlignment="Left" Margin="90,18,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

  • How the above features enable your workflow
  • What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett 
Expression Team

Posted by UXPRO
WPF/WPF 기초 다지기2008.12.21 08:12
◎ 스택패널과 기본적으로 유사
◎ 자동정렬 기능 (윈도우 탐색기와 유사)
◎ 프로퍼티 (Orientation, ItemHeight, ItemWidth)
Posted by UXPRO
WPF/WPF 기초 다지기2008.12.18 07:04
◎ 가장 기본적인 패널
◎ 명시적인 좌표값을 이용해서 엘리먼트의 위치를 결정
◎ Left/Top/Right/Bottom 첨부 프로퍼티, 이를 통해서 엘리먼트의 위치를 결정


Posted by UXPRO
WPF/WPF 기초 다지기2008.12.15 03:41
◎ 여러 가지 기능을 복합적으로 가진 패널이며, 아마도 가장 자주 사용되는 패널
◎ VS나 Blend 같은 프로그램에서는 기본적으로 그리드 패널을 사용한다.
Posted by UXPRO
WPF/WPF 기초 다지기2008.12.11 02:17
◎ 자식 엘리먼트들이 추가되는 순서대로 누적된다.
◎ 오리엔테이션 프로퍼티를 사용하여 조정
Posted by UXPRO
WPF/WPF 스터디2008.11.11 01:57

WPF 스터디 1장
왜 WPF를 사용해야 하는가?

발표자 : 최우진
uxpro@live.com
step79@hotmail.com

목차
▶ WPF란?
▶ 왜 WPF가 필요할까?
▶ 기본지식
▶ 그래픽 표현 기술의 발전
▶ WPF 시작하기
▶ WPF 알아보기
▶ 정리
▶ Q & A

WPF란?
WPF(Windows Presentation Foundation)
.Net Framework 3.0이상의 환경에서 동작하는 MS의 차세대 그래픽 표현 기술

사용자 삽입 이미지

왜 WPF가 필요할까?
 UI에 대한 사용자들의 요구 사항이 점점 화려하고 까다로워짐에 따라 사용자의 만족도를 충족시켜줄만큼 뛰어난 그래픽 기술이 필요하게 되었다.

기본지식(DirectX)
다이렉트X는 마이크로소프트가 윈도우상에서 멀티미디어 환경을 구현하기 위해서 제안한 소프트웨어 처리 규격이며, 프로그래머와 사용자가 응용 프로그램을 작동시키기 위한 API(Application Programmer Interface)규격
하드웨어적인 처리 규정은 주변장치 제조업체에서 관리

 1) DirectDraw
 2) Direct3D
 3) DirectSound
 4) DirectInput
 5) DirectPlay
 DirectVideo, DirectMusic

기본지식(OpenGL)
① Open Inventor:
3D 그래픽 어플리케이션을 위한 객체 지향형 도구로서, 3D 데이터 교환을 위한 형식을 지원한다.
② IRIS Performer:
실시간 비주얼 시뮬레이션을 위한 그래픽 라이브러리로서 SGI 시스템에서 React와 함께 사용된다.
③ OpenGL Optimizer:
CAD처럼 대규모의 데이터를 처리하여 영상으로 보여줄 때 사용되는 도구와 기능을 제공한다.
④ OpenGL Volumizer:
병원의 MRI 및 CT 영상과 같이 체적에 대한 큰 영상을 처리할 때 사용되는 기능과 도구들의 집합이다.

그래픽 표현 기술의 발전
1985년 GDI/USER 시스템 기반의 Windows 1.0
1990년대 초반 OpenGL 라이브러리 대박(2D/3D, CAD)
1995년 MS DirectX 1.0 (2D, Input, Sound 등)
1996년 MS DirectX 2.0 (3D)
WindowsXP GDI+로 발전
    (알파블렌딩, 그레디언트 브러시)
2002년 매니지드 코드와 닷넷의 발표

현재 DirectX 10까지 발표

WPF 시작하기
GDI+와 USER 시스템의 한계를 탈피한 새로운 기술
어렵지 않게 UX를 고려한 개발을 도울 수 있는 기술
WPF의 특징
  ▶ 광범위한 통합성
  ▶ 해상도 독립성
  ▶ 하드웨어 가속 기능
  ▶ 선언형 프로그래밍
  ▶ 다양한 제작방식과 커스터마이징
  ▶ 쉬운 배포

WPF 알아보기
닷넷 프레임워크 3.0의 중요한 한 축
특징 : 처음부터 매니지드 코드로 디자인되었다는 점과 프로그래밍 코드와 선언형 프로그래밍 방식을 혼합 사용

매니지드 코드로 설계되다
선언형 프로그래밍을 사용하다


정리
시간이 지나고 개발 경험이 축적되면서, 뛰어난 성능과 기능을 보여주게 되었다.
하지만 과거에는 윈도우 기반의 사용자 인터페이스
    개발이 너무 어려웠다.
WPF를 이용함으로써 간단한 윈폼에서 부터 3D 영화에 이르기까지 이전보다 사용자 인터페이스 개발이 쉬워졌다.

Posted by UXPRO
WPF/WPF 기초 다지기2008.05.02 20:25

엘리먼트(element)와 어트리뷰트(attribute)

XAML은 XML 기반의 언어입니다.
따라서 XAML도 XML의 엘리먼트와 어트리뷰트라는 개념을 고스란히 가지고 있는데요.

우선 XML에서의 엘리먼트와 어트리뷰트의 정의를 보면

엘리먼트(Element)
- XML 문서를 구성하는 기본이 되는 단위

- 작성 규칙
   * 시작 태그와 종료 태그가 쌍으로 존재해야 하고, 시작 태그와 종료 태그 사이에 엘리먼트의 내용으로 구성된다.
   * 태그명은 대소문자를 구분한다.
   * 종료 태그가 없는 빈 태그(Empty Tag)는 시작 태그 뒤에 "/"를 붙인다.
   * 올바른 중첩 구조를 가져야 한다.

어트리뷰트(Attribute)
- 엘리먼트를 꾸며주는 형용사 같은 역할을 한다.

- 작성규칙
    * 어트리뷰트는 이름과 값의 쌍으로 이루어진다.
    * 어트리뷰트의 값은 큰 따옴표("")나 작은 따옴표('')로 둘러 싸여져 있어야 한다.

정도로 요약할 수 있겠습니다.

XAML에서는 XML의 기본 개념에서 조금 더 나아가

엘리먼트를 닷넷 객체 혹은 구조체와 상응한다는 의미로 오브젝트 엘리먼트(object element)라고 부르고, 어트리뷰트는 속성을 정의하는 프로퍼티 어트리뷰트(property attribute)와 이벤트에 대한 정의를 지정하는 이벤트 어트리뷰트(event attribute)로 구분하며, 프로퍼티 어트리뷰트는 프로퍼티로, 이벤트 어트리뷰트는 이벤트로 각각 매핑이 됩니다.

Posted by UXPRO

RIA, UX, WPF, Silverlight ...

IT 분야는 지치지도 않고 새로운 정보들을 쏟아 내고 있습니다.

그 중에서 제가 관심이 가는 제품은 Microsoft에서 작년 이맘때쯤 출시한 Expresion Blend입니다.

옛말에 "사공이 많으면 배가 산으로 간다"는데 Expresion Blend는  그 사공들이 형제들이라 더 혼란스럽습니다. ^^

그러나 모두가 '엄친아, 엄친딸'처럼 완벽할 수는 없기에 Expresion Blend도 그 개개인에 따라 특징이 있습니다.

지금 공개되어 있는 Expresion Blend는 크게 Expression Blend, Expresion Blend 2, Expresion Blend 2.5 이렇게 3가지가 있는데 우선 그 형제들에 대한 전반적인 내용을 이 글에서 소개하고 각각에 대한 조금 더 자세한 내용은 다음에 다시 준비하겠습니다.

그럼, 제일 맏형 부터 소개해 드리겠습니다.

Expression Blend

Expression Blend는 닷넷 프레임워크 3.0 기반의 작업을 하기 위해 2007년 4월에 처음으로 소개되었으며, Expression Studio의 구성 제품중 하나입니다. 현재 정식버전으로 아래 요약된 모든 기술을 지원합니다.(지금 현재 2007년 5월 3일 버전이 최신이며, SP1이 2008년 3월 6일날 소개되었습니다.)

Expression Blend

Expression Blend 다운 받기

요약
배포상태 정식 버전
지원기술 WPF (3.0)
지원상태 정식 배포


Expression Blend 2 Beta

Expression Blend의 다음 버전으로 WPF만 특화되어 있던 Expression Blend에 실버라이트(1.0, 1.1)를 개발할 수 있게 발전한 제품입니다. 지속적인 버전업에 이어 강력한 새로운 기능들이 추가되어 2008년 2월에 베타 버전(Expression Studio 2)으로 발표되었습니다. 2008년 7월 1일전까지 무제한으로 사용하실 수 있습니다.

Expression Blend 2

Expression Blend 2 다운 받기

요약
배포상태 베타 버전
지원기술 WPF (3.0, 3.5), Silverlight 1.0
지원상태 테스트용


Expression Blend 2.5 March 2008 Preview

MIX08 행사에서 소개된 실버라이트 2 베타 1 기반이나 그 이후의 실버라이트 버전에 대한 작업을 지원하는 제품입니다. Expression Blend 2가 Expression Blend의 미래 버전이라면 Expression Blend 2.5는 Expression Blend 2의 차기 버전으로 생각하시면 더 이해가 빠르실 것 같습니다.

Expression Blend 2.5

Expression Blend 2.5 다운 받기

요약
배포상태 프리뷰 버전
지원기술 Silverlight 2 Beta 1
지원상태 테스트용


뭐 별 내용도 없지만 우선은 한번쯤 블랜드의 가계도를 조사해 볼 필요가 있는듯해서 정리해 보았습니다.
각각에 대한 조금 더 자세한 내용은 빠른 시간안에 정리해서 올리겠습니다.
(댓글은 필수, 짱돌은 사절)


====================================================================================================

※ 엄친아, 엄친딸
 - "엄마 친구 아들, 엄마 친구 딸"이라는 말의 약자로 어머니들이 가끔씩 여러분들과 비교 대상으로 삼는 존재.
ex) "엄마 친구 아들은 맨날 전교 1등인데도 하루 4시간만 자고 공부를 하는데 너는 이게 뭐니"

※ 사족 : Expression Blend가 왜 '그(He)'인가??
  - 우리 죄민수 행님의 대사가 생각납니다.
    "아무 이유없어"
 그냥 제 개인적인 생각으로 Expression Design과 Expression Blend는 둘이 서로 호흡을 같이하며 알콩달콩 사랑을 므흣해야 Xaml이라는 태명의 결과물이 예쁘게 나올것 같은데 Expression Design는 꽃단장이라는 단어가 어울리는 새색시 같은 느낌이고, Expression Blend는 이것저것 닥치는 대로 그것도 성격이 있어서 자기가 할 줄 아는것만 하는 고집불통 머슴아 같은 느낌이라 이렇게 정했습니다.
개인적인 느낌에 태클을 거시는 당신은 박명수~

Posted by UXPRO
WPF/WPF 기초 다지기2007.08.07 10:56
XAML이란?
Extensible Application Markup Language 또는 XAML("자멜","자물"로 읽음)은 Microsoft에서 개발한 XML 기반 태그 언어입니다. HTML이 웹 페이지를 시각적으로 표시하기 위해 내부적으로 사용되는 언어인 것처럼, XAML은 Microsoft® Expression Blend™에서 개발한 응용 프로그램을 시각적으로
표시하기 위해 내부적으로 사용되는 언어입니다.

XAML, Windows Presentation Foundation 및 Microsoft .NET Framework 3.0
XAML은 Microsoft® WPF(Windows Presentation Foundation)의 일부입니다.
WPF는 Windows 기반 응용 프로그램 및 웹 브라우저 기반 클라이언트 응용 프로그램의
비주얼 프레젠테이션을 처리하는 Microsoft® .NET Framework 3.0의 기능 범주입니다.
WPF 기반 응용 프로그램은 Windows Vista™ 또는 Microsoft .NET Framework 3.0 및
Internet Explorer 7.0(웹 브라우저 기반 클라이언트 응용 프로그램의 경우)이 설치된
이전 버전의 Windows 환경에서 실행할 수 있습니다.

WPF는 XAML을 사용하여 C#과 같은 프로그래밍 언어가 아닌 태그 언어를 이용해서
시각적으로 탁월한 UI(사용자 인터페이스)를 구성합니다.
컨트롤, 텍스트, 이미지, 도형, 애니메이션 등의 요소를 정의함으로써 XAML로
정교한 UI 문서를 완전하게 만들 수 있습니다.
XAML은 HTML처럼 선언적이므로 응용 프로그램에 런타임 논리를 추가해야 하는 경우에는
코드를 추가해야 합니다.
예를 들어 응용 프로그램이 XAML만 사용하는 경우, UI 요소를 만들어 애니메이션 효과를
적용하거나 이벤트 트리거를 사용하여 해당 UI 요소가 사용자 입력에 일정한 방식으로
응답하도록 구성할 수 있습니다.
그러나 응용 프로그램이 직접 계산을 수행하고 계산에 응답하거나 새로운 UI 요소를
자동으로 만들 수 있으려면 코드를 추가해야 합니다.
XAML 응용 프로그램의 코드는 XAML 문서가 아닌 별도의 파일에 저장됩니다.
이렇게 UI 디자인과 기본 코드가 분리됨으로써, 개발자와 디자이너는
상대방의 작업에 영향을 미치지 않으면서 한 프로젝트에서
더욱 긴밀하게 공동 작업을 할 수 있습니다.

XAML 및 WPF에 대한 자세한 내용은 MSDN의 "XAML 개요"를 참조하거나
Windows Vista Developer Center를 참조하십시오. 
Posted by UXPRO