강좌 & 팁
글 수 2,412
2015.11.27 18:40:50 (*.39.166.169)
46551
C#의 WPF는 최근 트랜드에 맞게 디자인과 코딩을 분리하려고 노력을 많이 하고 있습니다.
이번에는 디자인을 grid로 구성하여 창 크기 변경에 유연하게 처리하는 방식에 대해서 알아보겠습니다.
우선 디자인에 사용되는 xaml 코드를 다음과 같이 편집합니다.
<Window x:Class="Sample1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Sample1" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="36"/> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Button x:Name="button" Content="Button" Click="button_Click" Grid.Column="0" Grid.Row="0"/> <Label x:Name="label" Grid.Column="1" Grid.Row="0" VerticalContentAlignment="Center"/> </Grid> </Window>
우선 Grid 태그 안쪽에 Grid.ColumnDefinitions와 Grid.RowDefinitions 태그를 사용하여 행과 열을 미리 설정해둘 수 있습니다.
C# Window Form의 TableLayoutPanel과 HTML의 table 태그와 사용법이 비슷합니다.
행과 열을 설정하고 나면 각 컴포넌트에는 Grid.Column, Grid.Row 속성을 추가하여 배치를 할 수 있습니다.
위의 예제는 2*2 모양의 테이블이며 우측과 하단으로는 길이, 넓이가 *로 설정되어 가변 길이가 적용되어있습니다.
이렇게 하여 실행을 하여 버튼을 누르면 다음과 같은 결과가 나옵니다.