Visual Studio/WPF > 컨트롤 > Grid

운영 환경
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2

@ WPF 4.5 입문 by 오타 카즈키
No.2379/9985

Grid 컨트롤은 테이블 레이아웃을 수행하는 WPF 컨트롤입니다.

기본적인 것



설정할 속성으로
  • ShowGridLines
  • RowDefinitions
  • ColumnDefinitions
  • Grid.Row 첨부 속성
  • Grid.Column 첨부 속성

  • 등이 있는 것 같다.

    XAML
    <Window x:Class="_170424_t0650_grid.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:_170424_t0650_grid"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <!-- 1st line -->
            <Label Content="X" Grid.Row="0" Grid.Column="0"></Label>
            <Label Content="X" Grid.Row="0" Grid.Column="1"></Label>
            <Label Content="O" Grid.Row="0" Grid.Column="2"></Label>
            <!-- 2nd line -->
            <Label Content="O" Grid.Row="1" Grid.Column="0"></Label>
            <Label Content="X" Grid.Row="1" Grid.Column="1"></Label>
            <Label Content="O" Grid.Row="1" Grid.Column="2"></Label>
            <!-- 3rd line -->
            <Label Content="O" Grid.Row="2" Grid.Column="0"></Label>
            <Label Content="O" Grid.Row="2" Grid.Column="1"></Label>
            <Label Content="X" Grid.Row="2" Grid.Column="2"></Label>
        </Grid>
    </Window>
    



    Height, Width



    ColumnDefinition과 RowDefinition의 Width, Height를 지정하는 것으로, Grid의 높이와 폭을 설정할 수 있는 것 같다.
    황금 비율 의 설정을 해 보았다.

    XAML
    <Window x:Class="_170424_t0650_grid.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:_170424_t0650_grid"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1.618*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1.618*"/>
            </Grid.ColumnDefinitions>
            <Grid ShowGridLines="True"  Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1.618*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1.618*"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </Grid>
    </Window>
    



    Grid.ColumnSpan



    Grid.ColumnSpan을 설정하여 여러 Column에 걸치는 설정도 할 수 있는 것 같다.
    Grid.RowSpan도 있다.

    XAML
    <Window x:Class="_170424_t0650_grid.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:_170424_t0650_grid"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="60"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <Border Background="LimeGreen" Grid.ColumnSpan="2"
                    Grid.Column="0" Grid.Row="1"/>
            <Label Grid.Column="0" Grid.Row="1" Foreground="White">
                Visual Studio / WPF > コントロール > Grid
            </Label>
            <Label Grid.Column="1" Grid.Row="1" Foreground="White">
                0 いいね 0 コメント
            </Label>
        </Grid>
    </Window>
    

    좋은 웹페이지 즐겨찾기