WPF - 如何通過按下按鈕來複制控件/整個網格？

Question

我是WPF的新手，我試圖製作一個控件，它會在每次打到特定控件時擴展我的表單，直到它達到最多7次。

這是形式： https://i.imgur.com/50tzCSy.png

<Border Padding="10"> 
    <StackPanel> 
     <TextBlock Text="Insert a file or expand to insert more file at once." Margin="0 10"/> 

     <!-- Add File --> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="4*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 

      <TextBlock Grid.Column="0" Text="File Name:" FontWeight="Bold" Margin="0 10" /> 
      <TextBox Grid.Column="1" Height="20" Margin="10 0 0 0" /> 
      <Button Grid.Column="2" Content="Test" Height="20" Width="50" /> 
     </Grid> 

     <ItemsControl ItemsSource="{Binding AllChildren}" ItemTemplate="{StaticResource ChildTemplate}" /> 

     <!-- Buttons --> 
     <Grid Margin="0 10"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 

      <Button Grid.Column="0" Margin="0 0 10 0" Content="Save" /> 
      <Button Grid.Column="1" Content="Expand" Grid.ColumnSpan="2" Margin="0.2,0,123.6,0.2" Click="Button_Click" /> 
      <Button Grid.Column="2" Margin="10 0 0 0" Content="Cancel" /> 
     </Grid> 

    </StackPanel> 
</Border> 

我嘗試，直到它達到最高的7個重複複製的網格。

我該如何通過Button事件處理程序代碼做到這一點？

Answer 1

這是我的評論的插圖。我儘量保持ViewModel儘可能簡單和通用，所以它應該看起來是空的。它由你來修改它，並最終把一些DataBinding（我會推薦它）。

讓我們知道你是否需要更具體的東西。在XAML：

<Border Padding="10"> 
    <StackPanel> 
     <TextBlock Text="Insert a file or expand to insert more file at once." Margin="0 10"/> 

     <ListBox Name="DynamicList" HorizontalContentAlignment="Stretch" > 
      <ListBox.Resources> 
       <DataTemplate DataType="{x:Type local:FileM}"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="4*" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 

         <TextBlock Grid.Column="0" Text="File Name:" FontWeight="Bold" Margin="0 10" /> 
         <TextBox Grid.Column="1" Height="20" Margin="10 0 0 0" /> 
         <Button Grid.Column="2" Content="Test" Height="20" Width="50" /> 
        </Grid> 
       </DataTemplate> 
      </ListBox.Resources> 
     </ListBox> 
     <!--Since I don'T have any information about it, I removed the ItemsControl part--> 
     <Grid Margin="0 10"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 

      <Button Grid.Column="0" Margin="0 0 10 0" Content="Save" /> 
      <Button Grid.Column="1" Content="Expand" Click="Button_Click" /> 
      <Button Grid.Column="2" Margin="10 0 0 0" Content="Cancel" /> 
     </Grid> 
    </StackPanel> 
</Border> 

而後面的代碼：

public class FileM 
{ 
} 

public partial class MainWindow : Window 
{ 
    public ObservableCollection<FileM> ListFiles = new ObservableCollection<FileM>(); 

    public MainWindow() 
    { 
     InitializeComponent(); 
     DynamicList.ItemsSource = ListFiles; 
    } 

    private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     if(ListFiles.Count<7){ListFiles.Add(new FileM());} 
    } 

}