WPF 实现大转盘抽奖~
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 实现大转盘抽奖~的主要内容，如果未能解决你的问题，请参考以下文章