动态添加和删除堆栈面板

Question

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

我正在尝试在WrapPanel 中多次动态添加StackPanel（通过单击给定图像下方的按钮）。

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

如何解决？

Answer 1

Data Binding & Data Templating + Commanding

你的问题有点广泛。基本大纲是创建可绑定的集合，数据模板，并使用命令或事件从中删除单击的项目。

使用内部使用 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);
}

如果您这样做，您当然不应该在单击添加按钮时添加面板，而是将数据项添加到集合中。面板会自动生成。

Answer 2

这是最终代码............

MainWindow.xaml

<Window.Resources>
    <DataTemplate x:Key="itemsTemplate">
        <!-- This might also be included in a UserControl -->
        <Border Width="200" Height="200" CornerRadius="10,10,10,10" Margin="4,4,0,0" Padding="4,4,4,4">
            <Border.Background>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="AliceBlue" Offset="0"/>
                    <GradientStop Color="Bisque" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Grid >
                <Button HorizontalAlignment="Right" VerticalAlignment="Top" Width="30" Height="20"  Content="X" Background="Red" Click="Remove_Click"></Button>
                <WrapPanel Orientation="Vertical">
                <TextBox Text="{Binding Name}" Margin="10,10" Height="20"  ></TextBox>
                    <TextBox Text="{Binding City}" Margin="10,10" Height="20" ></TextBox>
                    <TextBox Text="{Binding Age}" Margin="10,10" Height="20"></TextBox>
                    <TextBox Text="{Binding Count}" Margin="10,10" Height="20" ></TextBox>
                </WrapPanel>
            </Grid>
        </Border>
    </DataTemplate>
</Window.Resources>
<Grid>
    <ItemsControl 

              Width="Auto"
              Height="Auto"
              ItemsSource="{Binding ElementName=mainWindow, Path=EmployeeCollection}"
              ItemTemplate="{StaticResource itemsTemplate}"  Background="Aqua">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
    <Button Content="Add" Height="23" HorizontalAlignment="Left" Margin="487,287,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="Add_Click" />
</Grid>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace DynamicAddRemovePanel
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Employee> employeeCollection = new ObservableCollection<Employee>();

        public ObservableCollection<Employee> EmployeeCollection
        {
            get
            {
                return this.employeeCollection;
            }
            set
            {
                this.employeeCollection = value;
            }
        }
        public MainWindow()
        {
            InitializeComponent();
        }




        public class Employee
        {
            public string Name { get; set; }
            public string City { get; set; }
            public int Age { get; set; }
            public static int Count { get; set; }
            public Employee()
            {
                Count++;
            }
            public Employee(string nameArg, string cityArg, int ageArg)
            {
                this.Name = nameArg;
                this.City = cityArg;
                this.Age = ageArg;
                Count++;
           }
        }

        private void Add_Click(object sender, RoutedEventArgs e)
        {
            employeeCollection.Add(new Employee("Pritesh","Abad",22));
        }
        private void Remove_Click(object sender, RoutedEventArgs e)
        {
            var emp = (sender as FrameworkElement).DataContext as Employee;
            employeeCollection.Remove(emp);
        }


    }
}