WPF下聊天气泡的实现

最新推荐文章于 2024-08-08 08:05:47 发布
最新推荐文章于 2024-08-08 08:05:47 发布
阅读量3.2k 收藏 16
点赞数 4
分类专栏： WPF项目经验 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szaf59313/article/details/105892052
版权

零、版本履历

日期说明
2020.05.02初稿

一、效果

先看最终效果。

在这里插入图片描述

最终微聊烂尾了，更确切地说，还没开始就结束了。

二、由来

产品虽然没有最终做出来，但至少聊天气泡打磨的还挺像样的。

说说怎么实现的吧。打磨一个聊天气泡的想法由来已久。

WinForm

最开始用的WInForm，想重绘ListBox或者RichTextBox来做，可是借助万能的度娘也没找到思路，不熟悉GDI+，更不知道怎么去重绘。

Layui

后来看到Layui中的IM组件挺符合我的需求，想到可以借助CefSharp实现客户端和前端的联动，最终由于不熟悉前端，不知道怎么屏蔽边框和拖动，想法又泡汤了。

在这里插入图片描述

WPF

直到某天入了WPF的坑，由于它自带界面和逻辑分离的天然优势，完全可以重写Label的DataTemplate来实现，特别简单。

三、实现

思路很简单，重写ListView的模板，针对接收/发送两种行为分别定义两个模板，再定义一个模板选择器DataTemplateSelector判断要应用哪个模板。

定义ChatBubble

考虑到气泡中不仅仅显示文本，还可能会有图片和表情符号，我们可以重写Label的模板，分头像和内容两部分，内容的边框作成气泡的样子。

直接上代码，这是接收的气泡。

<Style TargetType="Label" x:Key="chatRecv">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Label}">
                <Grid Margin="0,5,0,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image Width="35" Height="35" Source="userIcon.jpg" />

                    <Border x:Name="border1" 
                            Grid.Column="1" 
                            CornerRadius="1" 
                            BorderBrush="#EDEDED" 
                            BorderThickness="1" 
                            VerticalAlignment="Top" 
                            Margin="10,2,0,2" 
                            Background="#FFFFFF" 
                            HorizontalAlignment="Left" 
                            Padding="5" 
                            MinHeight="35"
                            MinWidth="50">
                        <ContentPresenter VerticalAlignment="Center" />
                    </Border>
                    <Canvas Grid.Column="1" 
                            Width="10" 
                            Height="16" 
                            HorizontalAlignment="Left" 
                            VerticalAlignment="Top" 
                            Margin="3,14,0,0" 
                            Background="Transparent">
                        <Path x:Name="path1" 
                              Stroke="#EDEDED" 
                              StrokeThickness="1" 
                              Fill="#FFFFFF">
                            <Path.Data>
                                <PathGeometry Figures="M 8,0 L 0,6,8,12"/>
                            </Path.Data>
                        </Path>
                    </Canvas>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="path1" 
                                Property="Fill" 
                                Value="#F6F6F6" />
                        <Setter TargetName="border1" 
                                Property="Background" 
                                Value="#F6F6F6" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

同样的，再定义一个发送的气泡。

<Style TargetType="Label" x:Key="chatSend">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Label}">
                <Grid Margin="0,5,0,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="1" 
                           Width="35" Height="35" 
                           Source="userIcon.jpg" />

                    <Border x:Name="border1" 
                            CornerRadius="1"
                            BorderBrush="#9EEA6A"
                            BorderThickness="1" 
                            VerticalAlignment="Top"
                            HorizontalAlignment="Right"
                            Margin="0,2,10,2" 
                            Background="#9EEA6A" 
                            Padding="5" 
                            MinHeight="35" 
                            MinWidth="50">
                        <ContentPresenter VerticalAlignment="Center" />
                    </Border>
                    <Canvas Width="10" 
                            Height="16" 
                            HorizontalAlignment="Right" 
                            VerticalAlignment="Top"
                            Margin="5,14,0,0" 
                            Background="Transparent">
                        <Path x:Name="path1" 
                              Stroke="#9EEA6A" 
                              StrokeThickness="0.5"
                              Fill="#9EEA6A">
                            <Path.Data>
                                <PathGeometry Figures="M 0,12 L 0,0,8,6"/>
                            </Path.Data>
                        </Path>
                    </Canvas>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="path1" 
                                Property="Fill" 
                                Value="#98E165" />
                        <Setter TargetName="border1"
                                Property="Background" 
                                Value="#98E165" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

定义TemplateSelector

接下来轮到TemplateSelector出场，最终气泡要通过ListView呈现，可以在ItemSource中指定一个标记位IsSend来告知UI是接收还是发送。

class ChatBubbleSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var u = container as FrameworkElement;

        MessageEntity message = item as MessageEntity;

        if (message.IsSend)
            return u.FindResource("chatSend") as DataTemplate;
        else
            return u.FindResource("chatRecv") as DataTemplate;
    }
}

声明资源

然后在主界窗口中声明这个选择器，以及背景颜色等资源，配色取自微信PC端。

