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 개 중복의 최대에 도달 할 때까지 그리드를 복제하려고 :

이

는 형태입니다.

버튼 이벤트 핸들러 코드를 통해 어떻게 만들 수 있습니까?

Answer 1

다음은 내 댓글의 삽화입니다. ViewModel을 가능한 간단하고 포괄적으로 유지하려고하므로 비어 있어야합니다. 그것은 당신이 그것을 수정하고 결국 일부 데이터 바인딩을 넣어 (나는 그것을 권하고 싶습니다)입니다.

좀 더 구체적으로 알려면 알려주세요. 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());} 
    } 

}