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

c# wpf简况（2/3）

阅读导航

1. 本文背景
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个样式文件

<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" fontfamily="dosis">
    <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>

        <stackpanel grid.column="2" background="white">
            <button horizontalalignment="right" margin="10" style="{staticresource materialdesignflatbutton}" click="close_click">
                <materialdesign:packicon kind="close"/>
            </button>

            <border width="150" height="150" cornerradius="80" borderthickness="1" borderbrush="gray">
                <border.background>
                    <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                </border.background>
            </border>

            <textblock text="dotnet9" horizontalalignment="center" margin="0 10 0 0" foreground="gray" fontsize="18" fontweight="bold"/>
            <textblock text="dotnet程序员" fontsize="13" foreground="gray" horizontalalignment="center" opacity="0.8"/>
            <textblock text="时间如流水，只能流去不流回。" fontsize="8" foreground="gray" horizontalalignment="center" opacity="0.8"/>

            <stackpanel margin="20">
                <stackpanel orientation="horizontal" margin="0 3">
                    <materialdesign:packicon kind="location" foreground="gray"/>
                    <textblock text="成都" margin="10 0" foreground="gray"/>
                </stackpanel>
                <stackpanel orientation="horizontal" margin="0 3">
                    <materialdesign:packicon kind="cellphone" foreground="gray"/>
                    <textblock text="186 2806 0000" margin="10 0" foreground="gray"/>
                </stackpanel>
                <stackpanel orientation="horizontal" margin="0 3">
                    <materialdesign:packicon kind="email" foreground="gray"/>
                    <textblock text="[e-mail]" margin="10 0" foreground="gray"/>
                </stackpanel>
            </stackpanel>

            <textblock text="视频" margin="20 0" foreground="gray"/>
            <stackpanel orientation="horizontal" margin="20 0">
                <border width="50" height="50" cornerradius="30" margin="5">
                    <border.background>
                        <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                    </border.background>
                </border>
                <border width="50" height="50" cornerradius="30" margin="5">
                    <border.background>
                        <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                    </border.background>
                </border>
                <border width="50" height="50" cornerradius="30" margin="5">
                    <border.background>
                        <imagebrush imagesource="https://img.dotnet9.com/logo.png"/>
                    </border.background>
                </border>
            </stackpanel>
        </stackpanel>
    </grid>
</window>

2.2.3 窗体部分事件处理

后台代码

private void window_mouseleftbuttondown(object sender, mousebuttoneventargs e)
{
    dragmove();
}

private void close_click(object sender, routedeventargs e)
{
    this.close();
}

本文略短，原文视频11分钟，看视频学习吧。

3.参考

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

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

转载请注明本文地址：https://dotnet9.com/6945.html

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