Vue3.0桌面端聊天｜vue3仿微信/QQ網(wǎng)頁版聊天實例

著vue3.x越來越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發(fā)者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達20.2K+。

// 官網(wǎng)地址
https://v3.vuejs.org/

Vitejs目前的star達到15.7K+。

// 官網(wǎng)地址
https://vitejs.dev/

項目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術(shù)棧

使用技術(shù)：vue3.0+vuex4+vue-router4
UI組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動條組件：V3Scroll（基于Vue3自定義虛擬美化滾動條）
iconfont圖標：阿里字體圖標庫

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時間有過一篇詳細的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動條組件

為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現(xiàn)。

v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項目配置

/**
 * Vue3.0項目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網(wǎng)頁
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊公共組件

// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins = app => {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3攔截登錄狀態(tài)

vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當(dāng)前路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權(quán)
            V3Layer({
                content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標處插入表情、多行文本內(nèi)容。

編輯器抽離了一個公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd = e.clipboardData
    let ua = window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind == 'file') {
            var blob = item.getAsFile()
            if(blob.size === 0) return
            // 讀取圖片記錄
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function() {
                var _img = this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區(qū)域進行發(fā)送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
    let files = filelist.files
    if(files.length >= 2) {
        v3layer.message({icon: 'error', content: '暫時支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開發(fā)仿微信/QQ聊天實戰(zhàn)項目就分享到這里。

基于vue3.0+vant3移動端聊天實戰(zhàn)|vue3聊天模板實例

ello,World.

土土今天給大家分享一個用jquery制作的簡易聊天界面。

html

1.首先寫一個html文件來展示前端頁面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ簡易聊天框</title>
     <link rel="stylesheet" href="css/chat.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/chat.js"></script>
</head>
<body>  
<section id="chat">
    <div class="chatBody"><ul></ul></div><!--chat.js執(zhí)行的效果全都放在這里-->
    <div class="img"><img src="images/icon.jpg"></div>
     <textarea class="chatText"></textarea>
    <div class="btn">
      <span id="close">關(guān)閉(C)</span>
      <span id="send">發(fā)送(S)</span>
    </div>
</section>    
</body>
</html>

2.效果

chat.js

1.js文件來寫jquery語句

$(document).ready(function(){
  var headImg=new Array("head01.jpg","head02.jpg"); //定義圖片數(shù)組
  var uName=new Array("L","G"); //定義名字數(shù)組     
  var iNum=1;                 
  $("#send").click(function(){
       var $Li=$("<li></li>");  
       if(iNum==0){//INum為0時，則加1換成另外一張，實現(xiàn)輪流出現(xiàn)的效果
         iNum=iNum+1;
       }else{
         iNum=iNum-1;
       } 
       var p=$("<p></p>");
$(p).append("<div style='font-size:10px;'>"+$(".chatText").val()+"</div>"+"<br>");//獲取輸入內(nèi)容
       if($(".chatText").val()==""){//判斷輸入內(nèi)容是否為空
         alert("請輸入內(nèi)容")
       }else{
       var $touImg=$("<div><img src=images/"+headImg[iNum]+"></div>"); //輪流獲得數(shù)組照片 
       $name=uName[iNum];//輪流獲取數(shù)組的名字
       var $qqname=$("<h1 style='color:#0000FF;'>"+$name+"</h1>");//給名字添加樣式
        $($Li).append($touImg);//touImg追加在Li之后  
        $($Li).append($qqname);//qqname追加在Li之后   
        $($Li).append(p);//p追加在li之后    
        $(".chatBody ul").append($Li);//將內(nèi)容追加在ul之后
   
        $(".chatText").val("");//獲取完內(nèi)容之后清空輸入框
       }
 });
  $("#close").click(function(){
    var x;
    var r=confirm("確定關(guān)閉頁面嗎？");//詢問是否確定關(guān)閉頁面
    if(r==true)//點擊確定則關(guān)閉頁面
    close();
});
});

2.效果圖

chat.css

css文件來寫樣式

color: #ffffff; 
border-radius: 5px; 
background-color: #069dd5; 
font-size: 12px; 
margin-right: 3px; 
cursor:pointer;}
.chatBody p{
float: left; 
width:370px; 
font-size: 12px; 
color: #0000ff;}
ul,li {
  list-style: none;
}
.chatBody ul li {
  padding: 10px 0;
  /*border-bottom: 1px #999999 dashed;*/
  overflow: hidden;
}

