WPF 实现大转盘抽奖~
WPF开发者QQ群: 340500857
由于微信群人数太多入群请添加小编微信号
yanjinhuawechat 或 W_Feng_aiQ 邀请入群
需备注WPF开发者
PS:有更好的方式欢迎推荐。
接着上一篇圆形控件
01
—
代码如下
一、创建 PrizeItemControl.cs代码如下。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;namespace WPFDevelopers.Controls
{[TemplatePart(Name = RotateTransformTemplateName, Type = typeof(RotateTransform))]public class PrizeItemControl : Control{private static readonly Type _typeofSelf = typeof(PrizeItemControl);private const string RotateTransformTemplateName = "PART_RotateTransform";private RotateTransform _angleRotateTransform;public double Angle{get { return (double)GetValue(AngleProperty); }set { SetValue(AngleProperty, value); }}public static readonly DependencyProperty AngleProperty =DependencyProperty.Register("Angle", typeof(double), typeof(PrizeItemControl), new UIPropertyMetadata(OnAngleChanged));private static void OnAngleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){PrizeItemControl control = (PrizeItemControl)d;control.UpdateAngle();}void UpdateAngle(){if (_angleRotateTransform == null) return;_angleRotateTransform.Angle = Angle;}public string Title{get { return (string)GetValue(TitleProperty); }set { SetValue(TitleProperty, value); }}public static readonly DependencyProperty TitleProperty =DependencyProperty.Register("Title", typeof(string), typeof(PrizeItemControl), new PropertyMetadata(string.Empty));public Brush BackgroundColor{get { return (Brush)GetValue(BackgroundColorProperty); }set { SetValue(BackgroundColorProperty, value); }}public static readonly DependencyProperty BackgroundColorProperty =DependencyProperty.Register("BackgroundColor", typeof(Brush), typeof(PrizeItemControl), new PropertyMetadata(null));static PrizeItemControl(){DefaultStyleKeyProperty.OverrideMetadata(_typeofSelf, new FrameworkPropertyMetadata(_typeofSelf));}public override void OnApplyTemplate(){base.OnApplyTemplate();_angleRotateTransform = GetTemplateChild(RotateTransformTemplateName) as RotateTransform;UpdateAngle();}}
}
二、创建 DrawPrize.cs代码如下。
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;namespace WPFDevelopers.Controls
{[TemplatePart(Name = BorderTemplateName, Type = typeof(Border))][TemplatePart(Name = RotateTransformTemplateName, Type = typeof(RotateTransform))]public class DrawPrize : ListBox{private const string BorderTemplateName = "PART_Border";private const string RotateTransformTemplateName = "PART_ItemsControlAngle";private Border _border;private RotateTransform _rotateTransform;public List<int> ListAngle{get { return (List<int>)GetValue(ListAngleProperty); }set { SetValue(ListAngleProperty, value); }}public static readonly DependencyProperty ListAngleProperty =DependencyProperty.Register("ListAngle", typeof(List<int>), typeof(DrawPrize), new PropertyMetadata());private int value;static DrawPrize(){DefaultStyleKeyProperty.OverrideMetadata(typeof(DrawPrize), new FrameworkPropertyMetadata(typeof(DrawPrize)));}public override void OnApplyTemplate(){base.OnApplyTemplate();AlternationCount = 8;_border = GetTemplateChild(BorderTemplateName) as Border;_rotateTransform = GetTemplateChild(RotateTransformTemplateName) as RotateTransform;_border.MouseDown += _border_MouseDown;}private void _border_MouseDown(object sender, MouseButtonEventArgs e){_border.IsEnabled = false;_border.Cursor = Cursors.None;var random = new Random();var to = random.Next(0, 8);var doubleAnimation = new DoubleAnimationUsingKeyFrames();value = ListAngle[to];var splineDoubleKey1 = new SplineDoubleKeyFrame{KeyTime = TimeSpan.FromSeconds(0),Value = value % 360,};var splineDoubleKey2 = new SplineDoubleKeyFrame{KeyTime = TimeSpan.FromMilliseconds(1000),Value = 360,};var splineDoubleKey3 = new SplineDoubleKeyFrame{KeyTime = TimeSpan.FromMilliseconds(2000),Value = 1230,};var splineDoubleKey4 = new SplineDoubleKeyFrame{KeyTime = TimeSpan.FromMilliseconds(4000),Value = value,KeySpline = new KeySpline(0, 0, 0, 1)};doubleAnimation.KeyFrames.Add(splineDoubleKey1);doubleAnimation.KeyFrames.Add(splineDoubleKey2);doubleAnimation.KeyFrames.Add(splineDoubleKey3);doubleAnimation.KeyFrames.Add(splineDoubleKey4);doubleAnimation.Completed += (s1,e1)=> { _border.IsEnabled = true; _border.Cursor = Cursors.Hand; };_rotateTransform.BeginAnimation(RotateTransform.AngleProperty, doubleAnimation);}}
}
三、创建 PrizeItemControl.xaml代码如下。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:controls="clr-namespace:WPFDevelopers.Controls"xmlns:convert="clr-namespace:WPFDevelopers.Converts"><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="Basic/ControlBasic.xaml"/><ResourceDictionary Source="Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><Style TargetType="{x:Type controls:PrizeItemControl}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="controls:PrizeItemControl"><Grid VerticalAlignment="Top"><Grid.RenderTransform><RotateTransform x:Name="PART_RotateTransform" Angle="{TemplateBinding Angle}" CenterX="200" CenterY="200"></RotateTransform></Grid.RenderTransform><Path x:Name="PART_Path" Data="{StaticResource PathSector}" Fill="{TemplateBinding BackgroundColor}" VerticalAlignment="Center"/><TextBlock Text="{TemplateBinding Title}" RenderTransformOrigin="0.5,0.5"Margin="50,100,0,0" Foreground="{DynamicResource WhiteSolidColorBrush}"FontSize="16"FontWeight="DemiBold"HorizontalAlignment="Left" VerticalAlignment="Center" ><TextBlock.RenderTransform><RotateTransform Angle="-70"/></TextBlock.RenderTransform></TextBlock></Grid></ControlTemplate></Setter.Value></Setter></Style><convert:DrawPrizeIndexToColor x:Key="drawPrizeIndexToColor"/><Style TargetType="{x:Type controls:DrawPrize}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Width" Value="400"/><Setter Property="Height" Value="400"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type controls:DrawPrize}"><Grid><ItemsControl x:Name="PART_ItemsControl" ItemsSource="{TemplateBinding ItemsSource}"AlternationCount="{TemplateBinding AlternationCount}"Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"RenderTransformOrigin=".5,.5"><ItemsControl.RenderTransform><RotateTransform x:Name="PART_ItemsControlAngle" Angle="0"/></ItemsControl.RenderTransform><ItemsControl.ItemTemplate><DataTemplate><controls:PrizeItemControl Angle="{Binding Angle}"BackgroundColor="{Binding Path=(ItemsControl.AlternationIndex),RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource drawPrizeIndexToColor}}" Title="{Binding Title}"></controls:PrizeItemControl></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><Grid/></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl><Path Data="M562.8 77.6c-31.4-18.1-70.1-18.1-101.5 0C215.4 219.5 64 481.8 64 765.6c0 36.3 19.4 69.8 50.8 87.9 245.8 141.9 548.7 141.9 794.5 0 31.4-18.1 50.8-51.7 50.8-87.9-0.1-283.8-151.5-546.1-397.3-688z"Stretch="Fill" Fill="#fbb845"Width="40" Height="120"Margin="0,0,0,50"></Path><Border Background="#fbb845" x:Name="PART_Border"Width="100" Height="100"CornerRadius="50"Cursor="Hand"><TextBlock Text="GO" Foreground="{DynamicResource WhiteSolidColorBrush}"FontSize="40"FontWeight="DemiBold"VerticalAlignment="Center"HorizontalAlignment="Center"/></Border></Grid></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>
四、创建 DrawPrizeExample.xaml代码如下。
<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.DrawPrizeExample"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"xmlns:wpfdev="https://github.com/yanjinhuagood/WPFDevelopers"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><StackPanel><wpfdev:DrawPrize x:Name="PART_DrawPrize" ItemsSource="{Binding MenuArray,RelativeSource={RelativeSource AncestorType=local:DrawPrizeExample}}"ListAngle="{Binding ListAngle,RelativeSource={RelativeSource AncestorType=local:DrawPrizeExample}}"></wpfdev:DrawPrize></StackPanel>
</UserControl>
五、 DrawPrizeExample.xaml.cs代码如下。
using System.Collections;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using WPFDevelopers.Samples.Models;namespace WPFDevelopers.Samples.ExampleViews
{/// <summary>/// DrawPrizeExample.xaml 的交互逻辑/// </summary>public partial class DrawPrizeExample : UserControl{public IEnumerable MenuArray{get { return (IEnumerable)GetValue(MenuArrayProperty); }set { SetValue(MenuArrayProperty, value); }}public static readonly DependencyProperty MenuArrayProperty =DependencyProperty.Register("MenuArray", typeof(IEnumerable), typeof(DrawPrizeExample), new PropertyMetadata(null));public List<int> ListAngle{get { return (List<int>)GetValue(ListAngleProperty); }set { SetValue(ListAngleProperty, value); }}public static readonly DependencyProperty ListAngleProperty =DependencyProperty.Register("ListAngle", typeof(List<int>), typeof(DrawPrizeExample), new PropertyMetadata());public DrawPrizeExample(){InitializeComponent();this.Loaded += DrawPrizeExample_Loaded;}private void DrawPrizeExample_Loaded(object sender, RoutedEventArgs e){ListAngle = new List<int>();var menuItemModels = new List<MenuItemModel>();var angle = 0;var anglePrize = 2000;for (int i = 0; i <= 7; i++){var prizeTitle = i == 0 ? "谢谢参与" : $"{i}等奖";angle += 45;anglePrize += 45;ListAngle.Add(anglePrize);menuItemModels.Add(new MenuItemModel { Angle = angle, Title = prizeTitle});}MenuArray = menuItemModels;}}
}
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 实现大转盘抽奖~相关推荐
- html转盘游戏,html5大转盘抽奖实例源码(基于vue.js)
[实例简介] [调试步骤] # 安装依赖 npm install # 开启本地服务器localhost:8088 npm run dev # 发布环境 npm run build #然后静待你的浏览器 ...
- php 打乱数组顺序_PHP实现大转盘抽奖算法
php中文网最新课程 每日17点准时技术干货分享 本文通过具体的实例向大家介绍了PHP语言实现大转盘抽奖算法,希望对大家学习PHP抽奖有所帮助. 流程: 1.拼装奖项数组: 2.计算概率: 3.返回中 ...
- Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑,附源码下载
[实例简介] 该幸运大转盘抽奖实例已实现服务器端的业务逻辑代码,稍加改动就可以应用实际了 文件:590m.com/f/25127180-488779229-66bbf7(访问密码:551685) [实 ...
- 幸运大转盘抽奖(前端)
采用Lottery.js插件, 无依赖, 简单易用(复制粘贴就能用) 效果图(可自己写算法定义概率,可自己定义奖项数量和名称) html <!DOCTYPE html> <html ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖 PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 1 $prizes = array( 2 0 => array( 3 &q ...
- js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码 实现功能截图 系统功能 使用技术 代码 写在最后 js框架jquery实现的幸运大转盘抽奖程序代码 本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
- cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断...
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
- 移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo 前言 本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
最新文章
- John的农场(最小生成树)
- Grinder搭建小记与Nduja(这次不待续了)
- Prometheus Targets动态配置
- 测试HAPROXY的文件分流办法
- 嵌入式工程师最后都选择了什么职位?
- BZOJ4590: [Shoi2015]自动刷题机
- Android开发:《Gradle Recipes for Android》阅读笔记(翻译)5.2——使用Android Testing Support Library进行测试...
- 《哪吒之魔童降世》观影人次突破1亿大关 为动画电影之最!
- linux lite安装教程,Linux Lite第一个获得Linux 4.14 及如何安装它
- 软件测试知识——Linux常用命令
- 三菱f800变频器 频率设定_三菱F800变频器调试参数总结.docx
- XP系统计算机桌面图标不见,XP电脑开机桌面上没有图标怎么办?
- idea显示Multiple Spring Boot run configurations were detected. Services allows to manage multiple
- android机器人方向,Android横版过关类游戏推荐《机器人大挑战》
- 批量追踪中通快运物流,并将信息导出EXCEL表格
- Spring Boot框架
- 【Excel 2013 数据透视表 学习】一、创建数据透视表
- ucsd计算机排名,加州大学圣地亚哥分校专业排名一览及最强专业推荐(QS世界大学排名)...
- SQLiLab刷题记录
- 蓝桥杯单片机数码管动态显示_关于蓝桥杯训练小程序 中断控制数码管显示数字的左右移动...
热门文章
- django中怎样生成非HTML格式的内容。
- 数据库备份需要注意的
- eclise配置tomcat出现服务Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4 and Java EE 5 Web modules...
- C#摄像头实现拍照功能的简单代码示例
- append()与extend()
- 使用命令导入、导出mysql数据
- tomcat启动报错:Bean name 'XXX' is already used in this beans element
- IDA64 Fatal error before kernel init
- 玩转Javascript 给JS写测试
- SQL 中的unicode字符