前几天学习了一些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 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);}
到此我们的程序就可以正常用了,我们也可以加一些其它的花里胡哨的动画,算了,以后再说吧,拜拜咯 ~
.
作者:浪子花梦