WPF仿微信界面发送消息简易版

WPF仿微信界面发送消息简易版

参考别的博主的例子用WPF MVVM框架来仿了一个微信聊天界面，做了个发送消息简易功能，下面一起来看看吧！

以下为View视图布局代码，消息对话框的样式直接在这里定义了，主要定义的是用户头像、对话框和发送时间的样式，其中设置了文字消息自动换行。

<Window x:Class="DEMO.View.ChatWindow"
        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:DEMO.View"
        xmlns:custom="clr-namespace:DEMO.VO"
        mc:Ignorable="d" Title="ChatWindow" 
        Height="600" Width="410" 
        ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
        WindowStyle="None" Background="Transparent" 
        DataContext="{Binding Source={StaticResource Locator},Path=Chat}"
        AllowsTransparency="True">
    <Window.Resources>
        <ResourceDictionary>
            <!--发送的信息-->
            <DataTemplate x:Key="chatSend1">
                <StackPanel x:Name="SendMsg" Orientation="Horizontal" Margin="0,12,20,0" HorizontalAlignment="Right">
                    <StackPanel Orientation="Vertical" Margin="0,0,10,0">
                        <StackPanel Orientation="Horizontal">
                            <!--名称-->
                            <TextBlock Text="{Binding UserName}" Foreground="#999" Margin="2,0,0,3" HorizontalAlignment="Right" FontSize="10"/>
                            <!--时间-->
                            <TextBlock Text="{Binding MessageTime}" Foreground="#999" Margin="8,0,0,3" HorizontalAlignment="Right" FontSize="10"/>
                        </StackPanel>
                        <!--消息内容-->
                        <Border Background="#c8dd1f" BorderThickness="1" BorderBrush="#ddd" CornerRadius="8,0,8,8" MinHeight="30" MinWidth="50" MaxWidth="200">
                            <TextBox IsReadOnly="True" Background="Transparent" BorderThickness="0" TextWrapping="Wrap" Text="{Binding SendMessage}" FontSize="14" Margin="8" VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                    <!--头像-->
                    <Bord