C# WPF簡況（2/3）

2020-03-30 10:03:48 閱讀：- 來源：

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

閱讀導(dǎo)航

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

1.本文背景

承接上文（C# WPF聯(lián)系人列表（1/3））,添加好友簡況。

本文效果如下：

2.代碼實(shí)現(xiàn)

使用 .Net CORE 3.1 創(chuàng)建名為 “Chat” 的WPF項(xiàng)目，添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)兩個Nuget庫，文中部分圖片可在文末視頻配套源碼中下載。

2.1 引入MD控件樣式文件

使用MD控件的常規(guī)操作，需要在App.xaml中引入4個樣式文件

&lt;Application x:Class=&#34;Chat.App&#34;             xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;             xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;             StartupUri=&#34;MainWindow.xaml&#34;&gt;    &lt;Application.Resources&gt;        &lt;ResourceDictionary&gt;            &lt;ResourceDictionary.MergedDictionaries&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Green.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml&#34; /&gt;            &lt;/ResourceDictionary.MergedDictionaries&gt;        &lt;/ResourceDictionary&gt;    &lt;/Application.Resources&gt;&lt;/Application&gt;

2.2 界面布局

純粹的布局代碼：

&lt;Window x:Class=&#34;Chat.MainWindow&#34;        xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;        xmlns:materialDesign=&#34;http://materialdesigninxaml.net/winfx/xaml/themes&#34;        xmlns:d=&#34;http://schemas.microsoft.com/expression/blend/2008&#34;        xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;        xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34;        mc:Ignorable=&#34;d&#34;        Height=&#34;600&#34; Width=&#34;1080&#34; ResizeMode=&#34;NoResize&#34; MouseLeftButtonDown=&#34;Window_MouseLeftButtonDown&#34;        WindowStartupLocation=&#34;CenterScreen&#34; WindowStyle=&#34;None&#34; FontFamily=&#34;Dosis&#34;&gt;    &lt;Grid&gt;        &lt;Grid.ColumnDefinitions&gt;            &lt;ColumnDefinition Width=&#34;270&#34;/&gt;            &lt;ColumnDefinition Width=&#34;*&#34;/&gt;            &lt;ColumnDefinition Width=&#34;270&#34;/&gt;        &lt;/Grid.ColumnDefinitions&gt;        &lt;Grid Grid.Column=&#34;1&#34; Background=&#34;#FFE4E4E4&#34;/&gt;        &lt;StackPanel Grid.Column=&#34;0&#34; Background=&#34;{StaticResource PrimaryHueDarkBrush}&#34;&gt;            &lt;StackPanel Orientation=&#34;Horizontal&#34; Background=&#34;White&#34;&gt;                &lt;Image Width=&#34;210&#34; Height=&#34;80&#34; Source=&#34;Assets/logo.png&#34;/&gt;                &lt;Button Style=&#34;{StaticResource MaterialDesignFlatButton}&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;PlusCircle&#34; Width=&#34;24&#34; Height=&#34;24&#34;/&gt;                &lt;/Button&gt;            &lt;/StackPanel&gt;            &lt;TextBox Margin=&#34;20 10&#34; Style=&#34;{StaticResource MaterialDesignFloatingHintTextBox}&#34; materialDesign:HintAssist.Hint=&#34;搜索&#34; Foreground=&#34;White&#34;/&gt;            &lt;Grid&gt;                &lt;Grid.ColumnDefinitions&gt;                    &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                    &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                    &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                    &lt;ColumnDefinition Width=&#34;*&#34;/&gt;                &lt;/Grid.ColumnDefinitions&gt;                &lt;Button Style=&#34;{StaticResource MaterialDesignFlatButton}&#34; Grid.Column=&#34;0&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;History&#34; Foreground=&#34;White&#34;/&gt;                &lt;/Button&gt;                &lt;Button Style=&#34;{StaticResource MaterialDesignFlatButton}&#34; Grid.Column=&#34;1&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;People&#34; Foreground=&#34;White&#34;/&gt;                &lt;/Button&gt;                &lt;Button Style=&#34;{StaticResource MaterialDesignFlatButton}&#34; Grid.Column=&#34;2&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;Contacts&#34; Foreground=&#34;White&#34;/&gt;                &lt;/Button&gt;                &lt;Button Style=&#34;{StaticResource MaterialDesignFlatButton}&#34; Grid.Column=&#34;3&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;Archive&#34; Foreground=&#34;White&#34;/&gt;                &lt;/Button&gt;            &lt;/Grid&gt;            &lt;ListView&gt;                &lt;ListViewItem HorizontalAlignment=&#34;Stretch&#34;&gt;                    &lt;Grid HorizontalAlignment=&#34;Center&#34; Margin=&#34;5&#34;&gt;                        &lt;Grid.ColumnDefinitions&gt;                            &lt;ColumnDefinition Width=&#34;50&#34;/&gt;                            &lt;ColumnDefinition Width=&#34;150&#34;/&gt;                            &lt;ColumnDefinition Width=&#34;50*&#34;/&gt;                        &lt;/Grid.ColumnDefinitions&gt;                        &lt;Border Width=&#34;40&#34; Height=&#34;40&#34; CornerRadius=&#34;25&#34; BorderBrush=&#34;White&#34; BorderThickness=&#34;0.6&#34;&gt;                            &lt;Border.Background&gt;                                &lt;ImageBrush ImageSource=&#34;https://img.dotnet9.com/logo.png&#34;/&gt;                            &lt;/Border.Background&gt;                        &lt;/Border&gt;                        &lt;Border Width=&#34;10&#34; Height=&#34;10&#34; VerticalAlignment=&#34;Bottom&#34; Margin=&#34;5&#34; HorizontalAlignment=&#34;Right&#34; CornerRadius=&#34;15&#34; Background=&#34;LightGreen&#34;/&gt;                        &lt;StackPanel Grid.Column=&#34;1&#34;&gt;                            &lt;TextBlock Text=&#34;Dotnet9.com&#34; Margin=&#34;10 0&#34;/&gt;                            &lt;TextBlock Text=&#34;一個熱衷于互聯(lián)網(wǎng)分享精神的程序員的網(wǎng)站!&#34; Margin=&#34;10 0&#34; TextTrimming=&#34;CharacterEllipsis&#34; Opacity=&#34;0.6&#34; FontSize=&#34;11&#34;/&gt;                        &lt;/StackPanel&gt;                        &lt;Border Grid.Column=&#34;2&#34; Width=&#34;20&#34; Height=&#34;20&#34; CornerRadius=&#34;15&#34; Background=&#34;White&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34; Margin=&#34;5&#34;&gt;                            &lt;TextBlock FontSize=&#34;11&#34; Text=&#34;9&#34; Foreground=&#34;{StaticResource PrimaryHueDarkBrush}&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34;/&gt;                        &lt;/Border&gt;                    &lt;/Grid&gt;                &lt;/ListViewItem&gt;            &lt;/ListView&gt;        &lt;/StackPanel&gt;        &lt;StackPanel Grid.Column=&#34;2&#34; Background=&#34;White&#34;&gt;            &lt;Button HorizontalAlignment=&#34;Right&#34; Margin=&#34;10&#34; Style=&#34;{StaticResource MaterialDesignFlatButton}&#34; Click=&#34;Close_Click&#34;&gt;                &lt;materialDesign:PackIcon Kind=&#34;Close&#34;/&gt;            &lt;/Button&gt;            &lt;Border Width=&#34;150&#34; Height=&#34;150&#34; CornerRadius=&#34;80&#34; BorderThickness=&#34;1&#34; BorderBrush=&#34;Gray&#34;&gt;                &lt;Border.Background&gt;                    &lt;ImageBrush ImageSource=&#34;https://img.dotnet9.com/logo.png&#34;/&gt;                &lt;/Border.Background&gt;            &lt;/Border&gt;            &lt;TextBlock Text=&#34;Dotnet9&#34; HorizontalAlignment=&#34;Center&#34; Margin=&#34;0 10 0 0&#34; Foreground=&#34;Gray&#34; FontSize=&#34;18&#34; FontWeight=&#34;Bold&#34;/&gt;            &lt;TextBlock Text=&#34;Dotnet程序員&#34; FontSize=&#34;13&#34; Foreground=&#34;Gray&#34; HorizontalAlignment=&#34;Center&#34; Opacity=&#34;0.8&#34;/&gt;            &lt;TextBlock Text=&#34;時間如流水，只能流去不流回。&#34; FontSize=&#34;8&#34; Foreground=&#34;Gray&#34; HorizontalAlignment=&#34;Center&#34; Opacity=&#34;0.8&#34;/&gt;            &lt;StackPanel Margin=&#34;20&#34;&gt;                &lt;StackPanel Orientation=&#34;Horizontal&#34; Margin=&#34;0 3&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;Location&#34; Foreground=&#34;Gray&#34;/&gt;                    &lt;TextBlock Text=&#34;成都&#34; Margin=&#34;10 0&#34; Foreground=&#34;Gray&#34;/&gt;                &lt;/StackPanel&gt;                &lt;StackPanel Orientation=&#34;Horizontal&#34; Margin=&#34;0 3&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;Cellphone&#34; Foreground=&#34;Gray&#34;/&gt;                    &lt;TextBlock Text=&#34;186 2806 0000&#34; Margin=&#34;10 0&#34; Foreground=&#34;Gray&#34;/&gt;                &lt;/StackPanel&gt;                &lt;StackPanel Orientation=&#34;Horizontal&#34; Margin=&#34;0 3&#34;&gt;                    &lt;materialDesign:PackIcon Kind=&#34;Email&#34; Foreground=&#34;Gray&#34;/&gt;                    &lt;TextBlock Text=&#34;632871194@qq.com&#34; Margin=&#34;10 0&#34; Foreground=&#34;Gray&#34;/&gt;                &lt;/StackPanel&gt;            &lt;/StackPanel&gt;            &lt;TextBlock Text=&#34;視頻&#34; Margin=&#34;20 0&#34; Foreground=&#34;Gray&#34;/&gt;            &lt;StackPanel Orientation=&#34;Horizontal&#34; Margin=&#34;20 0&#34;&gt;                &lt;Border Width=&#34;50&#34; Height=&#34;50&#34; CornerRadius=&#34;30&#34; Margin=&#34;5&#34;&gt;                    &lt;Border.Background&gt;                        &lt;ImageBrush ImageSource=&#34;https://img.dotnet9.com/logo.png&#34;/&gt;                    &lt;/Border.Background&gt;                &lt;/Border&gt;                &lt;Border Width=&#34;50&#34; Height=&#34;50&#34; CornerRadius=&#34;30&#34; Margin=&#34;5&#34;&gt;                    &lt;Border.Background&gt;                        &lt;ImageBrush ImageSource=&#34;https://img.dotnet9.com/logo.png&#34;/&gt;                    &lt;/Border.Background&gt;                &lt;/Border&gt;                &lt;Border Width=&#34;50&#34; Height=&#34;50&#34; CornerRadius=&#34;30&#34; Margin=&#34;5&#34;&gt;                    &lt;Border.Background&gt;                        &lt;ImageBrush ImageSource=&#34;https://img.dotnet9.com/logo.png&#34;/&gt;                    &lt;/Border.Background&gt;                &lt;/Border&gt;            &lt;/StackPanel&gt;        &lt;/StackPanel&gt;    &lt;/Grid&gt;&lt;/Window&gt;

