当前位置：
  1. 首页
  2. 市民
  3. 正文

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

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

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考

1.本文背景

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

前面两篇文章：

  1. c# wpf联系人列表（1/3）
  2. c# wpf简况（2/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.参考

学习视频：

  1. c# wpf design ui – 1/3 – contact list
  2. c# wpf design ui – 2/3 – profile
  3. c# wpf design ui – 3/3 – chat

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

点击右侧下载源码：chat

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

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

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

上一篇 1976年龙男配什么女，1976年属龙男人的婚姻
下一篇 css选中父元素下的第一个子元素(:first-child)

相关文章