C# WPF过渡效果实现(C# WPF Material Design UI: Transitions)
时间如流水,只能流去不流回!
点赞再看,养成习惯,这是您给我创作的动力!
本文 dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如winform、wpf、asp.net core等,亦有c++桌面相关的qt quick和qt widgets等,只分享自己熟悉的、自己会的。
阅读导航:
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
窗体移动
两个界面过渡效果
二、本文背景
youtube design com wpf 大神处习得,闹钟与新增闹钟界面切换效果。
三、代码实现
3.1 添加nuget库
站长使用.net core 3.1创建的wpf工程,创建“transitions”解决方案后,需要添加两个nuget库:materialdesignthemes和materialdesigncolors,上图的效果是使用该控件库实现的,非常强大。
3.2 工程结构
3.3 app.xaml添加md控件样式
添加4个样式
1 <application x:class="transitions.app" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:local="clr-namespace:transitions" 5 startupuri="mainwindow.xaml"> 6 <application.resources> 7 <resourcedictionary> 8 <resourcedictionary.mergeddictionaries> 9 <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.light.xaml"/> 10 <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml"/> 11 <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/primary/materialdesigncolor.blue.xaml"/> 12 <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/accent/materialdesigncolor.indigo.xaml"/> 13 </resourcedictionary.mergeddictionaries> 14 </resourcedictionary> 15 </application.resources> 16 </application>
3.4 主窗体
mainwindow.xaml代码如下
1 <window x:class="transitions.mainwindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:transitions" 7 mc:ignorable="d" 8 xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes" 9 title="" height="600" width="1080" resizemode="noresize" 10 windowstartuplocation="centerscreen" 11 fontfamily="microsoft yahei ui light" 12 windowstyle="none" mousedown="window_mousedown"> 13 <grid> 14 <materialdesign:transitioner selectedindex="0" autoapplytransitionorigins="true"> 15 <grid> 16 <local:usercontrolalarms/> 17 </grid> 18 <materialdesign:transitionerslide> 19 <materialdesign:transitionerslide.backwardwipe> 20 <materialdesign:circlewipe/> 21 </materialdesign:transitionerslide.backwardwipe> 22 <materialdesign:transitionerslide.forwardwipe> 23 <materialdesign:slidewipe direction="right"/> 24 </materialdesign:transitionerslide.forwardwipe> 25 <local:usercontrolnewalarm/> 26 </materialdesign:transitionerslide> 27 </materialdesign:transitioner> 28 </grid> 29 </window>
简单讲解:
1)需要先添加md控件命名空间
xmlns:materialdesign=”http://materialdesigninxaml.net/winfx/xaml/themes”
2)设置无边框窗体样式并拖动
resizemode="noresize" windowstartuplocation="centerscreen" fontfamily="microsoft yahei ui light" windowstyle="none" mousedown="window_mousedown"
窗体拖动方法
private void window_mousedown(object sender, mousebuttoneventargs e) { dragmove(); }
3)设置闹钟列表用户控件和新增闹钟用户控件动画排版
默认显示闹钟列表用户控件local:usercontrolalarms,动画切换时显示新增闹钟用户控件local:usercontrolnewalarm
1 <materialdesign:transitioner selectedindex="0" autoapplytransitionorigins="true"> 2 <grid> 3 <local:usercontrolalarms/> 4 </grid> 5 <materialdesign:transitionerslide> 6 <materialdesign:transitionerslide.backwardwipe> 7 <materialdesign:circlewipe/> 8 </materialdesign:transitionerslide.backwardwipe> 9 <materialdesign:transitionerslide.forwardwipe> 10 <materialdesign:slidewipe direction="right"/> 11 </materialdesign:transitionerslide.forwardwipe> 12 <local:usercontrolnewalarm/> 13 </materialdesign:transitionerslide> 14 </materialdesign:transitioner>
3.5 闹钟列表用户控件
代码简单,就是简单展示
1 <usercontrol x:class="transitions.usercontrolalarms" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:transitions" 7 xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes" 8 mc:ignorable="d" 9 d:designheight="450" d:designwidth="800"> 10 <grid> 11 <grid.rowdefinitions> 12 <rowdefinition height="200"/> 13 <rowdefinition height="50"/> 14 <rowdefinition height="*"/> 15 </grid.rowdefinitions> 16 <materialdesign:colorzone grid.row="0" mode="dark" verticalalignment="stretch" 17 horizontalalignment="stretch" verticalcontentalignment="stretch"> 18 <textblock text="闹钟" fontsize="50" margin="80" verticalalignment="center"/> 19 </materialdesign:colorzone> 20 <button style="{dynamicresource materialdesignfloatingactionbutton}" 21 command="{x:static materialdesign:transitioner.movenextcommand}" 22 horizontalalignment="left" 23 verticalalignment="bottom" 24 grid.row="0" grid.rowspan="2" margin="20"> 25 <materialdesign:packicon kind="addalarm"/> 26 </button> 27 <listview grid.row="2" margin="10"> 28 <listviewitem opacity="0.5"> 29 <grid width="300"> 30 <stackpanel> 31 <textblock fontsize="30">05:01</textblock> 32 <textblock fontsize="30" opacity="0.8">关闭</textblock> 33 </stackpanel> 34 <togglebutton horizontalalignment="right" verticalalignment="top" margin="10"/> 35 </grid> 36 </listviewitem> 37 <listviewitem opacity="0.5"> 38 <grid width="300"> 39 <stackpanel> 40 <textblock fontsize="30">05:01</textblock> 41 <textblock>晴 | 7点48分后响铃</textblock> 42 </stackpanel> 43 <togglebutton ischecked="true" horizontalalignment="right" verticalalignment="top" margin="10"/> 44 </grid> 45 </listviewitem> 46 </listview> 47 </grid> 48 </usercontrol>
3.6 新增闹钟用户控件
代码也不多,简单控件布局
1 <usercontrol x:class="transitions.usercontrolnewalarm" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:transitions" 7 xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes" 8 mc:ignorable="d" 9 d:designheight="450" d:designwidth="800"> 10 <grid> 11 <grid.rowdefinitions> 12 <rowdefinition height="200"/> 13 <rowdefinition height="*"/> 14 </grid.rowdefinitions> 15 <materialdesign:colorzone mode="primarymid" verticalalignment="stretch" horizontalalignment="stretch" 16 verticalcontentalignment="stretch"> 17 <grid horizontalalignment="stretch" verticalalignment="stretch"> 18 <textblock style="{dynamicresource materialdesignheadlinetextblock}" margin="15" 19 verticalalignment="bottom" fontsize="30">新闹钟</textblock> 20 </grid> 21 </materialdesign:colorzone> 22 <stackpanel orientation="horizontal" grid.row="1" horizontalalignment="right" margin="20"> 23 <button style="{dynamicresource materialdesignflatbutton}" margin="5" 24 command="{x:static materialdesign:transitioner.movepreviouscommand}" 25 horizontalalignment="right" verticalalignment="bottom" content="取消"/> 26 <button margin="5" 27 command="{x:static materialdesign:transitioner.movepreviouscommand}" 28 horizontalalignment="right" verticalalignment="bottom" content="保存"/> 29 </stackpanel> 30 </grid> 31 </usercontrol>
四、文章参考
建议直接打开大神视频学习,他的youtube上还有很多代码视频哦,参考:
design com wpf: https://www.youtube.com/watch?v=bt9swbh_wfw 。
五、代码下载
文章中代码几乎已经全部贴出,就是这么多。
除非注明,文章均由 dotnet9 整理发布,欢迎转载。
转载请注明本文地址:
欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章(微信公众号“dotnet9_com”):
如有收获,请大力转发,给dotnet9赞助和支持,谢谢大家对dotnet技术的关注和支持 。
上一篇: 早餐吃大枣的好处