WPF 实现3D翻转倒计时控件~
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 = $"numberCardi";
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_BorderDefaulti";
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 = $"Viewport3Di";
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
扫一扫关注我们，
更多知识早知道！
点击阅读原文可跳转至源代码
以上是关于WPF 实现3D翻转倒计时控件~的主要内容，如果未能解决你的问题，请参考以下文章