如何从网格控件中删除选定的行

Question

I have created a Grid and adding rows dynamically. And I have a remove button in every row. On click of that remove button I want to remove that particular row.

I am quite new to WPF, can some one help me out to achieve this.

Thanks.

Xaml code:

   <Grid Grid.Column="2"  Visibility="Collapsed" Name="operationalGrid">
       <Button Height="25" Name="btnRemove" Width="24" Style="{DynamicResource ButtonStyle}" Grid.Column="4" Click="btnRemove_Click">
            <materialDesign:PackIcon Background="Transparent" Height="25" Width="30" Cursor="Hand" ToolTip="Remove" Kind="Minus" HorizontalAlignment="Center" Foreground="White"  VerticalAlignment="Top" Margin="0,0,0,0">
            </materialDesign:PackIcon>
       </Button>
   </Grid>

c# code:

Adding rows:

   RowDefinition row = new RowDefinition();
   row.Height = GridLength.Auto;
   if (ucDynamicControls != null)
       ucDynamicControls.btnToggle.Visibility = ucDynamicControls.btnToggle.Visibility = Visibility.Visible;
       ucDynamicControls = new ucControls();
       grdContols.RowDefinitions.Add(row);
       Grid.SetRow(ucDynamicControls, controlCount++);
       grdContols.Children.Add(ucDynamicControls);  

Answer 1

Instead of using row definitions, you may use ItemsControl.

As example:

First define your ItemTemplate

<ItemsControl Name="icTodoList">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="0,0,0,5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Title}" />
                <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Define your ItemsPanel

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="3" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Full tutorial: https://www.wpf-tutorial.com/list-controls/itemscontrol/

Answer 2

You have come up with a very complex, one might say, perverse way of accomplishing the task. A typical implementation is to create a container element with data. Then the collection with these elements is passed to ItemsControl. And he already visual each element as it should. In this implementation: deleting a row is removing an item from the collection.

In your implementation, you need to parse the Visual Element Tree. It is possible, but difficult. The button, as I understand it, is inside the Grid row. This Grid is inside ucDynamicControls. And the outer Grid row already contains this ucDynamicControls.

If I understood correctly, then in the button event it is necessary to go up from the button to the Grid containing ucDynamicControls. In this Grid, remove the ucDynamicControls element from the Children collection. And the line (in which it) is to collapse: Heigh = 0.

And it's not clear why you chose Grid, and StackPanel for the ucDynamicControls collection? If you use a StackPanel, then it will be possible not to set the line number and for it will be enough just to remove the desired ucDynamicControls from the collection.

An example implementation (if I understand your code correctly):

    private void btnRemove_Click(object sender, RoutedEventArgs e)
    {
        if (!(sender is Button button))
            return;

        DependencyObject child = button;
        DependencyObject parent;
        while (!((parent = LogicalTreeHelper.GetParent(child)) is UcDynamicControls) && parent != null)
            child = parent;

        if (parent == null)
            return;

        UcDynamicControls ucDynamicControls = (UcDynamicControls)parent;
        int row = Grid.GetRow(ucDynamicControls);

        Grid grid = LogicalTreeHelper.GetParent(ucDynamicControls) as Grid;

        if (grid == null || grid.RowDefinitions.Count <= row)
            return;

        grid.RowDefinitions[row].Height = new GridLength(0);;
        grid.Children.Remove(ucDynamicControls);

    }