WPF制作随机抽奖小程序

前些天学完了一些WPF的基础知识，闲来无事做了一个随机抽奖的小程序，
代码比较简单，核心的代码只有七行，其它的都是一些布局上的事情 . .
希望这个例子，能够帮助你， 大佬可以指点指点我， ^ _ ^

首先我们先来看一看这个小程序是什么样子的，这样大家才有耐心看嘛，哈哈

效果如下图所示：
在这里插入图片描述

这个轮盘有点丑哈 ~，但是我用 Blend设计了几个小时，属实太菜 . . .

当我们点击中心的 Begin时，轮盘开始转动，聪明的小伙伴应该知道，这个圆形的东西，实际上是一个按钮，只不过我为他 “换了一套衣服” 而已 . . .

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

Blend基本绘图
ControlTemplate（控件模板）
Animation（动画）使用

看似很多，实则不然，上面的知识只是用到了一点点，我们就可以弄好这个程序了 . . .

下面让我们来一步一步的完成这个小程序吧 ……

加载背景图

第一步肯定是加载红红的背景图啦，这张图找了许久 . . .
我们把放在一个文件夹中，方便我们日后再加一些东西做个管理，如下所示：

在这里插入图片描述
之后，我们在XAML中使用这张图片用作背景图：

	<!--背景图-->
	<Grid.Background>
	        <ImageBrush Opacity="0.75" ImageSource="/Backgroud/bj.jpg"/>
	</Grid.Background>

效果如下：
在这里插入图片描述

是不是有点喜庆的感觉呢？

使用 Blend 制作轮盘

在这里插入图片描述

从来没有用过 Blend的我，直接把他当成 PS来使用了 . . .
用到的工具有：圆形工具、钢笔工具、字体工具，其中的阴影效果我是使用代码添加的，涉及到的知识是图形的效果，在上面的链接中有，大家可以自述查看 . . .

轮盘的代码我就不在这里写出，因为比较长，可以自己设计，或者评论私发 . . .

我们把轮盘设计好之后，将代码复制到VS中，创建一个自定义控件项目，方便在 VS调用

如下所示：
在这里插入图片描述

他的类型名为 MyUserControl，这样我们就可以在 MainWindow的XAML代码中来调用它了

XAML代码如下所示：

	<!--引用转盘资源-->
	        <local:MyUserControl x:Name="myDraw" Margin="-108,-175,22.6,10">
	            <local:MyUserControl.RenderTransform>
	                <RotateTransform CenterX="470" CenterY="380"/>
	            </local:MyUserControl.RenderTransform>
	</local:MyUserControl>

其中，我声明轮盘的旋转中心点的坐标值，为了下方轮盘旋转作出准备 . . .

效果如下图所示：
在这里插入图片描述

制作圆形指针

中间的指针分为两个部分组成：箭头和按钮

其中箭头比较简单，直接用 Bend画出来然后调用代码到 VS中就可以了，代码如下所示：

	<Path Data="M5.5,0.94400306 L5.5999939,24.443993 M0.5,9.3439939 C0.5,9.3439939 
	          5.7999926,-10.554992 9.1999878,9.3439939" 
	          HorizontalAlignment="Left" Height="24.944" 
	          Margin="346.3,161.056,0,0" Stretch="Fill" 
	          Stroke="Black" VerticalAlignment="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 Width="40" Height="40" Content="Begin" 
	Background="LightBlue" Click="Button_Click"/>

效果如下图所示：
在这里插入图片描述

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

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

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);
	}

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

作者：浪子花梦

WPF制作随机抽奖小程序

猜你喜欢