如何定位网格的子元素

此示例演示如何使用在 Grid 上定义的 get 和 set 方法定位子元素。

以下示例定义具有三列和三行的父 Grid 元素(grid1)。 在列位置零、行位置零处,子 Rectangle 元素(rect1)被添加到 GridButton 元素表示可以调用的方法,以重新定位 Grid中的 Rectangle 元素。 当用户单击按钮时,将激活相关方法。

<Window  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="grid_getset_methods.Window1"
    Title="Grid Methods Sample">
    <Border BorderBrush="Black" Background="White" BorderThickness="2">
    <DockPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10">
      <TextBlock FontSize="20" FontWeight="Bold" DockPanel.Dock="Top">Grid Methods Sample</TextBlock>
      <TextBlock DockPanel.Dock="Top">Click the buttons on the left to reposition the Rectangle below using methods defined on Grid.</TextBlock>
        <Grid Margin="0,10,15,0" DockPanel.Dock="Left">
          <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition/>
          </Grid.RowDefinitions>
        <!-- <Snippet1> -->
          <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>
        <!-- </Snippet1> -->

      <TextBlock DockPanel.Dock="Top" Name="txt1"/>
      <TextBlock DockPanel.Dock="Top" Name="txt2"/>
      <TextBlock DockPanel.Dock="Top" Name="txt3"/>
      <TextBlock DockPanel.Dock="Top" Name="txt4"/>
    </DockPanel>
    </Border>	
</Window>

以下后置代码示例处理由按钮 Click 事件触发的方法。 此示例将这些方法调用写入 TextBlock 元素,这些元素使用相关的 get 方法将新属性值输出为字符串。

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();
}
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

下面是已完成的结果!

屏幕截图描绘了包含两列的 WPF 用户界面,右侧有一个 3 x 3 网格,左侧有用于在网格的列和行之间移动彩色矩形的按钮

另请参阅