我正在创建一个具有两个用户控件的聊天用户控件;
1)父用户控件
2)子用户控件
为了大致了解我的聊天工作,我用颜料创建了一个图像。
真实图像在后面。
我已经为两个用户控件创建了独立的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);
}
}