当前位置：移动技术网 > IT编程>开发语言>.net > C# WPF聊天界面（3/3）

C# WPF聊天界面（3/3）

2020年01月12日 | 移动技术网IT编程 | 我要评论

书画中国,technetcal,施仕伦

微信公众号：dotnet9，网站：dotnet9，问题或建议：，
如果对您有所帮助：。

c# wpf聊天界面（3/3）

阅读导航

本文背景
代码实现
本文参考

1.本文背景

系列文章最后一篇，一个完整的聊天界面。当然只看效果，具体的项目需要将左侧好友列表、中间会话列表、右侧联系人简况做成mvvm绑定的形式，做成模板才是一个完整的项目，本系列只是对界面的一个设计参考。

前面两篇文章：

三篇文章最终效果如下：
聊天界面

2.代码实现

使用 .net core 3.1 创建名为 “chat” 的wpf项目，添加 materialdesignthemes(3.0.1)、materialdesigncolors(1.2.2)两个nuget库，文中图片已全部替换为站长网站logo图片外链，直接copy文中代码即可运行，大家亦可下载原作者源码研究学习，文末会给出源码下载链接。

2.1 引入md控件样式文件

使用md控件的常规操作，需要在app.xaml中引入4个样式文件：

<application x:class="chat.app"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             startupuri="mainwindow.xaml">
    <application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.dark.xaml" />
                <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml" />
                <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/primary/materialdesigncolor.green.xaml" />
                <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/accent/materialdesigncolor.lime.xaml" />
            </resourcedictionary.mergeddictionaries>
        </resourcedictionary>
    </application.resources>
</application>

2.2 界面布局

纯粹的布局代码：整个界面分为左、中、右三块，即好友列表、好友会话、好友简况三部分，实际项目，需要将三块做成模板进行mvvm绑定开发，方便扩展。

