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

C# WPF简况(2/3)

程序员文章站 2022-05-10 12:29:25
微信公众号: "Dotnet9" ,网站: "Dotnet9" ,问题或建议: "请网站留言" , 如果对您有所帮助: "欢迎赞赏" 。 C WPF简况(2/3) 阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 1.本文背景 承接上文( "C WPF联系人列表(1/3)" ),添加好友简况 ......

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

c# wpf简况(2/3)

阅读导航

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

1.本文背景

承接上文(c# wpf联系人列表(1/3)),添加好友简况。

本文效果如下:
C# WPF简况(2/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="632871194@qq.com" 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 的微信公众号,本站会及时推送最新技术文章

C# WPF简况(2/3)