sliverlight:按点击移动的连续跑马灯

演示效果如下: 鼠标点击一次,所有方块向左移动一格

思路:

1.利用StoryBoard产生移动,每次点击时,该动画播放一次(即移动一格)

2.关键:动画播放完毕后,调用Stop方法,以回到初始位置,同时利用代码重新填充数据,造成"保留移动后位置"的视觉假象

Xaml代码:

 1<UserControl.Resources>
 2        <Storyboard x:Name="sb_move" >
 3            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="b1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
 4                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-80"/>
 5            </DoubleAnimationUsingKeyFrames>
 6            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="b2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
 7                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-80"/>
 8            </DoubleAnimationUsingKeyFrames>
 9            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="b3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
10                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-80"/>
11            </DoubleAnimationUsingKeyFrames>
12            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="b4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
13                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-80"/>
14            </DoubleAnimationUsingKeyFrames>
15            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="b5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
16                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-80"/>
17            </DoubleAnimationUsingKeyFrames>
18        </Storyboard>
19    </UserControl.Resources>
20
21    <Canvas Height="100" Width="310" Background="Gray" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" x:Name="c" ToolTipService.ToolTip="点击我试试看" Cursor="Hand">
22        <Border Height="100" Name="b1" Width="70" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
23            <Border.RenderTransform>
24                <TransformGroup>
25                    <ScaleTransform/>
26                    <SkewTransform/>
27                    <RotateTransform/>
28                    <TranslateTransform/>
29                </TransformGroup>
30            </Border.RenderTransform>
31            <TextBlock x:Name="txt1" TextAlignment="Center" VerticalAlignment="Center" FontSize="36" FontFamily="Arial Black"/>
32        </Border>
33        <Border Height="100" Name="b2" Width="70" Canvas.Left="80" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
34            <Border.RenderTransform>
35                <TransformGroup>
36                    <ScaleTransform/>
37                    <SkewTransform/>
38                    <RotateTransform/>
39                    <TranslateTransform/>
40                </TransformGroup>
41            </Border.RenderTransform>
42            <TextBlock x:Name="txt2" TextAlignment="Center" VerticalAlignment="Center" FontSize="36" FontFamily="Arial Black"/>
43        </Border>
44        <Border Height="100" Name="b3" Width="70" Canvas.Left="160" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
45            <Border.RenderTransform>
46                <TransformGroup>
47                    <ScaleTransform/>
48                    <SkewTransform/>
49                    <RotateTransform/>
50                    <TranslateTransform/>
51                </TransformGroup>
52            </Border.RenderTransform>
53            <TextBlock x:Name="txt3" TextAlignment="Center" VerticalAlignment="Center" FontSize="36" FontFamily="Arial Black"/>
54        </Border>
55        <Border Height="100" Name="b4" Width="70"  Canvas.Left="240" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
56            <Border.RenderTransform>
57                <TransformGroup>
58                    <ScaleTransform/>
59                    <SkewTransform/>
60                    <RotateTransform/>
61                    <TranslateTransform/>
62                </TransformGroup>
63            </Border.RenderTransform>
64            <TextBlock x:Name="txt4" TextAlignment="Center" VerticalAlignment="Center" FontSize="36" FontFamily="Arial Black"/>
65        </Border>
66        <Border Height="100" Name="b5" Width="70" Canvas.Left="320" Canvas.Top="0" RenderTransformOrigin="0.5,0.5">
67            <Border.RenderTransform>
68                <TransformGroup>
69                    <ScaleTransform/>
70                    <SkewTransform/>
71                    <RotateTransform/>
72                    <TranslateTransform/>
73                </TransformGroup>
74            </Border.RenderTransform>
75            <TextBlock x:Name="txt5" TextAlignment="Center" VerticalAlignment="Center" FontSize="36" FontFamily="Arial Black"/>
76        </Border>
77        
78        <Canvas.Clip>
79        <RectangleGeometry Rect="0,0,310,100"></RectangleGeometry>
80    </Canvas.Clip>
81    
82    </Canvas>

