[C#/WINUI3/.NET6] Grid 엘리먼트 : Row/Column 첨부 속성 사용하기

■ Grid 엘리먼트의 Row/Column 첨부 속성을 사용하는 방법을 보여준다.

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"  />
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="*"  />
        </Grid.ColumnDefinitions>
        <Grid Name="Control1" Grid.Column="0"
            Width="240"
            Height="160"
            RowDefinitions ="50, Auto, *"
            ColumnDefinitions="50, Auto, *"
            Background="Gray">
            <Grid.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Width"  Value="40" />
                    <Setter Property="Height" Value="40" />
                </Style>
            </Grid.Resources>
            <Rectangle Name="Rectangle1"
                Grid.Row="{x:Bind (x:Int32)rowSlider.Value, Mode=OneWay}"
                Grid.Column="{x:Bind (x:Int32)columnSlider.Value, Mode=OneWay}"
                Width="50"
                Height="50"
                Fill="Red" />
            <Rectangle Grid.Row="1" Grid.Column="0"
                Fill="Blue" />
            <Rectangle Grid.Row="0" Grid.Column="1"
                Fill="Green" />
            <Rectangle Grid.Row="1" Grid.Column="1"
                Fill="Yellow" />
        </Grid>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Orientation="Horizontal">
            <Slider Name="rowSlider"
                VerticalAlignment="Top"
                Height="110"
                Minimum="0"
                Maximum="2"
                StepFrequency="1"
                Orientation="Vertical"
                IsDirectionReversed="True"
                TickFrequency="1"
                SnapsTo="Ticks">
                <Slider.Header>
                    <TextBlock
                        Margin="0 0 0 10"
                        Text="Grid.Row" />
                </Slider.Header>
            </Slider>
            <Slider Name="columnSlider"
                Margin="15 0 0 0"
                Width="100"
                Header="Grid.Column"
                Minimum="0"
                Maximum="2"
                StepFrequency="1"
                TickFrequency="1"
                SnapsTo="Ticks" />
        </StackPanel>
    </Grid>
</Window>

<?xml version="1.0" encoding="utf-8"?>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:TestProject"

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Name="Control1" Grid.Column="0"

Width="240"

Height="160"

RowDefinitions ="50, Auto, *"

ColumnDefinitions="50, Auto, *"

Background="Gray">

<Grid.Resources>

</Style>

</Grid.Resources>

<Rectangle Name="Rectangle1"

Grid.Row="{x:Bind (x:Int32)rowSlider.Value, Mode=OneWay}"

Grid.Column="{x:Bind (x:Int32)columnSlider.Value, Mode=OneWay}"

Width="50"

Height="50"

Fill="Red" />

<Rectangle Grid.Row="1" Grid.Column="0"

Fill="Blue" />

<Rectangle Grid.Row="0" Grid.Column="1"

Fill="Green" />

<Rectangle Grid.Row="1" Grid.Column="1"

Fill="Yellow" />

</Grid>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Slider Name="rowSlider"

VerticalAlignment="Top"

Height="110"

Minimum="0"

Maximum="2"

StepFrequency="1"

Orientation="Vertical"

IsDirectionReversed="True"

TickFrequency="1"

SnapsTo="Ticks">

<Slider.Header>

<TextBlock

Margin="0 0 0 10"

Text="Grid.Row" />

</Slider.Header>

</Slider>

<Slider Name="columnSlider"

Margin="15 0 0 0"

Width="100"

Header="Grid.Column"

Minimum="0"

Maximum="2"

StepFrequency="1"

TickFrequency="1"

SnapsTo="Ticks" />

</StackPanel>

</Grid>

</Window>

TestProject.zip