<window x:class="chat.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:chat"
        mc:ignorable="d"
        height="600" width="1080" resizemode="noresize" mouseleftbuttondown="window_mouseleftbuttondown"
        windowstartuplocation="centerscreen" windowstyle="none" fontfamily="dosis">
    <grid>
        <grid.columndefinitions>
            <columndefinition width="270"/>
            <columndefinition width="*"/>
            <columndefinition width="270"/>
        </grid.columndefinitions>

        <!--#region 左侧好友列表-->
        <stackpanel grid.column="0" background="{staticresource primaryhuedarkbrush}">
            <stackpanel orientation="horizontal" background="white">
                <image width="210" height="80" source="https://img.dotnet9.com/logo-head.png"/>
                <button style="{staticresource materialdesignflatbutton}">
                    <materialdesign:packicon kind="pluscircle" width="24" height="24"/>
                </button>
            </stackpanel>
            <textbox margin="20 10" style="{staticresource materialdesignfloatinghinttextbox}" materialdesign:hintassist.hint="搜索" foreground="white"/>
            <grid>
                <grid.columndefinitions>
                    <columndefinition width="*"/>
                    <columndefinition width="*"/>
                    <columndefinition width="*"/>
                    <columndefinition width="*"/>
                </grid.columndefinitions>

                <button style="{staticresource materialdesignflatbutton}" grid.column="0">
                    <materialdesign:packicon kind="history" foreground="white"/>
                </button>
                <button style="{staticresource materialdesignflatbutton}" grid.column="1">
                    <materialdesign:packicon kind="people" foreground="white"/>
                </button>
                <button style="{staticresource materialdesignflatbutton}" grid.column="2">
                    <materialdesign:packicon kind="contacts" foreground="white"/>
                </button>
                <button style="{staticresource materialdesignflatbutton}" grid.column="3">
                    <materialdesign:packicon kind="archive" foreground="white"/>
                </button>
            </grid>
            <listview>
                <listviewitem horizontalalignment="stretch">
                    <grid horizontalalignment="center" margin="5">
                        <grid.columndefinitions>
                            <columndefinition width="50"/>
                            <columndefinition width="150"/>
                            <columndefinition width="50*"/>
                        </grid.columndefinitions>

                        <border width="40" height="40" cornerradius="25" borderbrush="white" borderthickness="0.6">
                            <border.background>
                                <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                            </border.background>
                        </border>
                        <border width="10" height="10" verticalalignment="bottom" margin="5" horizontalalignment="right" cornerradius="15" background="lightgreen"/>

                        <stackpanel grid.column="1">
                            <textblock text="dotnet9.com" margin="10 0"/>
                            <textblock text="一个热衷于互联网分享精神的程序员的网站！" margin="10 0" texttrimming="characterellipsis" opacity="0.6" fontsize="11"/>
                        </stackpanel>

                        <border grid.column="2" width="20" height="20" cornerradius="15" background="white" horizontalalignment="center" verticalalignment="center" margin="5">
                            <textblock fontsize="11" text="9" foreground="{staticresource primaryhuedarkbrush}" horizontalalignment="center" verticalalignment="center"/>
                        </border>
                    </grid>
                </listviewitem>
            </listview>
        </stackpanel>
        <!--#endregion 左侧好友列表-->

        <!--#region 中间会话区-->
        <grid grid.column="1" background="#ffe4e4e4">
            <stackpanel orientation="horizontal" height="100" verticalalignment="top" background="#ffe4e4e4">
                <stackpanel.effect>
                    <dropshadoweffect blurradius="30" shadowdepth="1"/>
                </stackpanel.effect>
                <border width="10" height="10" horizontalalignment="right" margin="15" background="green" cornerradius="15" verticalalignment="center"/>
                <textblock text="dotnet9.com" fontsize="28" verticalalignment="center"/>
                <button style="{staticresource materialdesignfloatingactionminibutton}" margin="15 15 10 15">
                    <materialdesign:packicon kind="call"/>
                </button>
                <button style="{staticresource materialdesignfloatingactionminibutton}" margin="15 15 10 15">
                    <materialdesign:packicon kind="videocall"/>
                </button>
            </stackpanel>
            <stackpanel margin="0 100" verticalalignment="bottom">
                <local:usercontrolmessagereceived horizontalalignment="left"/>
                <local:usercontrolmessagesent horizontalalignment="right"/>
            </stackpanel>
            <border background="#ffafe6b2" verticalalignment="bottom">
                <grid margin="0 10">
                    <grid.columndefinitions>
                        <columndefinition width="*"/>
                        <columndefinition width="70"/>
                        <columndefinition width="70"/>
                        <columndefinition width="70"/>
                    </grid.columndefinitions>
                    <textbox grid.column="0" maxheight="80" textwrapping="wrap" margin="5" acceptsreturn="true" verticalscrollbarvisibility="auto"/>
                    <button grid.column="3" verticalalignment="bottom" style="{staticresource materialdesignfloatingactionminibutton}">
                        <materialdesign:packicon kind="send"/>
                    </button>
                    <button grid.column="2" background="{x:null}" verticalalignment="bottom" style="{staticresource materialdesignfloatingactionminibutton}">
                        <materialdesign:packicon kind="attachment" foreground="{staticresource primaryhuedarkbrush}"/>
                    </button>
                    <button background="{x:null}" grid.column="1" verticalalignment="bottom" style="{staticresource materialdesignfloatingactionminibutton}">
                        <materialdesign:packicon kind="smiley" foreground="{staticresource primaryhuedarkbrush}"/>
                    </button>
                </grid>
            </border>
        </grid>
        <!--#endregion 中间会话区-->

        <!--#region 右侧参与会话的联系人信息-->
        <stackpanel grid.column="2" background="white">
            <button horizontalalignment="right" margin="10" style="{staticresource materialdesignflatbutton}" click="close_click">
                <materialdesign:packicon kind="close"/>
            </button>

            <border width="150" height="150" cornerradius="80" borderthickness="1" borderbrush="gray">
                <border.background>
                    <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                </border.background>
            </border>

            <textblock text="dotnet9.com" horizontalalignment="center" margin="0 10 0 0" foreground="gray" fontsize="18" fontweight="bold"/>
            <textblock text="dotnet程序员" fontsize="13" foreground="gray" horizontalalignment="center" opacity="0.8"/>
            <textblock text="一个热衷于互联网分享精神的程序员的网站！" fontsize="8" foreground="gray" horizontalalignment="center" opacity="0.8"/>

            <stackpanel margin="20">
                <stackpanel orientation="horizontal" margin="0 3">
                    <materialdesign:packicon kind="location" foreground="gray"/>
                    <textblock text="成都" margin="10 0" foreground="gray"/>
                </stackpanel>
                <stackpanel orientation="horizontal" margin="0 3">
                    <materialdesign:packicon kind="cellphone" foreground="gray"/>
                    <textblock text="186 2806 0000" margin="10 0" foreground="gray"/>
                </stackpanel>
                <stackpanel orientation="horizontal" margin="0 3">
                    <materialdesign:packicon kind="email" foreground="gray"/>
                    <textblock text="632871194@qq.com" margin="10 0" foreground="gray"/>
                </stackpanel>
            </stackpanel>

            <textblock text="视频" margin="20 0" foreground="gray"/>
            <stackpanel orientation="horizontal" margin="20 0">
                <border width="50" height="50" cornerradius="30" margin="5">
                    <border.background>
                        <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                    </border.background>
                </border>
                <border width="50" height="50" cornerradius="30" margin="5">
                    <border.background>
                        <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                    </border.background>
                </border>
                <border width="50" height="50" cornerradius="30" margin="5">
                    <border.background>
                        <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                    </border.background>
                </border>
            </stackpanel>
        </stackpanel>
        <!--#endregion 右侧参与会话的联系人信息-->
    </grid>
