WPF 实现3D翻转倒计时控件~

WPF开发者QQ群: 340500857

       由于微信群人数太多入群请添加小编微信号

 yanjinhuawechat 或 W_Feng_aiQ 入群

 需备注WPF开发者 

  PS:有更好的方式欢迎推荐。

  接着上一篇倒计时控件

01

代码如下

一、创建 NumberCardControl.xaml代码如下。

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.NumberCard.NumberCardControl"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews.NumberCard"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><UserControl.Resources><DropShadowEffect x:Key="NumberCardDropShadowEffect" BlurRadius="10" Color="{DynamicResource BlackColor}" Direction="-90" ShadowDepth="2"/><Style x:Key="NumberCardTextBlock"  TargetType="{x:Type TextBlock}"><Setter Property="FontWeight" Value="ExtraBold"/><Setter Property="FontSize" Value="150"/><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="Effect" Value="{StaticResource NumberCardDropShadowEffect}"/><Setter Property="Foreground" Value="{DynamicResource WhiteSolidColorBrush}"/></Style><RadialGradientBrush x:Key="BorderRadialGradientBrush" GradientOrigin="0.5,0.7" RadiusX="0.7" RadiusY="0.7"><GradientStop Color="{DynamicResource RegularTextColor}" Offset="0" /><GradientStop Color="{DynamicResource BlackColor}" Offset="1" /></RadialGradientBrush></UserControl.Resources><Border><Grid VerticalAlignment="Center" HorizontalAlignment="Center"><Border Height="300" Width="200" x:Name="PART_BorderDefault"Background="{DynamicResource BorderRadialGradientBrush}"><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><TextBlock Grid.Row="0" Text="{Binding NextNumber,RelativeSource={RelativeSource AncestorType=local:NumberCardControl}}"VerticalAlignment="Top"Margin="0,45,0,2"Style="{DynamicResource NumberCardTextBlock}"/><TextBlock Grid.Row="1" Text="{Binding Number,RelativeSource={RelativeSource AncestorType=local:NumberCardControl}}"VerticalAlignment="Bottom" Margin="0,0,0,55"Style="{DynamicResource NumberCardTextBlock}"/></Grid></Border><Viewport3D x:Name="PART_Viewport3D" Height="300" Width="200"><Viewport3D.Camera><PerspectiveCamera Position="0,-0.5,1.6" LookDirection="0,0,-1"/></Viewport3D.Camera><Viewport3D.Children><ModelVisual3D><ModelVisual3D.Content><AmbientLight Color="White"/></ModelVisual3D.Content></ModelVisual3D><ContainerUIElement3D><ContainerUIElement3D.Transform><RotateTransform3D CenterY="-.5"><RotateTransform3D.Rotation><AxisAngleRotation3D x:Name="PART_AxisAngleRotation3D" Axis="1 0 0"/></RotateTransform3D.Rotation></RotateTransform3D></ContainerUIElement3D.Transform><Viewport2DVisual3D><Viewport2DVisual3D.Material><DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/></Viewport2DVisual3D.Material><Viewport2DVisual3D.Geometry><MeshGeometry3D Positions="-1,0.5,0    -1,-0.5,0   1,-0.5,0   1,0.5,0"TextureCoordinates="0,0   0,1     1,1  1,0"TriangleIndices="0 1 2 0 2 3"/></Viewport2DVisual3D.Geometry><Border Width="300" Height="150" ClipToBounds="True" Background="{DynamicResource BorderRadialGradientBrush}"><TextBlock  Text="{Binding Number,RelativeSource={RelativeSource AncestorType=local:NumberCardControl}}" VerticalAlignment="Top" Margin="0,45,0,2"Style="{DynamicResource NumberCardTextBlock}"/></Border></Viewport2DVisual3D><Viewport2DVisual3D><Viewport2DVisual3D.Material><DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/></Viewport2DVisual3D.Material><Viewport2DVisual3D.Geometry><MeshGeometry3D Positions="1,0.5,0  1,-0.5,0   -1,-0.5,0   -1,0.5,0"TextureCoordinates="0,0   0,1   1,1  1,0"TriangleIndices="0 1 2 0 2 3"/></Viewport2DVisual3D.Geometry><Border Width="300" Height="150" ClipToBounds="True"Background="{DynamicResource BorderRadialGradientBrush}"><TextBlock   Text="{Binding NextNumber,RelativeSource={RelativeSource AncestorType=local:NumberCardControl}}" VerticalAlignment="Bottom" Margin="0,0,0,-105"RenderTransformOrigin="0.5,0.5"Style="{DynamicResource NumberCardTextBlock}"><TextBlock.RenderTransform ><ScaleTransform ScaleX="-1" ScaleY="-1"/></TextBlock.RenderTransform></TextBlock></Border></Viewport2DVisual3D></ContainerUIElement3D></Viewport3D.Children></Viewport3D></Grid></Border>
</UserControl>

