欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

C# WPF联系人列表(1/3)

程序员文章站 2022-10-04 14:33:58
微信公众号: "Dotnet9" ,网站: "Dotnet9" ,问题或建议: "请网站留言" , 如果对您有所帮助: "欢迎赞赏" 。 C WPF联系人列表(1/3) 阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 1.本文背景 聊天软件大家用的比较多,用WPF做个联系人列表试试 本文效 ......

微信公众号:dotnet9,网站:dotnet9,问题或建议:,
如果对您有所帮助:。

c# wpf联系人列表(1/3)

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考

1.本文背景

聊天软件大家用的比较多,用wpf做个联系人列表试试

本文效果如下:
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个样式文件

<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();
}

本文略短,原作者视频也有22分钟,看视频学习吧。

3.参考

  1. 学习视频:c# wpf design ui - 1/3 - contact list
  2. 视频配套源码:chat

除非注明,文章均由 dotnet9 整理发布,欢迎转载。

转载请注明本文地址:

欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章

C# WPF联系人列表(1/3)