안녕하세요~ 여러분^^ (안녕이라고 하기엔 새벽1시잖냐!!;;)
지난시간까지 블렌드 튜토리얼 강좌를 마치고 활용강좌를 쓰려고 했으나,
단순한 설명만으로는 부족한 부분들이 많을것 같아서 실제로 작업에 쓰이는 경우에 꼭 필요한
내용을 더 쓰려고 합니다. 중간중간 활용강좌도 진행할께요 ^^
이것은 전적으로 제가 블렌드를 다루고 실무에서 무한삽질(?)을 하면서
겪은 부분을 쓴 것이기에 지극히 개인적일 수도 있지만, 도움이 되시리라 생각합니다.
블렌드에서는 레이아웃 패널을 이용하여 다양하게 오브젝트를 배치할 수 있습니다.
제가 처음 작업하였을 때는 무조건 Canvas만 썼습니다. 왜냐구요? 이유는 아주 단순하게도,
그냥 평범해보였기 때문입니다. -_-;; 하하;;
솔직히 다른 패널은 뭐하는 애들인지도 잘 모르겠고, 아무 모양도 없이 오브젝트들이 잘 들어가는
Canvas만 주구장창 썼드랬죠.. 그런데 알고보니 그에 맞는 용도가 다 있더군요.^^;
그러나 레이아웃 패널은 눈에 보이는 속성이 아니기 때문에 각 패널의 속성을 알지 못하고서는
쓰기가 어려웠습니다. 그래서 오늘부터 레이아웃 패널에 대해서 하나씩 알려드릴께요.
레이아웃 패널에는 Grid, Canvas, Stack, ScrollViewer, Border 이렇게 5가지 패널이
있고 WPF용에서는 몇 개의 패널이 더 있지만, 실버라이트를 기준으로 하여 설명합니다.
먼저 Grid 패널을 첫 주자로 파헤쳐봅시다 -_ -+
Grid 패널은 비주얼 스튜디오나 익스프레션 블렌드의 기본 레이아웃 패널입니다.
그렇기 때문에 제일 자주 쓰일수 있습니다. 이녀석의 큰 특징은 HTML의 테이블과 아주
비슷하다는 것입니다.
테이블처럼 행과 열을 가지고 있으며 divider를 이용하여 행과 열을 조절할 수도 있습니다.
위의 저 빨간 네모 친 부분이 디바이더이고, 드래그로 움직일 수 있습니다.
Grid 패널은 기본적으로는 행과 열의 값을 0으로 가지는 하나로 된 레이아웃이지만
RowDefinition과 ColumnDefinition 엘리먼트를 사용하여 행과 열을 추가할 수 있습니다.
먼저 코드를 살펴보겠습니다.
Main이라는 이름을 가진 Grid를 생성하고 가로가 200이고 높이가 100인 행과 열을 2개씩 생성 하였습니다.
그리고 그 안에는 사각형 4개와 텍스트박스 4개를 넣었는데요. 주목해야할 부분은 Grid.Row와 Grid.Column
입니다. 값이 "0,0" "0.1", "1,0", "1,1" 을 가지고 있죠?
기본적으로 행과 열은 기본값을 "0"으로 가지고 있습니다.
그리하여 코드대로 디자인된 패널을 살펴보면 다음과 같습니다.
물론 "Grid.Row="0" Grid.Column="0" 의 사각형이 행과 열을 변경하지 않고도
"Grid.Row="0" Grid.Column="1"의 위치에 놓이게 할 수는 있습니다.
그러나 정렬기준에 맞추어 Margin 값이 변경되게 됩니다.
Grid 패널이 좌측 정렬일 경우,
"Grid.Row="0" Grid.Column="0"의 사각형의 LeftMargin 값이 0인 상태에서
행과 열을 변경하지 않고 "Grid.Row="0" Grid.Column="1"의 위치에 놓인다면
LeftMargin 값이 200이 되겠죠? (Column 가로길이값 200을 더해서)
흠..^^ 이해가 잘 되셨는지 모르겠네요. 테이블의 개념을 생각하면 이해가 쉬울듯 싶습니다.
오늘은 이렇게 Grid 패널에 대해서 알아보았구요. 다음시간에는 Canvas 패널에 대해서 알아보겠습니다.
지난시간까지 블렌드 튜토리얼 강좌를 마치고 활용강좌를 쓰려고 했으나,
단순한 설명만으로는 부족한 부분들이 많을것 같아서 실제로 작업에 쓰이는 경우에 꼭 필요한
내용을 더 쓰려고 합니다. 중간중간 활용강좌도 진행할께요 ^^
이것은 전적으로 제가 블렌드를 다루고 실무에서 무한삽질(?)을 하면서
겪은 부분을 쓴 것이기에 지극히 개인적일 수도 있지만, 도움이 되시리라 생각합니다.
블렌드에서는 레이아웃 패널을 이용하여 다양하게 오브젝트를 배치할 수 있습니다.
제가 처음 작업하였을 때는 무조건 Canvas만 썼습니다. 왜냐구요? 이유는 아주 단순하게도,
그냥 평범해보였기 때문입니다. -_-;; 하하;;
솔직히 다른 패널은 뭐하는 애들인지도 잘 모르겠고, 아무 모양도 없이 오브젝트들이 잘 들어가는
Canvas만 주구장창 썼드랬죠.. 그런데 알고보니 그에 맞는 용도가 다 있더군요.^^;
그러나 레이아웃 패널은 눈에 보이는 속성이 아니기 때문에 각 패널의 속성을 알지 못하고서는
쓰기가 어려웠습니다. 그래서 오늘부터 레이아웃 패널에 대해서 하나씩 알려드릴께요.
레이아웃 패널에는 Grid, Canvas, Stack, ScrollViewer, Border 이렇게 5가지 패널이
있고 WPF용에서는 몇 개의 패널이 더 있지만, 실버라이트를 기준으로 하여 설명합니다.
먼저 Grid 패널을 첫 주자로 파헤쳐봅시다 -_ -+
Grid 패널은 비주얼 스튜디오나 익스프레션 블렌드의 기본 레이아웃 패널입니다.
그렇기 때문에 제일 자주 쓰일수 있습니다. 이녀석의 큰 특징은 HTML의 테이블과 아주
비슷하다는 것입니다.
테이블처럼 행과 열을 가지고 있으며 divider를 이용하여 행과 열을 조절할 수도 있습니다.
위의 저 빨간 네모 친 부분이 디바이더이고, 드래그로 움직일 수 있습니다.
Grid 패널은 기본적으로는 행과 열의 값을 0으로 가지는 하나로 된 레이아웃이지만
RowDefinition과 ColumnDefinition 엘리먼트를 사용하여 행과 열을 추가할 수 있습니다.
먼저 코드를 살펴보겠습니다.
Main이라는 이름을 가진 Grid를 생성하고 가로가 200이고 높이가 100인 행과 열을 2개씩 생성 하였습니다.
그리고 그 안에는 사각형 4개와 텍스트박스 4개를 넣었는데요. 주목해야할 부분은 Grid.Row와 Grid.Column
입니다. 값이 "0,0" "0.1", "1,0", "1,1" 을 가지고 있죠?
기본적으로 행과 열은 기본값을 "0"으로 가지고 있습니다.
그리하여 코드대로 디자인된 패널을 살펴보면 다음과 같습니다.
물론 "Grid.Row="0" Grid.Column="0" 의 사각형이 행과 열을 변경하지 않고도
"Grid.Row="0" Grid.Column="1"의 위치에 놓이게 할 수는 있습니다.
그러나 정렬기준에 맞추어 Margin 값이 변경되게 됩니다.
Grid 패널이 좌측 정렬일 경우,
"Grid.Row="0" Grid.Column="0"의 사각형의 LeftMargin 값이 0인 상태에서
행과 열을 변경하지 않고 "Grid.Row="0" Grid.Column="1"의 위치에 놓인다면
LeftMargin 값이 200이 되겠죠? (Column 가로길이값 200을 더해서)
흠..^^ 이해가 잘 되셨는지 모르겠네요. 테이블의 개념을 생각하면 이해가 쉬울듯 싶습니다.
오늘은 이렇게 Grid 패널에 대해서 알아보았구요. 다음시간에는 Canvas 패널에 대해서 알아보겠습니다.
