The running effect is as follows:
Analysis:
Code : 1 < Canvas X: Name = "" Background = "Aliceblue" Mouseenter = "A_mouseenter" Mouseleave = "A_mouseleave" Cursor = "Hand" >
2 < Canvas. Clip >
3 < Rectanglegeometry Radiusx = "0" Radiusy = "0" Rect = "50, 50" />
4 </ Canvas. Clip >
5 < Canvas. triggers >
6 < Eventtrigger Routedevent = "Canvas. Loaded" >
7 < Beginstoryboard >
8 < Storyboard X: Name = "Animation" Storyboard. targetproperty = "(Canvas. Left )" Repeatbehavior = "Forever" >
9 < Doubleanimation Storyboard. targetname = "Txt1" From = "50" To = "-500" Duration = "0: 10" />
10 < Doubleanimation Storyboard. targetname = "Txt2" From = "600" To = "50" Duration = "0: 10" />
11 </ Storyboard >
12 </ Beginstoryboard >
13 </ Eventtrigger >
14 </ Canvas. triggers >
15 < Textblock X: Name = "Txt1" Fontsize = "36" Foreground = "Green" Text = "1 2 3 4 5 6 7 8 9 0 a B C D E F" Canvas. Top = "50" Width = "550" Height = "50" />
16 < Textblock X: Name = "Txt2" Fontsize = "36" Foreground = "Red" Text = "1 2 3 4 5 6 7 8 9 0 a B C D E F" Canvas. Top = "50" Width = "550" Height = "50" />
17 </ Canvas >
Explanations:
1. Create a cut area first (the starting coordinate is 50, 50, the width is 300, and the height is 50) -- this is required, otherwise the text beyond this area will be displayed
2. the canvas. Left of the second text object is changed on the storyboard to move left.
3. repeatbehavior = "forever" indicates that the animation will be played all the time (that is, the text appears to scroll left together visually)