2.2.3 窗體部分事件處理

后臺代碼

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){    DragMove();}private void Close_Click(object sender, RoutedEventArgs e){    this.Close();}

本文略短，原文視頻11分鐘，看視頻學(xué)習(xí)吧。

3.參考

學(xué)習(xí)視頻：C# WPF Design UI – 2/3 – Profile
視頻配套源碼：Chat

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

C# WPF簡況（2/3）

1.本文背景

2.代碼實(shí)現(xiàn)

2.1 引入MD控件樣式文件

2.2 界面布局

2.2.3 窗體部分事件處理

3.參考

相關(guān)新聞

專題推薦

趙薇力壓陳凱歌，成最受歡

《中餐廳3》收官，錄制地

湖南衛(wèi)視廣告跌至60億、

王老吉線下實(shí)體店，上海的

點(diǎn)擊排行榜

C# WPF簡況（2/3）

1.本文背景

2.代碼實(shí)現(xiàn)

2.1 引入MD控件樣式文件

2.2 界面布局

2.2.3 窗體部分事件處理

3.參考

相關(guān)新聞

專題推薦

趙薇力壓陳凱歌，成最受歡

《中餐廳3》收官，錄制地

湖南衛(wèi)視廣告跌至60億、

王老吉線下實(shí)體店，上海的

點(diǎn)擊排行榜

趙薇力壓陳凱歌，成最受歡

湖南衛(wèi)視廣告跌至60億、