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
扫一扫关注我们,
更多知识早知道!
点击阅读原文可跳转至源代码