.chatBody ul li div {
  float: left;
  border-bottom-style: none;
    margin-right: 5px;
}

}
.chatBody ul li div img {
  width: 40px;
}

.chatBody ul li h1 {
  font-size: 10px;
  line-height: 20px;

}
.chatBody ul li p {
  color:midnightblue;
  line-height: 25px;
  font-size: 8px;
}
.chatBody ul li p div {
  padding-right: 20px;
  background-color:#EFEFEF;
  width:340px;
  border-radius: 5px;/**定義獲取到輸出內(nèi)容的框的圓弧度**/
}

images

建立一個images文件夾存放圖

head01.jpg

head02.jpg

icon.jpg

ok啦，這樣就完成啦！效果視頻來一波。

白白啦！

信公眾號：Dotnet9，網(wǎng)站：Dotnet9，問題或建議：請網(wǎng)站留言，如果對您有所幫助：歡迎贊賞。

閱讀導(dǎo)航

本文背景
代碼實現(xiàn)
本文參考

1.本文背景

系列文章最后一篇，一個完整的聊天界面。當(dāng)然只看效果，具體的項目需要將左側(cè)好友列表、中間會話列表、右側(cè)聯(lián)系人簡況做成MVVM綁定的形式，做成模板才是一個完整的項目，本系列只是對界面的一個設(shè)計參考。

前面兩篇文章：

C# WPF聯(lián)系人列表（1/3）
C# WPF簡況（2/3）

三篇文章最終效果如下：

C# WPF聊天界面

2.代碼實現(xiàn)

使用 .Net CORE 3.1 創(chuàng)建名為 “Chat” 的WPF項目，添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)兩個Nuget庫，文中圖片已全部替換為站長網(wǎng)站logo圖片外鏈，直接Copy文中代碼即可運行，大家亦可下載原作者源碼研究學(xué)習(xí)，文末會給出源碼下載鏈接。

2.1 引入MD控件樣式文件

使用MD控件的常規(guī)操作，需要在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綁定開發(fā)，方便擴展。

<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 左側(cè)好友列表-->
        <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="一個熱衷于互聯(lián)網(wǎng)分享精神的程序員的網(wǎng)站！" 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 左側(cè)好友列表-->

        <!--#region 中間會話區(qū)-->
        <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 中間會話區(qū)-->

        <!--#region 右側(cè)參與會話的聯(lián)系人信息-->
        <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="一個熱衷于互聯(lián)網(wǎng)分享精神的程序員的網(wǎng)站！" 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 右側(cè)參與會話的聯(lián)系人信息-->
    </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 新增兩個用戶控件

用于展示接收的會話和發(fā)送的會話，真實的項目可以做成一個，做成模板。

接收的會話用戶控件：

<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="你好，怎么聯(lián)系你？" Foreground="White"/>
        </Border>
        <TextBlock Text="星期四下午5:45" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="10" Margin="10 -2"/>
    </Grid>
</UserControl>

發(fā)送的會話用戶控件：

<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，網(wǎng)站：https://dotnet9.com" Foreground="White"/>
        </Border>
        <TextBlock Text="星期四下午5:55" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="10" Margin="10 -2"/>
    </Grid>
</UserControl>

3.參考

學(xué)習(xí)視頻：

C# WPF Design UI – 1/3 – Contact List
C# WPF Design UI – 2/3 – Profile
C# WPF Design UI – 3/3 – Chat

最終源碼：本文代碼幾乎和源碼一致，只是文中部分英文換成中文，本地圖片換成站長網(wǎng)站Logo外鏈，方便演示。

點擊右側(cè)下載源碼：Chat

除非注明，文章均由 Dotnet9 整理發(fā)布，歡迎轉(zhuǎn)載。
轉(zhuǎn)載請注明本文地址：https://dotnet9.com/6948.html

在線咨詢

上一篇：書簽轉(zhuǎn)json格式代碼（chrome,edge...）
下一篇：最近想去做個網(wǎng)站，但是一直不知道怎么設(shè)計？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商