C# WPF簡況（2/3）

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

C# WPF簡況（2/3）

閱讀導航

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

承接上文（C# WPF聯絡人列表（1/3））,新增好友簡況。

本文效果如下：

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;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;一個熱衷於網際網路分享精神的程式設計師的網站!&#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;[email protected]&#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分鐘，看視訊學習吧。

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

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

109

XAML

∨ Laravel Eloquent 必備的實用技巧

劇多

C# WPF簡況（2/3）

XAML