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

微信公眾號：Dotnet9粒梦，網站：Dotnet9，問題或建議：請網站留言聋丝，
如果對您有所幫助：歡迎贊賞躏哩。

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

閱讀導航

本文背景
代碼實現
本文參考

1.本文背景

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

前面兩篇文章：

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

三篇文章最終效果如下：

聊天界面

2.代碼實現

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

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 左側好友列表-->
        <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)網分享精神的程序員的網站刃跛！" 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 中間會話區(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 右側參與會話的聯(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)網分享精神的程序員的網站抠艾！" 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 右側參與會話的聯(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齐苛，網站：https://dotnet9.com" Foreground="White"/>
        </Border>
        <TextBlock Text="星期四下午5:55" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="10" Margin="10 -2"/>
    </Grid>
</UserControl>

3.參考

學習視頻：

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

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

點擊右側下載源碼：Chat

除非注明阁危，文章均由 Dotnet9 整理發(fā)布玛痊，歡迎轉載。

轉載請注明本文地址：https://dotnet9.com/6948.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號狂打，本站會及時推送最新技術文章

Dotnet9

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末擂煞，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子趴乡，更是在濱河造成了極大的恐慌对省，老刑警劉巖，帶你破解...
沈念sama閱讀 211,123評論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件浙宜，死亡現場離奇詭異官辽，居然都是意外死亡，警方通過查閱死者的電腦和手機粟瞬，發(fā)現死者居然都...
沈念sama閱讀 90,031評論 2贊 384
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門同仆，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人裙品，你說我怎么就攤上這事俗批。” “怎么了市怎？”我有些...
開封第一講書人閱讀 156,723評論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵岁忘，是天一觀的道長。經常有香客問我区匠，道長干像，這世上最難降的妖魔是什么帅腌？我笑而不...
開封第一講書人閱讀 56,357評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮麻汰，結果婚禮上速客，老公的妹妹穿的比我還像新娘。我一直安慰自己五鲫，他們只是感情好溺职，可當我...
茶點故事閱讀 65,412評論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著位喂，像睡著了一般浪耘。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上塑崖，一...
開封第一講書人閱讀 49,760評論 1贊 289
城市分裂傳說
那天七冲，我揣著相機與錄音，去河邊找鬼弃舒。笑死癞埠，一個胖子當著我的面吹牛状原，可吹牛的內容都是我干的聋呢。我是一名探鬼主播，決...
沈念sama閱讀 38,904評論 3贊 405
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼颠区，長吁一口氣：“原來是場噩夢啊……” “哼削锰！你這毒婦竟也來了？” 一聲冷哼從身側響起毕莱，我...
開封第一講書人閱讀 37,672評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤器贩，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后朋截，有當地人在樹林里發(fā)現了一具尸體蛹稍，經...
沈念sama閱讀 44,118評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 36,456評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年部服，在試婚紗的時候發(fā)現自己被綠了唆姐。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,599評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡廓八，死狀恐怖奉芦，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情剧蹂，我是刑警寧澤声功，帶...
沈念sama閱讀 34,264評論 4贊 328
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站宠叼，受9級特大地震影響先巴，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,857評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一伸蚯、第九天我趴在偏房一處隱蔽的房頂上張望醋闭。院中可真熱鬧，春花似錦朝卒、人聲如沸证逻。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,731評論 0贊 21
一樁弒父案抗斤，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽囚企。三九已至，卻和暖如春瑞眼，著一層夾襖步出監(jiān)牢的瞬間龙宏，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,956評論 1贊 264
情欲美人皮
我被黑心中介騙來泰國打工伤疙，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留银酗，地道東北人。一個月前我還...
沈念sama閱讀 46,286評論 2贊 360
代替公主和親
正文我出身青樓徒像，卻偏偏與公主長得像黍特，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子锯蛀，可洞房花燭夜當晚...
茶點故事閱讀 43,465評論 2贊 348

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

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

1.本文背景

2.代碼實現

2.1 引入MD控件樣式文件

2.2 界面布局

2.2.3 窗體部分事件處理

2.2.4 新增兩個用戶控件

3.參考

推薦閱讀更多精彩內容