WrapPanel not wrapping content

Question

I have the following xaml code in a user control.

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" MinWidth="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="scEmails">
                <ItemsControl Focusable="False" ItemTemplate="{StaticResource UserDataTemplate}">
                    <ItemsControl.Items>
                        <system:String>123</system:String>
                        <system:String>123</system:String>
                        <system:String>123</system:String>
                        <system:String>123</system:String>
                        <system:String>12eee3</system:String>
                        <system:String>123eee</system:String>
                        <system:String>123fefef</system:String>
                    </ItemsControl.Items>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </ScrollViewer>
            <TextBox Grid.Column="1" TextWrapping="NoWrap" Margin="0,0,0,0"  VerticalAlignment="Center" PreviewKeyDown="txtAuto_PreviewKeyDown" MinWidth="50" />
        </Grid>

Here I have a set of items to be shown in the left of a text box. The rendering requirement is:

1. If there are no or little items, let the items occupy as many as space they needed.
2. If there are too many, the items should wrap to next line and expand the Height of the control, to ensure the text box get 50 or more pixels width, unless this is impossible (i.e. there is a single item that will use too much space)
3. If there are too many lines (i.e. exceed the limit set by MaxHeight property), show the vertical scroll bar.
4. In any cases, the text box shall be given all the space left (in the right hand side!).

I use a ScrollViewer to fulfill #3, and use a WrapPanel to fulfill #2. But the code above does not give the desired result. In design mode it looks like (the item template is a TextBlock inside a Border, should'nt matter here)

It is not fulfill the requirement because it is not wrapping.

What can I do to fix?

Update

If I apply the code in the answer by Raviraj Palvankar and removed all items, the layout in design mode is the following

However, the desired output (according to requirement term #4) is

Where my original code does properly (although fails other requirements)

Answer 1

Here is your code without the ItemTemplate and hence looking like that. I added more strings to show that it does wrap.

<Grid Grid.Column="1" Grid.Row="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" MinWidth="50"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="scEmails">
            <ItemsControl Focusable="False" >
                <ItemsControl.Items>
                    <system:String>123</system:String>
                    <system:String>123</system:String>
                    <system:String>123</system:String>
                    <system:String>123</system:String>
                    <system:String>12eee3</system:String>
                    <system:String>123eee</system:String>
                    <system:String>123fefef</system:String>
                    <system:String>123</system:String>
                    <system:String>123</system:String>
                    <system:String>123</system:String>
                    <system:String>123</system:String>
                    <system:String>12eee3</system:String>
                    <system:String>123eee</system:String>
                    <system:String>123fefef</system:String>
                </ItemsControl.Items>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>
        <TextBox Grid.Column="1" TextWrapping="NoWrap" Margin="0,0,0,0"  VerticalAlignment="Center" PreviewKeyDown="txtAuto_PreviewKeyDown" MinWidth="50" />