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


C# WPF聊天界面（3/3）的更多相关文章

  1. 搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 （1）

    搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...

  2. Android—简单的仿QQ聊天界面

    最近仿照QQ聊天做了一个类似界面,先看下界面组成(画面不太美凑合凑合呗,,,,):

  3. 【源码分享】WPF漂亮界面框架实现原理分析及源码分享

    1 源码下载 2 OSGi.NET插件应用架构概述 3 漂亮界面框架原理概述 4 漂亮界面框架实现  4.1 主程序  4.2 主程序与插件的通讯   4.2.1 主程序获取插件注册的服务   4.2 ...

  4. Android学习笔记（十二）——实战：制作一个聊天界面

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...

  5. 聊天界面之气泡文本cell(二)使用Autolayout

    聊天界面主要是cell的动态高度计算和效率的问题,参考网上的两篇文章: 1.优化UITableViewCell高度计算的那些事  http://www.cocoachina.com/ios/20150 ...

  6. 聊天界面之气泡文本cell(一)

    在实现qq聊天界面的过程中,使用UITableViewCell碰到了不少问题,这里还是记录一下以免遗忘. 气泡聊天cell的实现,网上最多的方法还是: 1.手动计算设置frame的值,文本的size使 ...

  7. Objective－c——UI基础开发第八天（QQ聊天界面）

    一.知识点: QQ聊天界面 双模型的使用(dataModel和frameModel) UITextField的使用 通知的使用 拉伸图片的两种方法(slicing/image对象的resizeable ...

  8. iOS打开手机QQ与指定用户聊天界面

    开发中遇到一个联系客服qq的需求,找到这么一个实现方法,先记录下来.大概的原理就是,iOS启动第三方应用是采用schema模式的,这有点像url,打开不同的界面使用不同的地址.但这个url怎么得来的还 ...

  9. [iOS基础控件 - 6.9] 聊天界面Demo

    A.需求 做出一个类似于QQ.微信的聊天界面 1.每个cell包含发送时间.发送人(头像).发送信息 2.使用对方头像放在左边,我方头像在右边 3.对方信息使用白色背景对话框,我方信息使用蓝色背景对话 ...

随机推荐

  1. 大数据之Kafka史上最详细原理总结

    Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...

  2. 接口自动化CSV文件生成超长随机字符串--java接口方法

    public class STR { private static String Builderrud(int a){ StringBuilder builder= new StringBuilder ...

  3. POJ_1182_并查集

    http://poj.org/problem?id=1182 pre构建有关系的号码的树,rel保存当前号码与根的关系,0表示相同,1表示根吃当前,2表示当前吃根. 代码中的更新公式可以先把各种情况枚 ...

  4. 关于Icon，Image，ImageIcon的简单的对比参考

    Icon: Icon位于javax.swing包中,它是一个接口 public interface Icon,介绍为:一个小的固定大小的图片,通常用于装饰组件 有三个方法: int getIconHe ...

  5. Open Images V4 下载自己需要的类别

    OpenImages V4数据集描述1)这个v4数据集主要有两种用途:对象检测及分类,意思是说可以用这个数据集训练出对象检测模型,用于识别图像中的对象类别及位置边框.视觉关系检测,比如你用这个v4数据 ...

  6. c++ 中变量成员的初始化时机

    代码如下: 注意一下我打断点的位置. 最后的结果: 在程序进入MyTest()的函数体之前,控制台就打印出来了I have been constructed. 即:在进入构造函数的函数体之前,类中的成 ...

  7. 【CMake】CMake ERROR：could not find git for clone of

    在使用 CMake 构建VS2015项目时遇到一个错误提示:could not find git for clone of. 因为项目需要从GitHub导入运行库,但构建项目时提示未能找到这个库,而g ...

  8. Java中类锁和对象锁

    类锁 类锁 锁的其实是类的Class对象,类锁的代码写法是对类方法加synchronize,或者 synchronize(xx.class){} 对象锁 对象锁 锁的是类的实例对象,对象锁的形式有 对 ...

  9. light oj 1067 费马小定理求逆元

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1067 1067 - Combinations Given n differen ...

  10. Spring-cloud微服务实战【九】：分布式配置中心config

      回忆一下,在前面的文章中,我们使用了spring cloud eureka/ribbon/feign/hystrix/zuul搭建了一个完整的微服务系统,不管是队内还是对外都已经比较完善了,那我们 ...