삽질의 현장/- .NET 131

#123_닷넷(.NET)_ WPF_ 계층적 바인딩

안녕하세요 삽잡이입니다. 이번 시간은 계층적 바인딩에 대해서 알아보려고합니다. 계층적 바인딩은 이와 같이 트리형태로 열립니다. 은근 복잡할 것 같지만, xaml 코드로 간단하게 한줄로 끝나지요...이를 계층적 바인딩이라고 부릅니다. TreeView의 Item에는 가장 최상위 요소인 Familes가 보입니다. 그리고 이 Families가 어떻게 나타날지에 대해서는 이와 같이 정의 되있습니다. 모든 Familes를 이와 같은 형식으로 보여주라고 명시한 것입니다.해당 예제에서는 모든 Familes를 TextBlock으로 보여주라고 하고 있습니다. 계층적 바인딩에는 계층적인 요소를 사용합니다.단일 요소에는 TextBox등이 있었고,다중 요소에는 ListBox, ComboBox등이 있었지요...이와 같이 계층적인..

#122_닷넷(.NET)_ WPF_ 마스터 디테일 바인딩

안녕하세요 삽잡이입니다. 이번 시간에는 마스터-디테일 바인딩에 대해서 알아보려고합니다. 리스트에 선택된 데이터에 따라상태 데이터들이 바뀌는 UI입니다.즉, 각 Family를 누르면 각각의 가족 구성원들이 나오고,각 구성원들을 누를 경우 그들의 특징에 대해서 나옵니다. 이와 같은 UI도 모두 바인딩에 의해 만들어진 것입니다.선택하면 자동적으로 선택에 맞게 보여진다 이거죠. 잘 보시면,ListBox들이 UI의 Column 0, 1, 2 순으로 차례대로 놓여있습니다. 이는 xaml 코드만 볼 것이 아닌,데이터 원본으로 설정 될 코드도 준비가 되어있어야합니다. Family 안에는 두 그룹이 있는데,이 그룹이 있는 클래스를 바인딩하게되면 UI에 보여지겠지요.이를 선형 바인딩이라고 하며,원소 두개가 Item에 보여..

#121_닷넷(.NET)_ WPF_ 데이터 바인딩_필터링 & 정렬 & 그룹핑

안녕하세요 삽잡이입니다. 이번 시간에는 정렬, 필터링, 그룹핑에 대해서 알아보려고 합니다.이 세가지 연산이 가장 집합 연산중에서 기본이 되는 연산입니다. 해당 연산들은 모두 View를 통해 이루어집니다.즉, View를 가지고 논다 이겁니다.원본을 가지고 놀면 왜 안되는지는... 아시겠지요...? 컬렉션을 View를 통해 UI에 보여줄 경우,전부 볼 일 없이, 필요한 것만 보거나, 정렬하고 싶을 때가 있습니다. 이때, ICollectionView 인터페이스를 구현하여원하는 View를 구현하여 바인딩 할 수 있습니다. 우선, 필터링입니다. 필터링 버튼을 눌렀을 경우, Default View를 얻어오게 됩니다.그리고 View에 Filter라는 속성이 null일 경우 새로운 필터를 장착하는 것이지요. 참고로 F..

#120_닷넷(.NET)_ WPF_ 데이터 바인딩_데이터 템플릿

안녕하세요 삽잡이입니다. 이번 시간에는 데이터 템플릿에 대해 알아보려고합니다. 이 UI를 보여드린 이유는데이터 템플릿이 핵심이기 때문입니다. 리소스에 데이터 템플릿을 형식화 하게 되면틀에 대해 쉽게 추가 및 제거를 할 수 있게 됩니다. 해당 예제에서는 Person에 대한 데이터 타입의 템플릿이 정의되어있습니다.즉, DataTemplate을 리소스에 정의했습니다.이를 형식화된 데이터 템플릿이라고 합니다. 리소스에 데이터 템플릿을 지정하되,데이터 타입에 대한 형식을 지정하게 되면,위의 UI와 같은 데이터 템플릿 형식이 보이게 된다 이겁니다. 이와 같이 데이터 템플릿을 직접 지정하지 않고,타입(Person)이 보여질 것 같으면,모두 다 템플릿에 맞춰 보여줄 수 있는 것이지요. 이와 같이, 형식화된 데이터 템플..

#119_닷넷(.NET)_ WPF_ 데이터 바인딩_유효성 검사

안녕하세요 삽잡이입니다. 이번 시간에는 데이터 유효성 검사에 대해서 알아보려고합니다. 사용자로 부터 입력을 받게 될 때, 해당 데이터가 UI로 들어갈 데이터에 맞는 성격인지, 혹은, 제대로 입력했는지 검사하는 것을'유효성 검사'라고 부릅니다. 예를 들어 나이를 입력하는 UI가 있다고 해봅시다.여기에 SAP, 100000 이런 값이 오면 되겠습니까?즉, 사용자의 Input이 맞는지를 보는 것입니다.데이터가 올바른지 검사하는게 아니구요... 엉뚱한 값이 바인딩 된 데이터에 저장되면 안되겠지요...따라서, 유효성은 데이터에 최신화 되기 전에 실시합니다. 모든 사용자 Input이 들어오는 곳에는 유효성검사가 있어야합니다.그런데, 이 유효성 검사가 데이터 바인딩과 어떤 상관이 있을까요? WPF에서는 UI에 입력받..

#118_닷넷(.NET)_ WPF_ 데이터 바인딩_ 형식변환 (Converter)