二、NumberCardControl.xaml.cs 代码如下

using System.Windows;
using System.Windows.Controls;namespace WPFDevelopers.Samples.ExampleViews.NumberCard
{/// <summary>/// NumberCardControl.xaml 的交互逻辑/// </summary>public partial class NumberCardControl : UserControl{public string Number{get { return (string)GetValue(NumberProperty); }set { SetValue(NumberProperty, value); }}public static readonly DependencyProperty NumberProperty =DependencyProperty.Register("Number", typeof(string), typeof(NumberCardControl), new PropertyMetadata("10"));public string NextNumber{get { return (string)GetValue(NextProperty); }set { SetValue(NextProperty, value); }}public static readonly DependencyProperty NextProperty =DependencyProperty.Register("NextNumber", typeof(string), typeof(NumberCardControl), new PropertyMetadata("0"));public NumberCardControl(){InitializeComponent();}}
}

三、NumberCardExample.xaml 代码如下

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.NumberCard.NumberCardExample"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews.NumberCard"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800" MouseDown="UserControl_MouseDown"><Grid x:Name="MainGrid"></Grid>
</UserControl>

四、NumberCardExample.xaml.cs 代码如下

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Animation;namespace WPFDevelopers.Samples.ExampleViews.NumberCard
{/// <summary>/// NumberCardExample.xaml 的交互逻辑/// </summary>public partial class NumberCardExample : UserControl{private Storyboard storyboard;private const double seconds = 1000;private double currentSeconds = seconds;private int number = 10;public NumberCardExample(){InitializeComponent();this.Loaded += NumberCardExample_Loaded;}private void NumberCardExample_Loaded(object sender, RoutedEventArgs e){storyboard = new Storyboard();storyboard.FillBehavior = FillBehavior.Stop;var num = 1;for (int i = num; i <= number; i++){currentSeconds = seconds * (number - i);var numberCard = new NumberCardControl();numberCard.Number = i.ToString();numberCard.Name = $"numberCard{i}";var next = number;if (!i.Equals(num))next = i - 1;elsenext = 0;numberCard.NextNumber = next.ToString();this.RegisterName(numberCard.Name, numberCard);numberCard.PART_BorderDefault.Name = $"PART_BorderDefault{i}";this.RegisterName(numberCard.PART_BorderDefault.Name, numberCard.PART_BorderDefault);TimeSpan beginTime = TimeSpan.FromMilliseconds(currentSeconds);DoubleAnimation doubleAnimation = new DoubleAnimation();doubleAnimation.From = 0;doubleAnimation.To = 180;doubleAnimation.BeginTime = beginTime;doubleAnimation.Duration = TimeSpan.FromMilliseconds(seconds);numberCard.PART_Viewport3D.Name = $"Viewport3D{i}";this.RegisterName(numberCard.PART_Viewport3D.Name, numberCard.PART_Viewport3D);Storyboard.SetTargetName(doubleAnimation, numberCard.PART_Viewport3D.Name);Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Viewport3D.Children)[1].(ContainerUIElement3D.Transform).(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"));storyboard.Children.Add(doubleAnimation);var animationOpacity = new DoubleAnimation{Duration = TimeSpan.FromMilliseconds(0),BeginTime = doubleAnimation.Duration.TimeSpan + beginTime,From = 1.0,To = 0,};Storyboard.SetTargetName(animationOpacity, numberCard.Name);Storyboard.SetTargetProperty(animationOpacity, new PropertyPath(UserControl.OpacityProperty));storyboard.Children.Add(animationOpacity);MainGrid.Children.Add(numberCard);}}private void UserControl_MouseDown(object sender, MouseButtonEventArgs e){if (storyboard != null && storyboard.Children.Count > 0){storyboard.Begin(this);}}}
}

