Always Smile Day

TreeView 컨트롤은 다른 리스트 컨트롤처럼 아이템을 순차적으로 나열하는 것이 아니라 계층적으로 아이템을 표현하는 컨트롤이다. 이는 TreeViewItem 컨테이너가 다른 TreeViewItem 요소를 자식 요소로 가질 수 있음을 의미한다.

각각의 TreeViewItem 요소는 트리의 개별적인 노트에 대응하여 각 노드의 캡션을 제공하기 위한 Header 속성을 가지고 있다. 이 방법은 콘텐츠 모델의 또 다른 형태이며, 일반 텍스트는 물론 세번째 최상위 아이템처럼 중첩된 콘텐츠를 사용할 수도 있다.

TreeView의 속성 중에 최초 실행시 각 트리가 열려있거나 닫혀 있는 경우를 볼 수 있다. 이는 TreeViewItem 의 속성 중 IsExpanded 를 이용하면 된다.

Listview 컨트롤은 그리드와 유사한 형태의 뷰를 제공하는 ListBox 클래스로부터 파생된다. 이 컨트롤을 이요하려면 반드시 View 속성에 리스트의 열들을 정의하는 GridView 객체를 제공해야 한다.

이 ListView 컨트롤은 정적 속성인 Fonts.SystemFontFamilies 속성이 리턴하는 FontFamily 객체의 컬렉션을 이용하여 데이터 바인딩을 수행한다. 이 방법은 FontFamily 객체를 ListView 컨트롤의 Items 컬렉션에 효과적으로 채운다. 그리고 GridView 컨트롤은 세 개의 열을 정의한다. 처음 두 개의 열은 DisplayMemberBinding 속성을 이용하여 FontFamily 클래스의 어떤 속성이 ListView 컨트롤의 데이터로 보여져야 하는지를 지정한다. 이예제에서 사용된 바인딩 표현식은 단순히 FontFamily 객체의 Source 속성 값과 LineSpacing 속성 값이 각 행에 표시되어야 함을 나타낸다. 세 번째 열은 CellTemplate 속성을 이용함으로써 앞서 두 열과 다른 메커니즘을 사용한다. CellTemplate 속성을 사용할 경우 DataTemplate 속성을 이용하여 ListView 컨트롤의 행으로 만들어질 마크업 코드를 마음대로 지정할 수 있다. 예제의 경우 TextBlock 요소를 이용하여 FontFamily 객체의 FonntFamily 속성 값을 ListView 컨트롤의 각 행으로 만들어낸다. 

WPF는 여러 개의 아이템을 보여줄 수 있는 몇가지 컨트롤들을 제공한다. ListBox, ComboBox, 그리고 ListView 컨트롤은 아이템들을 순차적으로 보여줄 수 있다. TreeView는 아이템들을 계층적으로 보여준다. TabControl 컨트롤은 ListBox 컨트롤과 명확하게 연관이 있어 보이지는 않지만 기본적인 기능은 공유하고 있다. 이것들 모두가 공통의 기반 클래스인 ItemsControl로부터 파생된다.

◎ ListBox

ListBox는 위와 같이 ListBox를 설정해 준 후 아이템들을 추가해주면 된다. 그리고 아이템 하나당 하나의 리스트를 차지하므로 하나의 리스트 안에 여러개의 아이템을 추가하고 싶을 때엔 위와 같이 StackPanel 등을 사용하여주면 유용하다.

◎ ComboBox

ComboBox도 ListBox와 이름만 다를 뿐 구조는 비슷하다.

다만 ComboBox는 실행 시 아래와 같이 열려있지 않고 닫혀있다. 그래서 닫혀있는 ComboBox의 초기값을 설정해 주고 싶으면 위의 소스와 같이 SelectedIndex 를 통하여 설정해 줄 수가 있다.

◎ TabControl 

TabControl은 각각의 Tab에 대한 TabItem 을 추가하고 TabItem 안에 아이템을 추가해주어야 한다. 또한 탭 Header 속성에 언더스코어 문자를 이용함으로써 액세스 키를 표시할 수도 있다.

TabControl은 여러개의 TabItem 을 중첩하며 사용하게 된다. 

GroupBox와 Expander는 매우 유사한 컨트롤이다. 이 둘은 모두 다양한 콘텐츠의 컨테이너이면서 위쪽에 머리글을 위한 공간을 제공한다.