</window>

2.2.3 窗体部分事件处理

后台代码

private void window_mouseleftbuttondown(object sender, mousebuttoneventargs e)
{
    dragmove();
}

private void close_click(object sender, routedeventargs e)
{
    this.close();
}

2.2.4 新增两个用户控件

用于展示接收的会话和发送的会话，真实的项目可以做成一个，做成模板。

接收的会话用户控件：

<usercontrol x:class="chat.usercontrolmessagereceived"
             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:chat"
             mc:ignorable="d" 
             d:designheight="450" d:designwidth="800">
    <grid>
        <border background="{staticresource primaryhuedarkbrush}" cornerradius="15 15 15 0" margin="10 12">
            <textblock margin="15" textwrapping="wrap" 
                       text="你好，怎么联系你？" foreground="white"/>
        </border>
        <textblock text="星期四下午5:45" horizontalalignment="right" verticalalignment="bottom" fontsize="10" margin="10 -2"/>
    </grid>
</usercontrol>

发送的会话用户控件：

<usercontrol x:class="chat.usercontrolmessagesent"
             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:chat"
             mc:ignorable="d" 
             d:designheight="450" d:designwidth="800">
    <grid>
        <border background="gray" cornerradius="15 15 0 15" margin="10 12">
            <textblock margin="15" textwrapping="wrap" text="微信公众号：dotnet9，网站：https://dotnet9.com" foreground="white"/>
        </border>
        <textblock text="星期四下午5:55" horizontalalignment="right" verticalalignment="bottom" fontsize="10" margin="10 -2"/>
    </grid>
</usercontrol>

3.参考

学习视频：

最终源码：本文代码几乎和源码一致，只是文中部分英文换成中文，本地图片换成站长网站logo外链，方便演示。

点击右侧下载源码：chat

除非注明，文章均由 dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/6948.html

欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

详解.NET Core 3.0 里新的JSON API

为什么需要新的 json api ？json.net 大家都用过，老版本的 asp.net core 也依赖于 json.net 。然而这个依赖就会引起一些版... [阅读全文]
Net Core Web Api项目与在NginX下发布的方法

前言本文将介绍net core的一些基础知识和如何nginx下发布net core的webapi项目。测试环境操作系统：windows 10 开发工具：v... [阅读全文]
浅谈ASP.NET Core 中jwt授权认证的流程原理

1，快速实现授权验证什么是 jwt ？为什么要用 jwt ？jwt 的组成？这些百度可以直接找到，这里不再赘述。实际上，只需要知道 jwt 认证模式是使用一段 ... [阅读全文]
.Net Core 实现图片验证码的实现示例

记录自己的学习，参考了网上各位大佬的技术，往往在登录的时候需要使用到验证码来进行简单的一个校验，这边使用在.net core上进行生成图片二维码思路很简单=》 ... [阅读全文]
asp.net core3.1 引用的元包dll版本兼容性问题解决方案

自从.netcore 3.1出来后，大家都想立马升级到最新版本。我也是如此，微软也对.netcore 3.1 的官方组件不断升级，几乎每隔几天就会有部分元包可以... [阅读全文]
IdentityServer4实现.Net Core API接口权限认证(快速入门)

什么是identityserver4官方解释：identityserver4是基于asp.net core实现的认证和授权框架，是对openid connect... [阅读全文]
从ASP.NET Core3.1迁移到5.0的方法

3月中旬，微软官方已经发布了dotnet 5的第一个预览版：5.0.0-preview.1。dotnet core经过前几个版本的发展和沉淀，到3.1已经基本趋... [阅读全文]
.NET Core中创建和使用NuGet包的示例代码

在.net core的项目中，如果我们要在项目中引用其它dll文件，不建议直接在项目引用中添加dll文件（虽然在.net core项目中也可以这么做），建议是去... [阅读全文]
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现

iviewlocationexpander api expandviewlocations razor视图路径，视图引擎会搜索该路径. populateva... [阅读全文]
ASP.NET Core中的Controller使用示例

asp.net core出现之前我们实现的controller，mvc都继承自controller基类，webapi的话继承自apicontroller。现在a... [阅读全文]