C# WPF聯絡人列表（1/3）

首頁>技術>沙漠盡頭的狼2020-01-11 18:55

C# WPF聯絡人列表（1/3）

閱讀導航

本文背景程式碼實現本文參考1.本文背景

聊天軟體大家用的比較多，用WPF做個聯絡人列表試試。

本文效果如下：

聯絡人列表

2.程式碼實現

使用 .Net CORE 3.1 建立名為 “Chat” 的WPF專案，新增 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)兩個Nuget庫，文中部分圖片可在文末視訊配套原始碼中下載。

2.1 引入MD控制元件樣式檔案

使用MD控制元件的常規操作，需要在App.xaml中引入4個樣式檔案

&lt;Application x:Class=&#34;Chat.App&#34;             xmlns=&#34;/file/2020/01/11/20200111184757_583.jpg.aspx             xmlns:x=&#34;/file/2020/01/11/20200111184759_585.jpg.aspx             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;/file/2020/01/11/20200111184757_583.jpg.aspx        xmlns:materialDesign=&#34;/file/2020/01/11/20200111184800_586.jpg        xmlns:d=&#34;/file/2020/01/11/20200111184800_587.jpg.aspx        xmlns:x=&#34;/file/2020/01/11/20200111184759_585.jpg.aspx        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;&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;/file/2020/01/11/20200111184803_589.jpg.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;一個熱衷於網際網路分享精神的程式設計師的網站!&#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;/Grid&gt;&lt;/Window&gt;

2.2.3 窗體拖動

後臺程式碼

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){    DragMove();}

本文略短，原作者視訊也有22分鐘，看視訊學習吧。

3.參考學習視訊：C# WPF Design UI – 1/3 – Contact List視訊配套原始碼：Chat

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。

114

XAML

軟體

∨ C# WPF簡況（2/3）

熱門排行

劇多

C# WPF聯絡人列表（1/3）

XAML

軟體