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

程序员文章站 2022-12-21 09:13:28

微信公众号： "Dotnet9" ，网站： "Dotnet9" ，问题或建议： "请网站留言" ，如果对您有所帮助： "欢迎赞赏" 。 C WPF聊天界面（3/3）阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 1.本文背景系列文章最后一篇，一个完整的聊天界面。当然只看效果，具体的项 ......

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

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

阅读导航

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

1.本文背景

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

前面两篇文章：

三篇文章最终效果如下：
C# WPF聊天界面（3/3）

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 的微信公众号，本站会及时推送最新技术文章

上一篇：长粒香米跟圆粒米有什么区别，一起来涨知识吧

下一篇： Python JSON的简单使用

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

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

1.本文背景

2.代码实现

2.1 引入md控件样式文件

2.2 界面布局

2.2.3 窗体部分事件处理

2.2.4 新增两个用户控件

3.参考

CSS3 仿微信聊天小气泡实例代码

iQOO 3用上iQOO UI系统：安卓10+全新界面、机械键盘震感

[译]C# 7系列，Part 3: Default Literals

WPF下YUV播放的D3D解决方案

C# WPF计算器界面（Calculator Design With Animations）

ipad mini3怎么下载安装微信进行聊天

Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

C#图片处理3种高级应用

C# OleDbDataReader快速数据读取方式(3种)

使用CSS3 制作一个material-design 风格登录界面实例