02


效果预览

鸣谢素材提供者 - 屈越

源码地址如下

Github:https://github.com/WPFDevelopersOrg

Gitee:https://gitee.com/WPFDevelopersOrg

WPF开发者QQ群: 340500857 

Github:https://github.com/WPFDevelopersOrg

出处:https://www.cnblogs.com/yanjinhua

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/WPFDevelopersOrg

fd2cbcf81bfe189ea6c6b34a5bae90fa.png

扫一扫关注我们,

27aeb7ae2e3f272393ab8223fa05ac81.gif

更多知识早知道!

3d432dec3ea38ed02f7f600fa8536a1f.gif

点击阅读原文可跳转至源代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之Android studio基本调试和快捷键

第一种调试方法: 如果APP是单进程,直接debug运行,如下图 第二种调试方法: 第二种就是调试当前已经处于运行状态下的App,这也是我们用的更多的一种调试手段,即 Attach debugger to Android process 。点击运行按钮右侧第三个按钮,弹出 Choose Process 窗口,选择对应的进…

Windows 2008 R2安装DHCP服务器问题及解决方法

错误一&#xff1a;0x80074E6F 指定的服务器已在目录服务中造成此错误的原因是DHCP服务器没有正常卸载&#xff0c;第二次安装就会报如下图错误解决方法1.卸载DHCP服务器2.重启服务器3.打开adsiedit.msc4.如下图展开到 CNNetServices5.删除CNYour ServerName6.重新安装DHCP服务…

免费动态域名解析

DDNS 顾名思义就是动态域名解析&#xff0c;让域名绑定在动态 IP 上&#xff0c;比如拨号上网的 ADSL 用户。国内的 DDNS 服务有花生壳和 3322.org 这种提供商&#xff0c;我一直在用花生壳的免费 DDNS&#xff0c;可是近期情况非常糟糕&#xff0c;我到北京以来&#xff0c;就…

2021 年 CNCF 和开源速度的年终报告

深入了解开发速度最快的项目&#xff0c;可以很好地表明哪些领域正在起飞&#xff0c;哪些平台可能在未来几个月和几年内取得成功。如何评估一个项目的活跃度&#xff0c;通常从这几个方面, commits, contributions, issues 和 pull requests&#xff0c;而使用气泡图是一种很巧…

清华姚班毕业生不配自信?张昆玮在豆瓣征女友,却被网友群嘲......

全世界只有3.14 % 的人关注了爆炸吧知识不要看脸好好说话没想到&#xff0c;清华也有被瞧不起的一天。上周&#xff0c;山西某网友在D瓣上发布了一则征友贴&#xff1a;总结下来&#xff0c;就是一句话&#xff1a;俺&#xff0c;一介俗人&#xff0c;二本教师&#xff0c;兼职…

python自带的函数有哪些_为什么说 Python 内置函数并不是万能的?

在Python猫的上一篇文章中&#xff0c;我们对比了两种创建列表的方法&#xff0c;即字面量用法 [] 与内置类型用法 list()&#xff0c;进而分析出它们在运行速度上的差异。在分析为什么 list() 会更慢的时候&#xff0c;文中说到它需要经过名称查找与函数调用两个步骤&#xff…

抽象类与接口比较

为什么80%的码农都做不了架构师&#xff1f;>>> 老生重谈&#xff0c;每次谈却有不同的收获。抽象类与接口联系 1、是什么 抽象类&#xff1a; public abstract class Door{public int height 250;public int width 150;void open(){System.out.print(&qu…

Prism源代码解析(IRegionManager)

