none
WPF如何动态删除 Grid 行 RRS feed

  • 问题

  • 使用 grid.Children.RemoveRange()

    可以把一行数据删除但是行还在。

    如果使用  grid.RowDefinitions.RemoveAt(),删除一行却出现了图中的问题。

    动态生成了 7 行,删除第一行之后 :grid.RowDefinitions.RemoveAt(0)

    删除全部行:grid.RowDefinitions.Clear()

    变成了这个样子,到底该如何动态的删除一行呢?

    2013年12月14日 4:23

答案

  • 你好,

    对于你的问题,应该是需要动态添加Grid行定义和后台设置Grid.Row和Grid.Column.

    在我的例子中,先给Grid添加了一个行定义,三个列定义:

    <Grid x:Name="grid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
    
    </Grid>

    点击添加按钮后,需要自动计算当前的行数和列数,然后使用Grid.SetRow和Grid.SetColumn方法设置行列:

    int rowcount = 0;
    int columncount = 0;
    
    private void ButtonAdd_Click(object sender, RoutedEventArgs e)
    {
                TextBlock tb = new TextBlock();
                tb.Text = "TextBlock" + (grid.Children.Count + 1).ToString();
    
                if (columncount == 3)
                {
                    RowDefinition row = new RowDefinition();
                    grid.RowDefinitions.Add(row);
                    Grid.SetRow(tb, ++rowcount);
                }
                else
                    Grid.SetRow(tb, rowcount);
    
                columncount = (columncount) % 3;
                Grid.SetColumn(tb, columncount);
                columncount++;
    
                tb.Width = 100;
                tb.Height = 50;
                grid.Children.Add(tb);
    }

    点击添加按钮后, 删除首行,然后删除一个行定义,最后使用foreach枚举Grid子元素,分别把Grid.Row减1:

    private void ButtonRemove_Click(object sender, RoutedEventArgs e)
    {
                if (grid.Children.Count > 0)
                {
                    grid.Children.RemoveRange(0, 3);
                    grid.RowDefinitions.RemoveAt(0); //删除行定义
                    foreach (TextBlock tb in grid.Children)
                    {
                        Grid.SetRow(tb, (Grid.GetRow(tb) - 1));//减1
                    }
                }
    }

    Screenshot:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • 已标记为答案 janfrayda 2013年12月16日 5:57
    2013年12月16日 3:07
    版主

全部回复

  • 你好,

    对于你的问题,应该是需要动态添加Grid行定义和后台设置Grid.Row和Grid.Column.

    在我的例子中,先给Grid添加了一个行定义,三个列定义:

    <Grid x:Name="grid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
    
    </Grid>

    点击添加按钮后,需要自动计算当前的行数和列数,然后使用Grid.SetRow和Grid.SetColumn方法设置行列:

    int rowcount = 0;
    int columncount = 0;
    
    private void ButtonAdd_Click(object sender, RoutedEventArgs e)
    {
                TextBlock tb = new TextBlock();
                tb.Text = "TextBlock" + (grid.Children.Count + 1).ToString();
    
                if (columncount == 3)
                {
                    RowDefinition row = new RowDefinition();
                    grid.RowDefinitions.Add(row);
                    Grid.SetRow(tb, ++rowcount);
                }
                else
                    Grid.SetRow(tb, rowcount);
    
                columncount = (columncount) % 3;
                Grid.SetColumn(tb, columncount);
                columncount++;
    
                tb.Width = 100;
                tb.Height = 50;
                grid.Children.Add(tb);
    }

    点击添加按钮后, 删除首行,然后删除一个行定义,最后使用foreach枚举Grid子元素,分别把Grid.Row减1:

    private void ButtonRemove_Click(object sender, RoutedEventArgs e)
    {
                if (grid.Children.Count > 0)
                {
                    grid.Children.RemoveRange(0, 3);
                    grid.RowDefinitions.RemoveAt(0); //删除行定义
                    foreach (TextBlock tb in grid.Children)
                    {
                        Grid.SetRow(tb, (Grid.GetRow(tb) - 1));//减1
                    }
                }
    }

    Screenshot:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • 已标记为答案 janfrayda 2013年12月16日 5:57
    2013年12月16日 3:07
    版主
  • 你好,

    太感谢了!

    按照你的代码重新测试了下成功了!

    问题就出在了没有重新设置剩余的 UIElement 的行索引。


    Janfrayda Yu

    2013年12月16日 5:57
  • 光想着用C#实现了,把 XAML 代码都忘了,结合 XAML 代码想一下就很容易理解了,

    1. Grid 如果不设置行定义和列定义,则 Grid 默认为 1 行, 1 列;

    2. Grid 中的元素如果不设置 行索引 和 列索引,则元素默认位于Grid 中的第 1 行,第 1 列;

    3. Grid 中的元素如果设置的 行索引 大于 行定义的数量,则元素默认位于 Grid 中的最后一行;

    4. Grid 中的元素如果设置的 列索引 大于 列定义的数量,则元素默认位于 Grid 中的最后一列;

    第 1 幅图就是上面第 3 条中的情况,

    第 2 幅图就是上面第 1 + 3 条中的情况(删除了所有行定义)。


    Janfrayda Yu

    2013年12月16日 8:21