032_Grid

Grid를 이용해 위와 같이 여러 버튼과 그의 크기를 조절해보자.

 <Grid Margin="20" Background="Bisque">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Margin="10" Grid.Row="0" Grid.Column="1">Click me! 1</Button>
        <Button Margin="10" Grid.Row="1" Grid.Column="0">Click me! 2</Button>
        <Button Margin="10" Grid.Row="2" Grid.Column="2">Click me! 3</Button>

    </Grid>

 

한줄한줄 코드 설명을 해보겠다.

<Grid> </Grid>로 grid창을 만들고

Margin: 바깥여백 설정

Padding: 안쪽여백 설정

margin을 20픽셀로 잡고 백그라운드컬러를 필자가 맘에 들어하는 Bisque로 설정 하겠다.

Gird.RowDefinitions 가로로 나눔

Grid.ColumnDefinitions 세로로 나눔

중간에 Height = "2*"인것은 총 세개의 비율을 2:1:1로 하겠다는 뜻이다.

버튼도 세개를 만들어 margin, 총 9개로 나누어진 곳에 row,column 의 위치를 정해주고 이름도 지정해준다.!