概要本文主要介绍Prism的IRegionManager, 主要分析源代码的执行流程, 来介绍内部实现的几个核心接口调用过程。通过本文, 你可以熟练的掌握Prism当中以下接口的作用以及使用方法, 如下所示:IRgionManagerINavigationAwareINavigateAsyncIRegionNavigationServiceIConfirmNaviga…

Android后台强制结束进程,Application入口或者activity回调的是哪个方法?

问题描述dengdeng 解决方案1如果是系统强制结束&#xff0c;不会调用的 转载于:https://www.cnblogs.com/yiguobei99/p/4002126.html

日本的电视节目到底能有多特别?

1 是不是设计师忘了开扇窗&#xff1f;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 路灯&#xff1a;&#xff1f;&#xff1f;&#xff1f;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 当代大学生的真实水平&#xff08;素材来源网络&#xff0…

记一次 Oracle无法连接 问题分析

前言今天&#xff0c;同事告诉我&#xff0c;有台Oracle服务器异常断电&#xff0c;重启后发现无法连接了。分析过程1.检查服务状态查看Oracle的listerner服务和service服务&#xff0c;发现都是正在运行状态&#xff0c;说明服务是正常的。2.检查端口状态在客户机上使用&#…

最详细的最小堆构建、插入、删除的过程图解

转载&#xff1a;http://blog.csdn.net/hrn1216/article/details/51465270 1.简介 最小堆是一棵完全二叉树&#xff0c;非叶子结点的值不大于左孩子和右孩子的值。本文以图解的方式&#xff0c;说明 最小堆的构建、插入、删除的过程。搞懂最小堆的相应知识后&#xff0c;最大堆…

初探mysql数据库模式(一)

数据库模式是什么&#xff1f; 数据库模式是描述整个数据库的数据结构和数据库底层架构的事务。它分为逻辑模式&#xff08;俗称&#xff1a;“模式”&#xff09;&#xff0c;外模式(俗称&#xff1a;“子模式”or“用户模式”)&#xff0c;内模式(俗称&#xff1a;“存…

数学界最恐怖的存在!54张图读懂2600年数学史,看完跪下了......

全世界只有3.14 % 的人关注了爆炸吧知识“中国现代数学之父”华罗庚曾说过宇宙之大&#xff0c;粒子之微火箭之速&#xff0c;化工之巧地球之变&#xff0c;生物之谜日用之繁&#xff0c;无处不用数学回首往昔数学始终伴随我们左右纵横交错的几何、繁琐复杂的运算难以求解的方程…

R中大数据量数据框的合并慎重使用rbind

最近在用R处理百万级的数据&#xff0c;程序本身是线性扫描&#xff0c;可是随着数据量的增加&#xff0c;运行时间却不是线性增加&#xff0c;一度几天都运行不完。 怀疑是其中rbind函数造成的&#xff0c;查询到这篇文章&#xff0c;也说了这个问题 http://blog.sina.com.cn/…

python顺序结构实验设计_Python程序设计实验报告二:顺序结构程序设计

安徽工程大学 Python程序设计实验报告 班级 物流192 姓名 周立 学号 3190505227成绩 日期 3月4日 指导老师修宇 实验二 顺序结构程序设计&#xff08;验证性实验&#xff09; 【实验目的】 &#xff08;1&#xff09;掌握数据的输入输出的方法&#xff1b; &#xff08;2&#…

寒窗苦读十多年,我的毕业论文只研究了一个「屁」

全世界只有3.14 % 的人关注了爆炸吧知识放屁&#xff0c;是公共场合里的社交忌讳。在人头济济的电梯和地铁车厢里&#xff0c;一个呼之欲出的屁&#xff0c;对任何人来说&#xff0c;都是一场心理与生理之间的拉锯战。如果选择放屁&#xff0c;虽然疏通了肠道&#xff0c;但却拉…

Rust 能否替代 C 语言,主宰 Linux 的世界?

最近看到一个程序员工资排行的图&#xff0c;435501份数据&#xff0c;调查显示&#xff1a;Rust 是最赚钱的&#xff01;随着 Rust 的发展和表现出的优点&#xff0c;它吸引了越来越多的程序员关注。首先&#xff0c;Rust 没有历史包袱&#xff0c;集表达力、高性能、内存安全…