시크한 공돌이의 IT 블로그

ㄱ. 목적

1. WPF에서 WrapPanel을 이용한 동적 객체 표시를 알아본다.

2. WrapPanel의 특성을 알아본다

ㄴ. 본론

1. WrapPanel은 자식 요소를 왼쪽부터 오른쪽으로 순차적으로 배치하고, 해당 부모 컨테이너의 끝에 도달할 경우 내용을 자동으로 다음 줄로 바꾸는데 사용된다.

 콘텐스는 가로 또는 세로 방향으로 설정할 수 있다.  WrapPanel은 간단한 유동 UI(사요ㅕㅇ자 인터페이스) 시나리오에 유용하며 모든 해당 자식 요소에 동일한 크기를 적용 가능함.

2. 예제 - 버튼을 생성하여 줄이 바뀌는 것을 보는 예제

C# 코드

// Create the application's main window mainWindow = new System.Windows.Window(); mainWindow.Title = "WrapPanel Sample"; // Instantiate a new WrapPanel and set properties myWrapPanel = new WrapPanel(); myWrapPanel.Background = System.Windows.Media.Brushes.Azure; myWrapPanel.Orientation = Orientation.Horizontal; myWrapPanel.Width = 200; myWrapPanel.HorizontalAlignment = HorizontalAlignment.Left; myWrapPanel.VerticalAlignment = VerticalAlignment.Top; // Define 3 button elements. The last three buttons are sized at width // of 75, so the forth button wraps to the next line. btn1 = new Button(); btn1.Content = "Button 1"; btn1.Width = 200; btn2 = new Button(); btn2.Content = "Button 2"; btn2.Width = 75; btn3 = new Button(); btn3.Content = "Button 3"; btn3.Width = 75; btn4 = new Button(); btn4.Content = "Button 4"; btn4.Width = 75; // Add the buttons to the parent WrapPanel using the Children.Add method. myWrapPanel.Children.Add(btn1); myWrapPanel.Children.Add(btn2); myWrapPanel.Children.Add(btn3); myWrapPanel.Children.Add(btn4); // Add the WrapPanel to the MainWindow as Content mainWindow.Content = myWrapPanel; mainWindow.Show();

XAML

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="WrapPanel Sample"> <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2"> <WrapPanel Background="LightBlue" Width="200" Height="100"> <Button Width="200">Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> <Button>Button 4</Button> </WrapPanel> </Border> </Page>

결과 화면

ㄷ. 결론 

1. WrapPanel을 이용하여 간단한 나열식의 UI생성을 살펴보았다.