WPF 实现大转盘抽奖~

WPF开发者QQ群： 340500857

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

yanjinhuawechat 或 W_Feng_aiQ 邀请入群

需备注WPF开发者

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

接着上一篇圆形控件

—

代码如下

一、创建 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;}}
}

—

效果预览

鸣谢素材提供者 - 方拯

感谢大家一直以来的支持，祝你在新的一年心想事成，万事如意。

源码地址如下

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