안녕하세요 삽잡이입니다. 지~난 시간에 바인딩에 대해서 알아본 적이 있는데요 (참고),이 데이터 바인딩에 연장 선상이라고 생각하시고 또 한번 바인딩에 대해서 알아보겠습니다. 이번 시간에는 Converter라는 바인딩 클래스의 속성을 사용하여보여지는 내용을 형식 변환할 수 있다는 사실에 대해서 알아보려고합니다. 데이터 바인딩의 핵심은 '동기화'와 '타입 변환'이지요. Binding을 할 때에는 여러 속성들을 사용할 수 있습니다. 기존에는 Path를 생략하고 단지 속성과 연결해주는 것이 바인딩이라고 생각했었는데,Path는 단지 데이터 원본 객체의 데이터에 대한 경로를 설정하는 것이었습니다.그런데, Path는 Default이기 때문에 생략하며 사용했던 것이죠. 이런식으로... 이 외에도 여러 속성들이 존재하는..

#117_닷넷(.NET)_ WPF_ 컨트롤(Control)과 템플릿(Template)

안녕하세요 삽잡이입니다. 이번 시간에는 WPF의 컨트롤에 대해서 알아보려고합니다. WPF에서 컨트롤들은 모두 '동작'을 구현한 것입니다.그리고, 컨트롤의 외관에 대한 책임은 모두 '템플릿'이 가지고 있습니다. 기존 컨트롤들은 사용자와 대화하는 인터페이스 요소일 뿐이었죠.하지만, WPF에서는 완벽하게 이를 분리해버렸습니다.WPF에서 컨트롤은 행동만을 가지고 있습니다. 컨트롤의 외관을 생각해보면...WPF 이전에 기존 컨트롤들은 외관이 다 정해져있었습니다.하지만, WPF에서는 컨트롤을 정의하는데 외관은 상관이 없어진 것입니다.왜냐? 단지 행동만을 담당하기 때문이지요.외관은 템플릿이 담당해주는 것입니다. 단지, 우리가 도구상자를 통해 컨트롤들을 사용하게 될 때자동으로 외관이 잡히는 이유는 바로, 기본 템플릿으..

#116_닷넷(.NET)_ WPF_ Command 처리

안녕하세요 삽잡이입니다. 이번 시간에는 커멘드 처리에 대해서 알아보려고합니다. 커멘드란, 우리 말로 명령입니다.그래서 이 커멘드라는 용어를 WPF에서는명령 객체를 만들고 사용하는 방법이라고도 합니다. 복사하기에 대한 예시를 들어보자면,드래그하여 Ctrl +C / V를 통해 복,붙이 가능하고,복사하기라는 UI 요소를 통해 복,붙을 하기도 하지요. 어찌됬건, Ctrl + V를 하던, 복사 버튼을 누르던 등등모두 클립보드에 포커스가 가지고 있는 내용물을 집어넣으려 한다는 사실은 똑같다는 것입니다. 어떠한 경우던,행동은 똑같기 때문에 이럴 때 커멘드 객체를 만드는 것입니다.즉, 각각의 이벤트에 대한 핸들러를 일일히 만들 필요 없이,명령에 대한 인터페이스를 만드는 것이지요. 이와 같이 명령 객체를 만들어 놓기만 ..

#115_닷넷(.NET)_ WPF_ 키보드 입력

안녕하세요 삽잡이입니다. 이번 시간에는 키보드 입력에 대해서 알아보려고합니다. 키보드는 마우스 포인터와 같이 어느 윈도우를 타겟으로 하고 이벤트를 받을 것인지에 대한 포커스가 없습니다.따라서, 키보드에서는 논리적인 포커스와, 키보드 포커스라는 기능을 제공합니다. 키보드는 자원이고,UI 요소 중 하나만이 키보드 입력을 받아들일 수 있습니다.키보드 입력을 받아들일 수 있는UI 요소를 표현하기 위해서 포커스라는 개념을 제공하게 되는 것이지요.즉, 포커스를 가지고 있는 녀석만이 키모드 메시지를 받을 수 있게 됩니다. 키보드 포커스는,실제로 지금 포커스를 받고 있는 녀석을 의미하고,논리적인 포커스는,이전에 포커스를 받고 있던 녀석을 의미합니다. 나눠논 이유가 있을까요? 절대로! 블로그 홍보가 아닙니다... 하하...

#114_닷넷(.NET)_ WPF_ 라우팅된 이벤트 (Routed Event)

안녕하세요 삽잡이입니다.이번 시간에는 라우팅 된 이벤트에 대해서 알아보려고합니다. 버튼이라는 콘트롤에 있는 모든 콘텐츠들을 각각의 색상으로 칠해봤습니다. 여기서 버튼의 콘텐츠라고 하면,버튼 내에 모든 것들을 말할 수 있지요. 빨간색 배경 안에 있는 것들이 모두 버튼의 콘텐츠 입니다. 코드가 아닌, 버튼이라는 UI만 보더라도,Grid 내부에 Canvas, Button, Ellipse, TextBlock등이 있는 것을 알 수 있습니다. 각각의 Element들을 색상으로 구분지어봤고,중요한 것은 어떤 Element던지 버튼이 클릭되면, 이벤트가 발생할 수 있다는 사실입니다. Canvas가 버튼의 콘텐츠이기에 버튼이 클릭된것 처럼 보이고,Ellipse를 클릭해도, TextBlock을 클릭해도 모두 버튼이 클릭된..