How to Clone a whole grid of Controls?

Question

I have the following code and basically what i am not able to figure out is how to clone the whole grid and make a blank copy of them side by side.... for a clear understanding this is something to do with hospital application and the grid is related to a pregnancy so when said 'ADD CHILD' button a whole new grid should be created during run time, thanks for the help below is a link that might help people cause i tried it but not sure how to display it

How can you clone a WPF object?

Answer 1

You should put the object you are want to "clone" in a DataTemplate and reference this template from an ItemsControl, then when you need another grid add another item to the items control (or even better to the list the control is bound to) and the ItemsControl will create a new grid and bind it the new object.

For an example take a look at this post on my blog.

Here is an example for this application (I left only the relevant parts and I didn't test it, so there are probably some typos there):

<Window ... >
   <Window.Resources>
      <DataTemplate x:Key="ChildTemplate">
         <Grid>
            ...
            <TextBlock Text="Delivery Date:" Grid.Column="0" Grid.Row="0"/>
            <TextBox Text="{Binding DeliveryDate}" Grid.Column="1" Grid.Row="0"/>
            <TextBlock Text="Delivery Time:" Grid.Column="0" Grid.Row="1"/>
            <TextBox Text="{Binding DeliveryTime}" Grid.Column="1" Grid.Row="1"/>
            ...
         </Grid>
      </DataTemplate>
   </Window.Resources>
   ...
      <Button Content="AddChild" Click="AddChildClick"/>
   ...
      <ScrollViewer>
          <ItemsControl ItemsSource="{Binding AllChildren}" ItemsTemplate="{StaticResource ChildTemplate}">
              <ItemsControl.PanelTemplate>
                  <ItemsPanelTemplate><StackPanel Orientation="Horizontal"/></ItemPanelTemplate>
              <ItemsControl.PanelTemplate>
      </ScrollViewer>
    ...
</Window>

And in cs:

1. Set an object with all the form data as the Window's DataContext. I'll call this class PostDelveryData.
2. Create another class with the repeating data. I'll call it ChildDeliveryData.
3. Add a property of type ObservableCollection<ChildDeliveryData> called AllChildren to PostDeliveryData; it's important it'll be ObservableCollection and not any other type of collection.

4. Now, for the magic:

   private void AddChildClick(object sender, RoutedEvetnArgs e)
   {
      ((PostDeliveryData)DataContext).AllChildren.Add(new ChildDeliveryData());
   }
   

And when you add the new item to the list another copy of the entire data template will be added.

Answer 2

I'm not sure that you're using the correct approach here. I would approach the problem by creating a "ChildGridControl" with a Child property, and let the Child property handle the databinding. Adding a new child to the GUI would involve creating a new instance of the ChildGridControl.

Answer 3

If I am understanding correctly, you should create a UserControl, which wraps your Grid and subsequent controls inside. And use this User control anywhere you wanted to replicate that UI.