C#中如何实现WPF联系人列表

发布时间:2021-12-01 09:14:24 作者:小新
来源:亿速云 阅读:272

这篇文章将为大家详细讲解有关C#中如何实现WPF联系人列表,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

1.本文背景

本文效果如下: 

C#中如何实现WPF联系人列表  
联系人列表

2.代码实现

使用 .Net CORE 3.1 创建名为 “Chat” 的WPF项目,添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)两个Nuget库,文中部分图片可在文末视频配套源码中下载。

2.1 引入MD控件样式文件

使用MD控件的常规操作,需要在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 界面布局

纯粹的布局代码:

<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"
       mc:Ignorable="d"
       Height="600" Width="1080" ResizeMode="NoResize" MouseLeftButtonDown="Window_MouseLeftButtonDown"
       WindowStartupLocation="CenterScreen" WindowStyle="None">
   <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="270"/>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="270"/>
       </Grid.ColumnDefinitions>

       <Grid Grid.Column="1" Background="#FFE4E4E4"/>

       <StackPanel Grid.Column="0" Background="{StaticResource PrimaryHueDarkBrush}">
           <StackPanel Orientation="Horizontal" Background="White">
               <Image Width="210" Height="80" Source="Assets/logo.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="一个热衷于互联网分享精神的程序员的网站!" 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>

   </Grid>
</Window>


2.2.3 窗体拖动

后台代码

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

关于“C#中如何实现WPF联系人列表”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. Exchange 隐藏联系人在地址列表中显示
  2. C# WPF 开发利器 集合

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

wpf

上一篇:Oracle的数据字典是什么

下一篇:ADO.NET OracleClient命名空间对象有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》