<Color x:Key="background">#F5F5F5</Color>

<SolidColorBrush x:Key="background_brush" 
                 Color="{StaticResource background}" 
                 options:Freeze="True" />

<Color x:Key="icon_btn_normal">#F7F7F7</Color>

<SolidColorBrush x:Key="icon_btn_normal_brush" 
                 Color="{StaticResource icon_btn_normal}" 
                 options:Freeze="True" />

<Color x:Key="message_send_bg">#98E165</Color>

<SolidColorBrush x:Key="message_send_bg_brush" 
                 Color="{StaticResource message_send_bg}" 
                 options:Freeze="True" />

<Color x:Key="message_recv_bg">#F6F6F6</Color>

<SolidColorBrush x:Key="message_recv_bg_brush" 
                 Color="{StaticResource message_recv_bg}" 
                 options:Freeze="True" />

<Color x:Key="green_normal">#07C160</Color>

<SolidColorBrush x:Key="green_normal_brush" 
                 Color="{StaticResource green_normal}" 
                 options:Freeze="True" />

主界面实现

最后在主界面上放一个ListView，用来承载消息。

<ListBox ItemTemplateSelector="{StaticResource chatBubbleSelector}" 
         ItemsSource="{Binding Messages}" 
         Background="{DynamicResource background_brush}" 
         SelectedIndex="{Binding SelectedMessage}" 
         BorderThickness="0,1,0,1" 
         BorderBrush="#D3D3D3"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}" x:Key="listViewItemStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}"
                                SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

在ViewModel中绑定数据源，F5运行，就能看到文章一开始的效果了。

最后的最后，附上本文用到的Demo：https://gitee.com/dswfort/BlogDemos/tree/master/ChartBubbleSample

2020年5月2日星期六

