动态添加和删除堆栈面板(Dynamically Add and Remove stack panel)

动态添加和删除堆栈面板(Dynamically Add and Remove stack panel)

我有一个WrapPanel （带有绿色背景）在ListBox （灰色背景）内。

我试图在WrapPanel多次动态添加一个StackPanel （通过点击给定图像下面的按钮）。

StackPanel包含一个Button ，其内容为“X”。 当单击此按钮时，我想要移除各个StackPanel对象（带有橙色背景）。

如何解决？

I have one WrapPanel (with green background) inside of a ListBox(with gray background).

I am trying to dynamically add a StackPanel multiple times (by clicking on the button below given image) in the WrapPanel.

The StackPanel contains a Button which has Content “X”. I want to remove individual StackPanel objects (with orange background) when this button is clicked.

How can it be worked out?

最满意答案

数据绑定和数据模板 + 指挥

你的问题很广泛。 基本概述是创建可绑定集合，为它们创建数据模板，并使用命令或事件从其中删除单击的项目。

使用内部使用WrapPanel进行布局的ItemsControl的DataTemplating示例：

<ItemsControl ItemsSource="{Binding DpData}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <!-- The content goes here, X-Button will be overlayed --> <Button HorizontalAlignment="Right" VerticalAlignment="Top" Content="X" Click="RemoveItem_Click"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> // Does not need to be a dependency property. public static readonly DependencyProperty DpDataProperty = DependencyProperty.Register("DpData", typeof(ObservableCollection<Employee>), typeof(MainWindow), new UIPropertyMetadata(new ObservableCollection<Employee>())); public ObservableCollection<Employee> DpData { get { return (ObservableCollection<Employee>)GetValue(DpDataProperty); } set { SetValue(DpDataProperty, value); } } // For simplicity i use an event instead of a command. private void RemoveItem_Click(object sender, RoutedEventArgs e) { var button = (FrameworkElement)sender; var emp = (Employee)button.DataContext; DpData.Remove(emp); }

如果你这样做，你当然不应该在添加按钮点击时添加一个面板，而是向该集合添加一个数据项。 面板将自动生成。

Data Binding & Data Templating + Commanding

Your question is kind of extensive. The basic outline is to create bindable collections, data template them, and remove the clicked item from it using a command or event.

Example of DataTemplating using an ItemsControl that internally uses a WrapPanel for the layout:

<ItemsControl ItemsSource="{Binding DpData}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <!-- The content goes here, X-Button will be overlayed --> <Button HorizontalAlignment="Right" VerticalAlignment="Top" Content="X" Click="RemoveItem_Click"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> // Does not need to be a dependency property. public static readonly DependencyProperty DpDataProperty = DependencyProperty.Register("DpData", typeof(ObservableCollection<Employee>), typeof(MainWindow), new UIPropertyMetadata(new ObservableCollection<Employee>())); public ObservableCollection<Employee> DpData { get { return (ObservableCollection<Employee>)GetValue(DpDataProperty); } set { SetValue(DpDataProperty, value); } } // For simplicity i use an event instead of a command. private void RemoveItem_Click(object sender, RoutedEventArgs e) { var button = (FrameworkElement)sender; var emp = (Employee)button.DataContext; DpData.Remove(emp); }

If you do it like this you should of course not add a panel upon add-button click but a data item to the collection. The panel will be generated automatically.