动态添加和删除堆叠面板

Question

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

我想动态地添加StackPanel多次（通过点击给定图像下方的按钮）在WrapPanel。

StackPanel包含具有内容“X”的Button。点击此按钮时，我想删除单个的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); 
     } 


    } 
}