钩鸿踏月
关注
专栏目录
WPF实现仿微信聊天汽包框
01-20
WPF实现仿微信聊天汽包框，汽包框自适应文本大小，支持编辑、关闭，右键弹出航行菜单等。
WPF怎么实现像微信聊天一样的窗口
weixin_42612804的博客
01-05 917
在 WPF 中实现类似微信聊天的窗口可以使用一些常见的控件，如 ListBox、TextBox 和 Button。 首先，你需要在界面中放置一个 ListBox，它将用来显示聊天记录。然后，你需要放置一个 TextBox，用户可以在其中输入新的聊天信息。最后，你需要放置一个 Button，用户可以点击它来发送聊天信息。 要将新的聊天信息添加到 ListBox 中，可以使用 ListBox.Item...
HandyControl 使用指南
最新发布
gitblog_00737的博客
08-08 653
HandyControl 使用指南 HandyControl项目地址:https://gitcode.com/gh_mirrors/han/HandyControl 项目介绍 HandyControl 是一个强大的 WPF 控件库，它致力于重构原生控件的样式，并提供了超过80种自定义控件，数量还在持续增长中。此项目由 NaBian 开发并维护，旨在简化WPF应用程序的界面设计过程，通过一系列美观...
WPF 仿微信聊天气泡
qq_41946341的博客
01-09 693
先上图 GitHub 参考文章: WPF下聊天气泡的实现
C# WeChat聊天软件实例(WPF+WebSocket+WebApi+EntityFramework)
qq_39935495的博客
07-19 4862
仿QQ的聊天程序，其服务端使用WebApi与WebSocket为技术核心，配和EntityFramework框架利用SqlServer数据库进行储存的Asp.Net应用，而客户端是利用Wpf框架做UI层的桌面应用，与服务器进行实时通信达到数据传输的功能IDE: Visual Studio 2022，Blend For Visual Studio 2022 NET框架: Net 6.0 开发语言: C# IIS版本: 8.5 项目框架: Windows Presentation Found
Prism for WPF 搭建一个简单的模块化开发框架（五）添加聊天、消息模块
石头的专栏
09-27 1395
中秋节假期没事继续搞了搞 做了各聊天的模块，需要继续优化 第一步画页面 页面参考https://github.com/yanchao891012/WPF_WeChat/tree/master/WeChat.NET仿微信的页面 加了截图发送图片 效果这样，点击右下角图标显示，可以拖动位置、隐藏、最大化（请忽略工具条里的颜色选择器，做的颜色选择器在这里试试，没啥意义） 截图大概这样 ...
[WPF]动手写一个简单的消息对话框
dsgdauigfs的博客
11-23 382
标准的窗口由两个重叠的矩形组成。外部矩形是非工作区，其中包括标题栏按钮(最小化、最大化和关闭) 、窗口边框、调整大小和移动行为、应用程序图标和标题以及系统菜单。它由操作系统的窗口管理器绘制和管理。其尺寸由标准操作系统设置决定。内部矩形是工作区，也就是应用程序的内容。自定义窗口外观主要是针对非工作区，可以通过设置属性为None，或者使用类来自定义。这里我们使用前一种方法。-- 弹出提示窗体模板 --><Grid>ToolTip="关闭"</Grid></Border>-- 弹出提示窗体样式 -->
WPF气泡样式弹窗效果代码分享
10-21
本知识点主要介绍如何在WPF中实现气泡样式弹窗效果，这是一种视觉效果类似于文本消息气泡的设计方式，常见于各种聊天软件和提示界面。 在WPF中，气泡样式弹窗效果的实现主要通过XAML标记语言和C#代码结合使用，利用...
WPF 聊天框
11-04
这个项目，"WPF 聊天对话框"，是一个专门设计用于个人聊天的窗口，它实现了消息气泡展示对话的功能。通过这种方式，用户可以清晰地看到彼此之间的交流历史，提升沟通的直观性。 在WPF中，设计聊天对话框涉及到以下...
WPF聊天对话框
10-13
首先，从标题"**WPF聊天对话框**"我们可以看出，这个项目的目标是构建一个基于WPF的聊天应用界面。WPF提供了丰富的UI元素和布局管理，使得创建具有现代感的对话框变得简单。聊天对话框通常包含输入框、发送按钮、...
WPF微信聊天和通讯录按钮样式代码分享
09-01
例如，第一个`Path`元素创建了一个类似聊天气泡的形状，而第二个`Path`元素则包含了电话图标的基本形状，这些都是微信聊天和通讯录功能的常见图标。 在`Path`元素的`Data`属性中，我们看到`GeometryGroup`和`...
WPF实现仿微信聊天汽包
01-19
在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 实现一个仿微信聊天气泡框的功能。WPF是微软提供的一种强大的UI框架，用于构建具有丰富图形和交互性的桌面应用程序。根据提供的标题和描述...
【WPF】实现类似QQ聊天消息的界面
weixin_30551947的博客
02-19 506
【WPF】实现类似QQ聊天消息的界面 原文:【WPF】实现类似QQ聊天消息的界面最近公司有个项目，是要求实现类似 QQ 聊天这种功能的。 如下图 这没啥难的，稍微复杂的也就表情的解析而已。 表情在传输过程中的实现参考了新浪微博，采用半角中括号代表表情的方式。例如：“abc[doge]def”就会显示 abc，然后一个，再 def。 ...
WPF-布局样式练习-Day02-聊天气泡
关关长语
09-03 1211
WPF针对样式、布局以及数据模板查找器实现聊天气泡。
skyline开发：wpf上自定义气泡
地理信息技术杂谈 博客，欢迎技术交流
03-20 798
TE二次开发：在wpf上自定义气泡 在TE的CS开发中，可以使用winform或者wpf进行开发，使用的语言都是C#，wpf的开发中，可以实现在winform中不能实现的浮动半透明效果，对于te上一些自带的效果可进行改善。 te上的弹出气泡是te本身的api进行实现的，但是气泡的缺点是：不能设置气泡的透明度，气泡的形状也不能改变，气泡中的信息要按照te的要求进行添加。 既然在wpf中，可以实现在t...
WPF仿QQ聊天框表情文字混排实现
leebin_20的博客
06-06 9266
图中分别有文件、文本+表情、纯文本的展示，对于同一个list不同的展示形式，很明显，应该用多个DataTemplate，那么也就需要DataTemplateSelector了：class MessageDataTemplateSelector : DataTemplateSelector { public override System.Windows.D
WPF使用socket实现简单聊天软件
weixin_30786657的博客
08-18 460
公司网络限制不能传文件，先贴部分代码 控件添加到界面就行，界面随意布局 项目结构： 1.解决方案 1.1. Client 1.2. Server Client: <Window x:Class="CSharpSocketExample.MainWindow" xmlns="http://schemas.microsoft.co...
WPF 控件专题 ListBox 控件详解
热门推荐
^@^lemon tea^@^
09-14 1万+
WPF 控件专题 ListBox 控件详解
wpf 实现气泡提醒
05-30
在 WPF 中，可以使用 Popup 控件实现气泡提醒。以下是一个简单的实现步骤： 1. 在 WPF 窗口中添加一个 Popup 控件，设置其 Placement 属性为 Bottom，使得气泡从控件底部弹出。 2. 在 Popup 中添加一个 Border 控件，设置其 CornerRadius 属性为一半，使得气泡呈圆角矩形。 3. 在 Border 控件中添加一个 TextBlock 控件，设置其内容为需要显示的信息。 4. 当需要显示气泡提醒时，通过设置 Popup 控件的 IsOpen 属性为 true 来显示气泡。 5. 可以通过添加动画效果来使得气泡的显示和隐藏更加平滑。 以下是一个示例代码： ```xml <Popup Placement="Bottom" IsOpen="False" Name="bubblePopup"> <Border Background="White" CornerRadius="10"> <TextBlock Text="这是一个气泡提醒" Padding="10"/> </Border> </Popup> ``` ```csharp bubblePopup.IsOpen = true; // 显示气泡 bubblePopup.IsOpen = false; // 隐藏气泡 ``` 需要注意的是，气泡的位置和大小可以根据实际情况进行调整。同时，需要确保气泡不会遮挡到需要操作的界面元素。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值