演示效果如下: 鼠标点击一次,所有方块向左移动一格
思路:
1.利用StoryBoard产生移动,每次点击时,该动画播放一次(即移动一格)
2.关键:动画播放完毕后,调用Stop方法,以回到初始位置,同时利用代码重新填充数据,造成"保留移动后位置"的视觉假象
Xaml代码:

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

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
}