方法 : グリッドの子要素を配置する

この例では、Grid 上で定義された get メソッドおよび set メソッドを使用して子要素を配置する方法を示します。

使用例

それぞれ 3 つの列と行を持つ親 Grid 要素 (grid1) を定義する例を次に示します。 子 Rectangle 要素 (rect1) は、Grid の列 0、行 0 の位置に追加されます。 Button は、Grid 内で Rectangle 要素の位置を変更するために呼び出すことができるメソッドを表します。 ボタンをクリックすると、関連メソッドがアクティブになります。

    <StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Orientation="Vertical">
      <Button Click="setCol0">Move Rectangle to Column 0</Button>
      <Button Click="setCol1">Move Rectangle to Column 1</Button>
      <Button Click="setCol2" Margin="0,0,0,10">Move Rectangle to Column 2</Button>
      <Button Click="setRow0">Move Rectangle to Row 0</Button>
      <Button Click="setRow1">Move Rectangle to Row 1</Button>
      <Button Click="setRow2" Margin="0,0,0,10">Move Rectangle to Row 2</Button>
      <Button Click="setColspan">Span All Columns</Button>
      <Button Click="setRowspan">Span All Rows</Button>
      <Button Click="clearAll">Clear All</Button>
    </StackPanel>
  </Grid>
<Grid DockPanel.Dock="Top" Margin="0,10,15,0" HorizontalAlignment="Left" Name="grid1" ShowGridLines="True" Width="400" Height="400" Background="LightSteelBlue">
  <Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition/>
  <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
  <RowDefinition/>
  <RowDefinition/>
  <RowDefinition/>
</Grid.RowDefinitions>

  <Rectangle Name="rect1" Fill="Silver" Grid.Column="0" Grid.Row="0"/>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="0" Margin="5">Column 0, Row 0</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="0" Margin="5">Column 1, Row 0</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="2" Grid.Row="0" Margin="5">Column 2, Row 0</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="1" Margin="5">Column 0, Row 1</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="1" Margin="5">Column 1, Row 1</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="2" Grid.Row="1" Margin="5">Column 2, Row 1</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="2" Margin="5">Column 0, Row 2</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="2" Margin="5">Column 1, Row 2</TextBlock>
  <TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="2" Grid.Row="2" Margin="5">Column 2, Row 2</TextBlock>
</Grid>

次の分離コードの例では、ボタンの Click イベントによって実行されるメソッドを処理します。 この例では、これらのメソッド呼び出しを TextBlock 要素に書き出し、関連する get メソッドを使用して、新しいプロパティ値を文字列として出力します。

Private Sub setCol0(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetColumn(rect1, 0)
    txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString()
End Sub

Private Sub setCol1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetColumn(rect1, 1)
    txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString()
End Sub

Private Sub setCol2(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetColumn(rect1, 2)
    txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString()
End Sub

Private Sub setRow0(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetRow(rect1, 0)
    txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString()
End Sub

Private Sub setRow1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetRow(rect1, 1)
    txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString()
End Sub

Private Sub setRow2(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetRow(rect1, 2)
    txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString()
End Sub

Private Sub setColspan(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetColumnSpan(rect1, 3)
    txt3.Text = "ColumnSpan is set to " + Grid.GetColumnSpan(rect1).ToString()
End Sub
Private Sub setRowspan(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Grid.SetRowSpan(rect1, 3)
    txt4.Text = "RowSpan is set to " + Grid.GetRowSpan(rect1).ToString()
End Sub
        private void setCol0(object sender, RoutedEventArgs e) 
        {
            Grid.SetColumn(rect1, 0);
            txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString();

        }
        private void setCol1(object sender, RoutedEventArgs e)
        {
            Grid.SetColumn(rect1, 1);
            txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString();
        }
        private void setCol2(object sender, RoutedEventArgs e)
        {
            Grid.SetColumn(rect1, 2);
            txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString();
        }
        private void setRow0(object sender, RoutedEventArgs e)
        {
            Grid.SetRow(rect1, 0);
            txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString();
        }
        private void setRow1(object sender, RoutedEventArgs e)
        {
            Grid.SetRow(rect1, 1);
            txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString();
        }
        private void setRow2(object sender, RoutedEventArgs e)
        {
            Grid.SetRow(rect1, 2);
            txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString();
        }
        private void setColspan(object sender, RoutedEventArgs e)
        {
            Grid.SetColumnSpan(rect1, 3);
            txt3.Text = "ColumnSpan is set to " + Grid.GetColumnSpan(rect1).ToString();
        }
        private void setRowspan(object sender, RoutedEventArgs e)
        {
            Grid.SetRowSpan(rect1, 3);
            txt4.Text = "RowSpan is set to " + Grid.GetRowSpan(rect1).ToString();
        }

参照

参照

Grid

概念

パネルの概要