Xaml.cs

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Windows.Controls;
 4 using System.Windows.Media;
 5
 6 namespace ClipTest
 7 {
 8    public partial class Marquee : UserControl
 9    {
10
11        public List<MarqueeItem> listSrc;
12
13        int _currentIndex = 0;//初次加载时,从listSrc的第几项开始
14
15        public Marquee()
16        {           
17            InitializeComponent();
18            this.sb_move.Completed += new EventHandler(sb_move_Completed);
19            LoadData();
20            SetData();
21        }
22
23
24        /// <summary>
25        /// 加载源数据(需要调用外部数据的朋友,可自行修改本函数为远程加载xml之类)
26        /// </summary>
27        public void LoadData()
28        {
29            this.listSrc = new List<MarqueeItem>();
30            this.listSrc.Add(new MarqueeItem() { ItemColor = Color.FromArgb(0xFF, 0x9A, 0xCD, 0x32), ItemText = "1" });
31            this.listSrc.Add(new MarqueeItem() { ItemColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0x00), ItemText = "2" });
32            this.listSrc.Add(new MarqueeItem() { ItemColor = Color.FromArgb(0xFF, 0xF5, 0xF5, 0xF5), ItemText = "3" });
33            this.listSrc.Add(new MarqueeItem() { ItemColor = Color.FromArgb(0xFF, 0xF5, 0xF5, 0xDC), ItemText = "4" });
34            this.listSrc.Add(new MarqueeItem() { ItemColor = Color.FromArgb(0xFF, 0xFF, 0x20, 0xFF), ItemText = "5" });
35        }
36
37
38        public void SetData()
39        {
40            int _start = _currentIndex % listSrc.Count;
41
42            for (int i = 1; i <= 5; i++)
43            {
44                if (_start >= listSrc.Count) { _start = 0; }
45                (c.FindName("b" + i.ToString()) as Border).Background = new SolidColorBrush(listSrc[_start].ItemColor);
46                (c.FindName("txt" + i.ToString()) as TextBlock).Text = listSrc[_start].ItemText;
47                _start++;
48            }
49        }
50
51        void sb_move_Completed(object sender, EventArgs e)
52        {
53           
54            this.sb_move.Stop();
55            _currentIndex++;
56            SetData();
57            
58        }
59
60        private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
61        {
62            // TODO: Add event handler implementation here.
63            this.sb_move.Begin();
64        }
65    }
66
67
68    /// <summary>
69    /// 自定义Item类
70    /// </summary>
71    public class MarqueeItem
72    {
73        public Color ItemColor { set; get; }
74        public String ItemText { set; get; }
75    }
76
77 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章鱼的慢慢技术路

Go指南练习_切片

1673
来自专栏GIS讲堂

Arcgis for JS之Cluster聚类分析的实现

在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上...

2003
来自专栏互联网杂技

JavaScript 常用方法总结

经常使用的 JS 方法,今天记下,以便以后查询 /* 手机类型判断 */ var BrowserInfo = { userAgent: navigator.us...

3836
来自专栏小筱月

分享:Java 开发精美艺术二维码

看到网络上各种各样的二维码层出不穷,好像很炫酷的样子,一时兴起,我也要制作这种炫酷二维码效果

1613
来自专栏跟着阿笨一起玩NET

提取HTML的正文类

本文转载:http://blog.csdn.net/cjh200102/article/details/6824895

4811
来自专栏我和未来有约会

一个最基本的布局控件-panel

Silverlight做了两个布局的控件了。 Silverlight控件 - Carrousel Silverlight控件 - ScatterView 所...

2985
来自专栏deepcc

emmet(Zen coding)前端写代码神器

3887
来自专栏前端布道

Markdown - 让网络书写变得简单

可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。Markdo...

1082
来自专栏向治洪

android动画之interpolator和typeEvaluator用法详解

Interpolator (插值器) 我们在写动画的时候为了达到某种效果往往需要设置插值器,用来真实的模拟生活中的场景。  Interpolator (插值器)...

2209
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何仿微信朋友圈的消息样式?

891

扫码关注云+社区

领取腾讯云代金券