이번 포스팅에서는


1. 팝업창 내부의 구조를 구현하고

2. 작은 사각형들을 동적으로 생성한다.


----------------------------------------------------------

1. 팝업창 내부의 구조


이제 팝업창 내부에 행, 열을 선택하는 화면을 구현해보자.


팝업창 상단에는 현재 선택된 행, 열의 갯수가 보여지도록 TextBlock 을 넣고

하단에는 사각형들을 배치할 'UniformGrid'를 하나 넣어준다.


여기까지 넣으면 간단한 구조는 다음과 같다


<Popup>

<Grid>

<TextBlock />

<UniformGrid />

</Grid>

</Popup>


----------------------------------------------------------

2. 작은 사각형들 생성


작은 사각형들을 생성하여 위에서 생성한 UniformGrid에 차곡차곡 넣어주어야 한다.


간단한 과정은 다음과 같다.

1. 먼저 UniformGrid 에 Row, Column 을 원하는 값으로 지정한다.

2. 해당 UniformGrid에 Row x Column 개 만큼의 사각형을 생성하여 Children으로 추가한다.


이 과정을 실행하는 시점은, Generic.xaml 에 정의된 Template가 적용되는 시점으로 하는 것이 바람직하며

이는 OnApplyTemplate() 함수를 override 하여 사용하면 된다.


이 과정을 코드로 작성하면 다음과 같다.



MaxRows, MaxColumns, RectangleSize, RectangleMargin, RectangleColor 등은 몇 칸을 어느 정도의 크기와 색으로 만들지에 대한 변수이며, 

CustomRectangle 은 'Rectangle' 에 2개의 int 형 변수 :  Row, Column 을 추가한 객체이다.


----------------------------------------------------------

여기까지 완료하고 실행시켜보면 다음과 같은 화면을 볼 수 있다.





+ Recent posts