C# WPF简况（2/3）

2020-03-30 16:47:26 来源：阅读：-

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。

阅读导航

本文背景
代码实现
本文参考

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;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分钟，看视频学习吧。

3.参考

学习视频：C# WPF Design UI – 2/3 – Profile
视频配套源码：Chat

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/6945.html

C# WPF简况（2/3）

1.本文背景

2.代码实现

2.1 引入MD控件样式文件

2.2 界面布局

2.2.3 窗体部分事件处理

3.参考

大家都爱看进入新闻频道 >

热点排行

C# WPF简况（2/3）

1.本文背景

2.代码实现

2.1 引入MD控件样式文件

2.2 界面布局

2.2.3 窗体部分事件处理

3.参考

大家都爱看 进入新闻频道 >

热点排行

大家都爱看进入新闻频道 >