외관이 서로 다르다는 것을 제외하면 이 두 컨트롤의 가장 큰 차이점은, Expander 컨트롤은 확장 및 축소가 가능하다는 점이다. 사용자는 왼쪽 위의화살표를 클릭하여 콘텐츠를 숨기거나 보일 수 있다. 반면 GroupBox 컨트롤의 콘텐츠는 항상 보여지는 상태다.

두 컨트롤은 모두 ContentControl을 상속하는 HeaderedContentControl 클래스로부터 파생되므로 이전 포스트에서 보셨다시피 원하는 콘텐츠는 무엇이든 컨트롤 내에 집어넣을 수 있다.

HeaderedContentcontrol 컨트롤은 두 가지의 콘텐츠 모델을 제공한다. 즉, 익스팬더나 그룹 상자의 콘텐츠에 원하는 무엇이든 넣을 수 있듯이 머리글 영역에도 마찬가지로 무엇이든 넣을 수 있다. 

[ 다양한 콘텐츠를 가진 머리글 ] 에는 텍스트와 그래픽, 그리고 컨트롤을 혼합하여 사용하는 방법을 보여준다.

ToolTip 컨트롤은 사용자 인터페이스의 특정 영역 상에 떠다니는 레이블을 보여주는 컨트롤이다. 이 컨트롤은 사용자 인터페이스 트리의 일부가 될 수 없기 때문에 자주 사용되지는 않으며, 다른 요소와 연결하여 사용해야 한다.

ToolTip 컨트롤을 대상요소에 연결시키려면 '1번 ToolTip'과 같이 대상 요소의 ToolTip 속성을 지정하면 된다. 

[ 1번 ToolTip 의 실행 결과 ]

사실 ToolTip 객체를 명시적으로 지정할 필요는 없으며 2번 ToolTip 에서 보듯이 ToolTip 속성에 문자열을 지정하기만 하면된다.

[ 2번 ToolTip 의 실행 결과 ]

ToolTip 속성에 다른 문자열을 지정하면WPF는 ToolTip ㅓㅋㄴ트롤을 생성하고 대상 요소의 ToolTip 속성에 Content 속성의 값을 대입한다. 따라서 1번과 2번은 완전히 동일하다.

ToolTip 컨트롤은 ContentControl 클래스로부터 파생되므로 단순한 문자열 외에 어떤 것도 콘텐츠로 사용할 수 있다. 따라서 3번과 같이 원하는 것은 무엇이든 사용할 수 있다.



3번 ToolTip은 이 예제의 결과를 보여준다. 주목할 것은 마우스 포인터가 TextBox 컨트롤을 벗어나는 순간 풍선 도움말이 사라진다는 것이다. 다시 말하면 풍선 도움말에 버튼과 같이 사용자와 상호작용이 가능한 요소를 넣는다 하더라도 사용자가 이를 클릭할 수 없기 때문에 그다지 유용하지 않다는 것이다. 그러나 풍선 도움말이 자동으로 사라지지 않도록 할 수 있다. 

IsOpen 속성을 True로 지정하면 사용자가 마우스 포인터를 올리기 전에 풍선 도움말이 나타나도록 할 수 있다. 이렇게하면 풍선 도움말이 곧바로 나타나며 대상 요소를 가진 윈도우가 포커스를 가지고 있는 도안 풍선 도움말은 계속해서 열려있게 된다. 만일 IsOpen 속성을 True로 지정하고, StaysOpen 속성을 False로 지정하면 풍선 도움말이 곧바로 나타나지만 풍선 도움말 외의 다른 영역을 클릭하면 곧바로 사라지게 된다. 이 경우 풍선 도움말 내에 상호작용이 가능한 콘텐츠를 제공할 수 있게 된다.

[ 3번 ToolTip 의 실행 결과 ]

※ ToolTip 컨트롤은 최상위 윈도우에 보여진다. 이 특성은 윈도우의 가장자리에 위치한 요소에 풍선 도움말을 보여줄 때 유용하다. 즉, 풍선 도움말의 크기가 크더라도 주 윈도우의 영역 내에서 잘리지 않고 윈도우를 볏어난 부분도 보여지게 된다.

MVC패턴이란 Model-View-Controller 의 약자이다. 

