Как отобразить дочерний элемент управления в списке, который существует в родительском элементе управления в WPF

Question

Я создаю пользовательские элементы управления чатом, которые имеют два пользовательских элемента управления;

1) Родительский пользовательский элемент управления

2) дочерний пользовательский элемент управления,

для приблизительного представления о работе в чате. Я создал изображение в рисовании.

Реальное изображение выглядит следующим образом.

Я создалsaprate ViewModels и модели для обоих пользовательских элементов управления.Теперь проблема в том, что когда я передаю что-то (например, «Привет») из текстового поля родительского элемента управления в дочерний элемент управления пользователя, это не видно в дочерних элементах управления,

моя попытка следующая.

ListControls.xaml (родительский элемент управления)

<UserControl.Resources>
    <vm:ChatDiscussionViewModel x:Key="DesignViewModel"/>
</UserControl.Resources>

<Grid Background="LightGray" Width="400">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel  Orientation="Horizontal" Grid.Row="0">
        <TextBlock x:Name="txtChatName" Text="Ascend Support" TextWrapping="Wrap" FontFamily="Segoe UI" 
               FontSize="15" VerticalAlignment="Center"
               HorizontalAlignment="Left" Margin="5" Foreground="Black"/>
    </StackPanel>
    <Grid Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" x:Name="mainContentHolder">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid>
            <Border Margin= "5" Height="270" Grid.Row="0" x:Name="brdChatContent" HorizontalAlignment="Stretch" CornerRadius="10" VerticalAlignment="Stretch" Background="#FF005C85">
                <Border.Effect>
                    <DropShadowEffect Direction="447" Color="#FFB9B9B9" ShadowDepth="2"/>
                </Border.Effect>
                <Grid>
                    <ScrollViewer Margin="5" VerticalScrollBarVisibility="Auto">
                        <ItemsControl ItemsSource="{Binding ChatBubbleList}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <!--<local:ChatBubbleControl DataContext="{StaticResource DesignViewModel}"/>-->
                                    <local:ChatBubbleControl>
                                        <local:ChatBubbleControl.DataContext>
                                            <vm:ChatDiscussionViewModel/>
                                        </local:ChatBubbleControl.DataContext>
                                    </local:ChatBubbleControl>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </ScrollViewer>
                </Grid>
            </Border>
        </Grid>
        <Border Margin="5" BorderBrush="#005C85" BorderThickness="5" Background="Gray" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Grid.Row="1" CornerRadius="5">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBox Text="{Binding ChatData, Mode=OneWayToSource}" x:Name="txtChatBox" Padding="5" Height="35" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Column="0"
                 FontFamily="Segoe UI" BorderBrush="White" FontSize="15" KeyDown="OnKeyDownHandler">
                </TextBox>
                <Button Style="{StaticResource ResourceKey=SendButtonStyle}" Content="Go" Grid.Column="1" Click="Button_Click"/>
            </Grid>
        </Border>
    </Grid>
</Grid>

ChatBubbleControl.xaml (дочерний элемент управления)

<UserControl x:Class="MyChat.ChatBubbleControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ChatBot.Converter"
         xmlns:vm="clr-namespace:ChatBot.ViewModel"
         mc:Ignorable="d">
<UserControl.Resources>
    <!--<vm:ChatDiscussionViewModel x:Key="DesignViewModel"/>-->
</UserControl.Resources>
<Grid VerticalAlignment="Bottom" HorizontalAlignment="{Binding HorizontalAlignments}" d:DataContext="{Binding Source={StaticResource DesignViewModel}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

         <!--Speech bubble rectangle--> 
        <Border CornerRadius="10"
                Padding="12"
                Margin="5 0 0 0"
                Background="{Binding BubbleBackground, Mode=OneWay,Converter={local:StringRGBToBrushConverter}}" Width="200">

            <Border.Effect>
                <DropShadowEffect BlurRadius="4" ShadowDepth="2" Color="Gray" />
            </Border.Effect>
            <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="{Binding HorizontalAlignments}">
                <TextBlock x:Name="txtChatText" Text="{Binding ChatData, Mode=TwoWay}" FontFamily="Segoe UI" TextWrapping="Wrap" FontSize="12" FontWeight="Normal" Foreground="DarkBlue"></TextBlock>
                <TextBlock x:Name="txtChatTime" Text="{Binding ChatTime, Mode=TwoWay}" Background="Transparent" FontSize="10" Foreground="White" TextWrapping="Wrap" FontStyle="Italic"></TextBlock>
            </StackPanel>
        </Border>

         <!--Chat bubble anchor--> 
        <Path Grid.Row="1" 
          Stroke="Black"
          Panel.ZIndex="1"
          Margin="15 -1 15 5"
          Data="M 0,0 L 10,10 L 20,0 L 0,0" 
          StrokeThickness="0"
              VerticalAlignment="Bottom" HorizontalAlignment="{Binding HorizontalAlignments,Mode=TwoWay}"
                Fill="{Binding BubbleBackgroundBubble, Mode=OneWay, Converter={local:StringRGBToBrushConverter}}">

            <!--<HorizontalAlignment="{Binding Alignment, Converter={local:HorizontalAlignmentConverter}}"
         Fill="{Binding BubbleBackground, Converter={local:StringRGBToBrushConverter}}"/>--> 

            <Path.Effect>
                <DropShadowEffect BlurRadius="3" ShadowDepth="3" Color="Gray" />
            </Path.Effect>

        </Path>
    </Grid>

ChatDiscussionViewModel.cs (для ChatListControls.xaml)

public class ChatDiscussionViewModel : NotificationBase
{
    private ChatBubbleViewModel vm = null;
    private ChatDiscussion _chatDiscussion = new ChatDiscussion();
    public ChatBubble bubble = null;
    public ChatDiscussionViewModel()
    {

    }
    public ChatDiscussionViewModel(ChatDiscussion chatDetails)
    {
        bubble = new ChatBubble()
        {
            ChatData = chatDetails.ChatDataBubble,
            ChatTime = chatDetails.ChatTimeBubble,
            BubbleBackground = chatDetails.BubbleBackgroundBubble,
            HorizontalAlignments = chatDetails.HorizontalAlignmentsBubble,
            IsSendByUser = chatDetails.IsSendByUserBubble
        };
        vm = new ChatBubbleViewModel(bubble);

}

ChatBubbleViewModel.cs (для контроля пользователя)

class ChatBubbleViewModel : NotificationBase
{
    //private readonly string chatDetail = "";
    private ObservableCollection<ChatBubble> _chatDiscussion = new ObservableCollection<ChatBubble>();
    public ObservableCollection<ChatBubble> ShelfItemsCollection
    { get { return _chatDiscussion; } }
    public ChatBubbleViewModel(ChatBubble chatDetails)
    {
        if(chatDetails.IsSendByUser)
        {
            chatDetails.BubbleBackground = (SolidColorBrush)(new BrushConverter().ConvertFrom("#FFFFFF"));
            chatDetails.HorizontalAlignments = "Right";
        }
        else
        {
            chatDetails.BubbleBackground = (SolidColorBrush)(new BrushConverter().ConvertFrom("#F9F9F9"));
            chatDetails.HorizontalAlignments = "Left";
        }
        _chatDiscussion.Add(chatDetails);
    }
}