动态添加和删除堆栈面板

Question

我有一个WrapPanel(绿色背景)ListBox(灰色背景).

我试图动态添加StackPanel多次(通过点击给定图像下面的按钮)WrapPanel.

该StackPanel包含Button哪些内容具有"X".StackPanel单击此按钮时,我想删除单个对象(橙色背景).

怎么能解决？

Answer 1

数据绑定和数据模板 + 命令

你的问题很广泛.基本概要是创建可绑定集合,数据模板,并使用命令或事件从中删除单击的项目.

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

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

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