방법: 데이터 기반 동적 레이아웃 만들기

WPF(Windows Presentation Foundation)에서는 데이터 기반 동적 레이아웃을 지원하는 컨트롤을 제공합니다. WPF Designer에서 이러한 컨트롤을 사용하면 손쉽게 데이터 기반 동적 레이아웃을 만들 수 있습니다. 응용 프로그램에서 다음과 같은 컨트롤을 사용할 수 있습니다.

• ListView

• GridView

ListView 컨트롤은 데이터 항목 집합을 다양한 레이아웃으로 표시하기 위한 인프라를 제공합니다. 일반적으로 GridView와 ListView 컨트롤을 함께 사용하여 열에 데이터를 표시합니다. 자세한 내용은 ListView 개요 및 GridView 개요를 참조하십시오.

ListView 추가 및 구성

ListView를 추가 및 구성하려면

1. 도구 상자의 컨트롤 그룹에서 ListView 컨트롤을 Grid와 같은 패널로 끌어 옵니다.

2. 속성 창에서 ListView 컨트롤의 다음과 같은 속성을 설정하여 동적 동작을 최대화합니다.

   Property	사용할 값
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

3. 파일 메뉴에서 모두 저장을 클릭합니다.

GridView 추가 및 구성

GridView를 추가 및 구성하려면

1. XAML 뷰에서 ListView 요소를 찾습니다. 이 요소는 다음과 같습니다.

   <ListView <ATTRIBUTES> />
   

2. ListView 요소를 다음 태그로 바꿉니다. 필요에 따라 이름 및 열을 추가합니다.

   참고

   코드 숨김 파일에서 요소를 참조하려는 경우 ListView 요소와 GridViewColumn 요소에 명시적 이름이 있어야 합니다. 예를 들어 데이터 바인딩 코드에서 이러한 요소를 참조하려는 경우 명시적 이름이 있어야 합니다.

   <ListView x:Name="LISTVIEWNAME">
       <ListView.View>
           <GridView AllowsColumnReorder="True">
               <GridViewColumn x:Name="<COLUMNNAME>" Header="<COLUMNHEADER>"></GridViewColumn>
               Add more columns as necessary.
           </GridView>
       </ListView.View>
   </ListView>
   

3. 파일 메뉴에서 모두 저장을 클릭합니다.

창 크기가 동적으로 조정되도록 설정

SizeToContent 속성은 내용의 크기가 변경될 때 Window의 크기가 변경되는 방식을 지정합니다. 기본적으로 이 속성은 Manual로 설정되며, 이 경우 사용자가 창의 크기를 내용에 맞게 직접 조정할 수 있습니다. 이 속성을 WidthAndHeight로 설정하면 내용이 변경될 때 창의 크기가 동적으로 조정됩니다.

창 크기가 동적으로 조정되도록 설정하려면

1. 디자이너에서 MainWindow.xaml을 엽니다.

2. 디자인 뷰에서 Window를 선택합니다.

3. 속성 창에서 Window에 대해 다음 속성을 설정합니다.

   Property	값
   SizeToContent	WidthAndHeight
   Width	Auto
   Height	Auto

   팁

   Width 및 Height 속성을 Auto로 설정하면 창의 크기가 현재 컨트롤과 콘텐츠에 맞게 조정됩니다. 따라서 필요한 컨트롤과 콘텐츠를 창에 모두 추가한 후 이러한 속성을 설정해야 합니다.

4. 파일 메뉴에서 모두 저장을 클릭합니다.

참고 항목

작업

연습: 데이터 기반 동적 레이아웃 만들기

방법: GridView를 사용하여 ListView 콘텐츠 표시

개념

레이아웃 시스템

기타 리소스

WPF 디자이너 작업