[C#, WPF] Grid, StackPanel, WrapPanel 알아보기

StackPanel은 item들을 차곡차곡 쌓는다.

쌓는 순서는 Orientation으로 결정.

<StackPanel Orientation="Vertical">
    <Button HorizontalAlignment="Left" Content="버튼1"/>
    <Button HorizontalAlignment="Right" Content="버튼2"/>
    <Button HorizontalAlignment="Center" Content="버튼3"/>
    <Button Content="버튼4"/>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Button Margin="5" Content="버튼1-1"></Button>
        <Button Margin="5" Content="버튼1-2"></Button>
        <Button Margin="5" Content="버튼1-3"></Button>
        <Button Margin="5" Content="버튼1-4"></Button>
    </StackPanel>
</StackPanel>

 

Grid는 행,렬을 지정하여 item들을 배치시킨다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel>
        <Label>hello</Label>
    </StackPanel>
    <Button Grid.Row="0" Grid.Column="0" Width="100" Content="버튼1"></Button>
    <Button Grid.Row="0" Grid.Column="1" Content="버튼2"></Button>
    <Button Grid.Row="0" Grid.Column="2" Content="버튼3"></Button>
    <Button Grid.Row="0" Grid.Column="3" Content="버튼4"></Button>

    <Button Grid.Row="1" Grid.RowSpan="2" Width="200" Grid.Column="0" Content="버튼1-1"></Button>
    <Button Grid.Row="1" Grid.Column="1" Content="버튼2"></Button>
    <Button Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Content="버튼3"></Button>
</Grid>

 

WarpPanel은 CSS의 felx:wrap과 같은 기능이다.

하위 항목들이 창을 넘어가지 않고 아래로 내려온다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
    </StackPanel>
    <WrapPanel Orientation="Horizontal" Grid.Row="1" Margin="5">
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
        <Button Content="버튼1"/>
    </WrapPanel>
</Grid>