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

最新推荐文章于 2024-08-08 11:34:11 发布
最新推荐文章于 2024-08-08 11:34:11 发布
阅读量479 收藏
点赞数
文章标签： c# wpf winform .net jwt
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654087468&idx=4&sn=57416cb70a1872d5cc062d2e1ac5b8aa&chksm=80d80d79b7af846f3d5d98351563a39c94a11a9ed1f2e906b363bfddca1c1deeba029757c394&scene=126&&sessionid=0
版权

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;
                else
                    next = 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

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

dotNET跨平台
关注
WPF实现3D翻牌式倒计时特效
dnazhd的博客
07-03 1468
实现效果如下： 思路：使用自定义控件，设置一个背板 MyCardControlBottom，一个卡牌翻动的前部 MyCardControlFront，一个卡牌翻动后的背部 MyCardControlBack，另外实现卡牌翻动的MyCardControl；在主窗体中设置一计时器，根据卡牌上的数字和计时器时间启动翻牌动作。 主要代码： 1、自定义控件MyCardControlBottom <UserControl x:Class="TurnOverCards.MyCardControlBot
wpf 脑力风暴，考验你的记忆力
06-07
1. **XAML**：XML-based标记语言，用于描述WPF应用的UI布局和控件。通过XAML，开发者可以清晰地定义UI元素和它们的样式，实现数据绑定和事件处理。 2. **数据绑定**：WPF的强大特性，允许UI元素与后台数据模型直接...
WPF实现倒计时
weixin_44587829的博客
09-18 4371
WPF实现倒计时 用WPF做一个简单的倒计时。 实现代码如下： 首先布局样式，XAML代码： <Grid> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> </Grid> <Grid Grid.Row="0"> &
好玩的WPF第一弹：窗口抖动+边框阴影效果+倒计时显示文字
weixin_33825683的博客
06-10 315
大家一进到博客就应该看到这张GIF了吧……好吧，今天不是星期一…… 那么就来一起做做这个效果啦！看完记得点赞哦~ 新建一个WPF项目 如果新建WPF项目应该不用我说了吧，在C#下面找找就好了。 MainWindow.xaml 在初始的Window下添加如下属性： x:Name="mainWindow" Wi...
WPF中几种计时器的使用方式
最新发布
sun916328213的博客
08-08 207
【代码】WPF中几种计时器的使用方式。
在WPF中添加3D特性
weixin_34191734的博客
10-23 239
原文:在WPF中添加3D特性 35.4  在WPF中添加3D特性 本节介绍WPF中的3D特性，其中包含了开始使用该特性的信息。 提示： WPF中的3D特性在System.Windows.Media.Media3D命名空间中。 为了理解WPF中的3D特性，一定要知道坐标系统之间的区别。图35-22显示了WPF 3D中的坐标系统。原点位于中心。X轴的正值在右边，负值在左边...
WPF实现3D翻转的动画效果
weixin_30279671的博客
09-25 266
WPF实现3D翻转的动画效果 原文:WPF实现3D翻转的动画效果1、前端代码实现 1.1 原理见代码注析 <Grid MouseDown="Grid_MouseDown"> <Viewport3D> <Viewport3D.Camera> <...
WPF实战：3D翻牌式倒计时控件代码与实现
通过以上步骤，您可以创建出一个具有3D视觉效果的翻牌式倒计时控件，用于展示剩余时间或者作为游戏中的计数器。这种动态效果能提升应用的吸引力，适用于多种场景，如倒计时广告、游戏环节或者互动式教程。
timer计时 wpf_WPF创建一个计时控件
weixin_30813385的博客
12-24 239
最近在搞频率方面的研究，参照别人代码写了这个计时程序。xaml部分：xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Height="200" Width="445" HorizontalAlignment="C...
WPF加载模型及控件3D化(控件作为纹理)源码
11-30
Assimp加载模型，把一个球体模型中贴上mediaplayer播放视频。
wpf +3d 旋转控件，正反两面均可以设置
02-17
类似QQ概念版，旋转窗体，旋转图片，thriple控件，简单易学 类似QQ概念版，旋转窗体，旋转图片，thriple控件，简单易学
wpf + 3d 帮你轻松实现wpf的3D效果
03-25
wpf + 3d 帮你轻松实现wpf的3D效果
WPF自定义样式W：TabControlTest,倒计时,数字加减文本框,WPF圆形图像
04-21
WPF实现， BindConvert, Comboximage GridSplit MessageBox ScrollViewer TabControlTest 倒计时 数字加减文本框 WPF圆形图像
wpf做的3d滑动gallery
weixin_30289831的博客
05-02 166
随着iphone\ipad的流行及热捧，现在做移动产品不管是什么平台的，领导总想做成像ios系统的样子。自从微软发布了window8预览版之后，领导就想着把公司的移动产品移殖到window8上去了。公司的移动产品的主界面是做成3d gallery的立体画册效果的，如下图： window8是不带这样的控件的，究竟有没有实现如此效果的控件我就不清楚了，我认为是没有的，因为我在vs上找不到，也不符...
wpf 实现3D按钮
大黄鸭在发光的专栏
01-11 1161
wpf 实现3D按钮
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值