이것은 상호작용이 가능한 시스템을 구성하는 방법이다. MVC는 지난 수년간 여러 가지 다른 방법으로 해석되었지만 데이터를 표현하는 객체(모델), 데이터를 보여주는 객체(뷰), 그리고 사용자 입력과 모델 및 뷰 사이의 통신을 담당하는 객체*컨트롤러(로 구성된다고 널리 알려져 있다.

MVC는 다양한 스케일의 응용 프로그램에 적용할 수 있는 개념이지만 개별적인 컨트롤 수준에 적용하는 경우는 많지 않다. 그러나 사물을 MVC 패턴의 시각에서 바라보는 것에 익숙하다면 데이터 바인딩을 모델을 결합하는 방법으로, 템플릿은 뷰로, 그리고 컨트롤은 컨트롤러로 생각하면 도움이 될 것이다.

Visual Studio 2010 단축키 모음입니다.

제가 주로 C#을 하다보니 일단은 C# 부분만 포스팅할게요^^

모든 사용자 인터페이스 요소들은 레이아웃과 관련된 표준 속성의 집합을 가지고 있으며, 대부분은 FrameworkElement 기반클래스로부터 상속된 것이다.

일부 속성들은 FrameworkElement로부터 상속된 것이 아니다. Padding 속성은 Control, Border, 그리고 TextBlock 등 여러 요소에 정의되어 있으며, 이들은 모두 같은 의미를 가진다. 내부 여백은 콘텐츠를 가진 요소에서만 의미가 있으므로 모든 요소에 사용되지는 않는다. Panel.ZIndex 속성은 어떤 요소에나 적용될 수 있지만 FrameworkElement로부터 명시적으로 상속되는 것이 아니라 결합 속성이다.

UniformGrid의 모든 칸은 동일한 너비를 가지므로 행과 열에 대한 정의를 나열할 필요가 없으며, 크기를 지정하기 위해 단순히 Rows와 Columns 속성을 지정하면 된다.

사실 이 속성도 지정할 필요는 없다. 기본적으로 UniformGrid는 행과 열을 자동으로 생성한다. 또한 행과 열의 수를 항상 동일하게 유지하며 자식 요소를 위해 필요한 공간을 필요한 만큼 만들어낸다. 

각각의 칸은 하나의 자식 요소만 가질 수 있으므로 어떤 칸에 요소가 위치할 것인지를 일일이 지정할 필요 없이 단지 자식 요소를 추가하기만 하면 된다.

[ 실행 결과 ]

Canvas는, 앞에서 정의 내린 것처럼 '어떤 레이아웃 로직도 실행하지 않는다. 자식 요소를 원하는 곳에 배치할 수 있으며, 개발자가 직접 레이아웃 프로세스를 제어해야 한다.' 는 것이 바로 Canvas이다.

Canvas는 가장 단순한 패널이다. 이는 자식 요소들의 위치를 캔버스의 각 면에 대해 정밀하게 지정할 수 있다. Canvas는 실제로 어떤 레이아웃도 수행하지 않으며, 다만 여러분이 말한 곳에 요소들을 위치시키는 일만 한다. 또한 Canvas는 요소가 사용 가능한 공간을 채우도록 크기를 조정하지도 않으며, 모든 자식 요소는 콘텐츠의 크기에 맞추어 크기가 지정된다.

Canvas를 사용할 때는 반드시 각 자식 요소의 위치를 지정해야 한다. 만일 그렇게 하지 않으면 모든 요소는 왼쪽 상단에 몰리게 될 것이다. Canvas는 자식 요소의 위치를 지정하기 위한 4개의 결합 속성을 제공한다. 수직 위치는 Top과 Bottom 속성에 의해 결정되며, 수평 위치는 Left와 Right 속성에 의해 결정된다.

첫번째 TextBlock 요소는 Canvas의 왼쪽 상단을 기준으로 위치가 지정되어 왼쪽으로부터 10 pixel, 위쪽으로부터 20 pixel 떨어진 곳에 텍스트가 나타난다.

두번째 TextBlock 요소는 화면의 오른쪽 아래를 기준으로 위치가 지정되는데, 이는 Canvas의 크기가 재조정되더라도 여전히 텍스트가 오른쪽 아래에 나타난다는 것을 의미한다.

[ 실행 결과 ]