如何在列表中显示存在于WPF的父用户控件中的子用户控件

时间:2018-11-27 18:43:41

标签: c# wpf mvvm viewmodel webusercontrol

我正在创建一个具有两个用户控件的聊天用户控件;

1)父用户控件

2)子用户控件

为了大致了解我的聊天工作,我用颜料创建了一个图像。

SAP Java Connector

真实图像在后面。

enter image description here

我已经为两个用户控件创建了独立的ViewModel和模型。现在的问题是,当我将某些内容(例如“ Hi”)从父控件文本框传递给子用户控件时,它在子控件中不可见,

我的尝试正在关注。

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);
    }
}

0 个答案:

没有答案