Dynamically create user controls to WPF

See more:

C#

WPF

I am having a WPF User control and my requirement is to add few contents to a Textblocks by creating the dynamically through code in a loop. So the problem here is i have created a rectangle box and added those text blocks inside that but when the loop count increases the data inside that overlaps and comes out of rectangular block. My requirement here is to link those textblocks to rectangle box and if the content crosses the height which we created then a scroll bar should be activated so that the data is not overlapped and if we scroll data can be seen easily inside that rectangle box.

What I have tried:

XAML File

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="441.892" Width="219.595"
        Loaded="clr-namespace:WpfApplication1_Loaded">
    <Grid x:Name="ItemHolder" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="0*"/>
            <RowDefinition/>
            <RowDefinition Height="0*"/>
        </Grid.RowDefinitions>
        <StackPanel Margin="19,13,140,274" Orientation="Vertical" Grid.RowSpan="2">
            <DockPanel Height="13">
                <Viewbox HorizontalAlignment="Left" VerticalAlignment="Top" Width="43" Height="13" Stretch="Fill">
                    <TextBlock x:Name="txt_from_text" TextWrapping="Wrap" RenderTransformOrigin="-0.757,0.933" Height="13" Width="43" FontWeight="Bold" FontFamily="Arial" Visibility="Collapsed" Grid.RowSpan="2" Foreground="#FF8B8989"><Run Text="Emplyoee"/><LineBreak/><Run/></TextBlock>
                </Viewbox>
            </DockPanel>
        </StackPanel>

        
        <Rectangle x:Name="rectangle_block" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="296" Margin="10,71,0,0" Stroke="#FFB0AEAE" VerticalAlignment="Top" Width="186" Grid.RowSpan="2" ScrollViewer.VerticalScrollBarVisibility="Auto"/>

        
    </Grid>
</Window> 

C# Code

int dateMargin = 91;
int nameMargin = 115;
int timeMargin = 112;
int actionMargin = 135;

for (int i = 0; i < size; i++)
{
    TextBlock datefield = new TextBlock();
    datefield.HorizontalAlignment = HorizontalAlignment.Left;
    datefield.Margin = new Thickness(62, dateMargin, 0, 0);
    datefield.TextWrapping = TextWrapping.Wrap;
    datefield.VerticalAlignment = VerticalAlignment.Top;
    Grid.SetRowSpan(datefield, 2);
    datefield.Text = date;
    ItemHolder.Children.Add(datefield);
    dateMargin += 81;


    TextBlock nameField = new TextBlock();
    nameField.HorizontalAlignment = HorizontalAlignment.Left;
    nameField.Margin = new Thickness(19, nameMargin, 0, 0);
    nameField.TextWrapping = TextWrapping.Wrap;
    nameField.VerticalAlignment = VerticalAlignment.Top;
    nameField.FontSize = 11;
    Grid.SetRowSpan(nameField, 2);
    nameField.FontFamily = new FontFamily("Arial");
    nameField.Text = Name;
    ItemHolder.Children.Add(nameField);
    nameMargin += 79;

    TextBlock timeField = new TextBlock();
    timeField.HorizontalAlignment = HorizontalAlignment.Left;
    timeField.Margin = new Thickness(135, timeMargin, 0, 0);
    timeField.TextWrapping = TextWrapping.Wrap;
    timeField.VerticalAlignment = VerticalAlignment.Top;
    timeField.Height = 16;
    timeField.FontSize = 11;
    Grid.SetRowSpan(timeField, 2);
    timeField.Text = time;
    ItemHolder.Children.Add(timeField);
    timeMargin += 79;


}

Please suggest the best way to add the scroll bar if the data is more than the limit of rectangle box so that it doesnt overlap