活动抽奖小程序,随机选人的微信小程序

前几天学习了一些WPF的基础知识，空闲的时候制定了随机抽选的小程序。

代码比较简单，核心的代码只有七行，其他都是布局上的事情.

我希望这个例子能帮助你。大佬可以指点指点我，^ _ ^

水平。

首先，让我们看看这个小程序是什么样的。这样，大家就能耐心地看了哦。哈哈哈

效果如下图所示：

这个轮盘有点丑啊。但是我在Blend上设计了几个小时。事实是太菜。

当我们点击中心的Begin时，轮盘开始转动。聪明的伙伴应该知道这个圆的东西其实是扣子，只是我为他“换了衣服.

水平。

这个东西需要用到的知识有以下方面：

Blend基本绘制控制模板(动画)知识点相关文章如下：

3358 www.Sina.com/http://www.Sina.com/http://www.Sina.com/http://www.Sina.com /

看起来很多，其实不然。上面的知识只使用了一点，所以我们可以编写这个程序。

一步一步地完成这个小程序吧……

水平。

《飞天入地WPF》 —— Data / Control 模板的使用（一）第一步一定是加载大红背景图。这张图我找了很久。

我们把它放在文件夹里，方便我们日后添加一些东西进行管理。如下所示。

然后，在XAML中使用此图像作为背景图：

！ -背景图—-grid.backgroundimagebrushopacity=’ 0.75 ‘ image source=’/backgroud/bj.jpg ‘/grid.background效果如下

感觉有点喜庆吧？

水平。

《飞天入地WPF》 —— Data / Control 模板的使用（二）

没有使用过Blend的我，直接把他当成了PS .

使用的工具包括圆形工具、钢笔工具和字体工具。其中的阴影效果是用代码添加的。相关的知识是图形的效果。在上面的链接里。请大家自己调查一下。

《飞天入地WPF》 —— 绘图之 Path 知识详解

设计轮盘赌后，将代码复制到VS中，以创建便于在VS中调用的自定义控件项目

如下所示。

他的类型是MyUserControl，可以在主窗口的XAML代码中调用

XAML代码如下：

！ -转盘资源—-local : myusercontrolx : name=’ my draw ‘ margin=’-108，- 175，22.6，10 ‘ local 3360 my user contrgin

效果如下图所示。

《飞天入地WPF》 —— 图形的效果与变形中心的指针分为两部分：箭头和按钮

其中箭头比较简单，直接用Bend绘制后将代码调用到VS即可。代码如下。

path data=’ m 5.5，0.94400306 l 5.5999939，24.443993 m 0.5，9.3439939 c 0.5，9.3439939.799926，-10.554992 9.1999878， 9.3439939 ‘ horizontal alignment=’ left ‘ height=’ 24.944 ‘ margin=’ 346.3，161.056，0，0 ‘ stretch=’ fill ‘ stroke

erticalAlignment=”Top” Width=”9.7″/>

效果如下图所示：

特别注意的是圆形按钮的制作，制作的方法在上面的链接也有 . . .

我们可以在 Blend中修改 Button的模板，之后直接复制代码到 VS的 XAML中，使用 Style来指明 Button控件 . . . 完整的模板代码如下：

<Window.Resources> <Style TargetType=”Button”> <Style.Setters> <Setter Property=”Template”> <Setter.Value> <ControlTemplate TargetType=”Button”> <Border x:Name=”border” CornerRadius=”20″ BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” Background=”{TemplateBinding Background}” SnapsToDevicePixels=”true”> <ContentPresenter x:Name=”contentPresenter” Focusable=”False” HorizontalAlignment=”{TemplateBindingHorizontalContentAlignment}” Margin=”{TemplateBinding Padding}” RecognizesAccessKey=”True” SnapsToDevicePixels= “{TemplateBinding SnapsToDevicePixels}” VerticalAlignment= “{TemplateBinding VerticalContentAlignment}”/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> </Window.Resources>

其中，我使用了 Style 的 TargetType 指定了目标类型为 Button，所以将下面模块属性作用于 Button，使用 Button之后，看到的样子和我们所想就一模一样了 . . .

代码看似很多，实则基本都是从 Blend中复制过来的，我添加的只有一句代码：

CornerRadius=”20″

他设置了 Button的圆角为 20，所以我们看出来的样子就像一个圆形 . . .

Button代码如下：

效果如下图所示：

为按钮创建点击事件，核心部分

虽说是最重要的，却也是最简单的，因为用的仅仅是动画里面的一点知识，在动画一文中有所讲解，链接在最上面 . . .

Button的事件处理器代码如下：

double rng = 0;private void Button_Click(object sender, RoutedEventArgs e){// 需要设置的旋转角度Random random = new Random(); rng += 1080 * 5 + random.NextDouble() * 1080; // 创建关键帧动画 DoubleAnimationUsingKeyFrames dak = new DoubleAnimationUsingKeyFrames(); dak.Duration = new Duration(TimeSpan.FromSeconds(10)); // 创建关键帧，并设置合适的速率 SplineDoubleKeyFrame sdk = new SplineDoubleKeyFrame(rng, KeyTime.FromPercent(1), new KeySpline(1, 1, 0, 1)); // 将关键帧加入动画之中 dak.KeyFrames.Add(sdk); // 开始动画，与旋转角度相关联 this.myDraw.RenderTransform.BeginAnimation(RotateTransform.AngleProperty, dak);}

到此我们的程序就可以正常用了，我们也可以加一些其它的花里胡哨的动画，算了，以后再说吧，拜拜咯 ~

作者：浪子花梦