Infinite Text Rotator/Scroller For Windows Phone Using Blend

Hello all.

Let's do something interesting today. We have been using animations, we have done storyboarding but let's dig into other things and make something really useful for your app. How many of you want to provide notification on the top of your app? How many of you are making applications for news and want to display Headlines on the top? For that we need to make a text scroller/rotator. Right? Let's build it.

Pre-requisites:

  • Story Boarding
  • Visual Studio 2013 with Blend
  • Windows Phone 8 SDK Setup

Let's Blend. Use the following procedure.

  • Open Blend for Visual Studio 2013 and make a new WindowsPhone project.

  • Draw a textblock on the very top of your application.

  • Actually we will be needing two textblocks so just copy it and paste it again.

  • Take a second copy of the textblock out of the screen on the left side keeping in the mind that both remain at the same height and the end of Textblock1 touches the start of TextBlock2.

    text scroller in windows phone

  • Now you need to create a storyboard in which you move the textblock. Create it from the Object and Timeline tab by clicking on the '+' sign.

  • Move Textblock1 to the position of TextBlock2 and move TextBlock2 outside the screen.

    TextBlock in windows phone

  • Save the story board and stop recording.

  • Let's move to Visual Studio 2013.

  • As you will see, for the story board created on MainPage.xaml, you need to add a property.

    MainPage

  • After you have added the RepeatBehaviour property, switch to MainPage.xaml.cs and provide the following few lines of code there.

    RepeatBehaviour property

  • Create a MainPage_Loaded event handler and in that, begin your storyboard.

Trust me, you have made your own Text Rotator / Scroller with the power of Blend. Your output will look like this somehow.

SCROLLER

Happy Blending!

Personal Blog: Blend Unleashed.