Motion Path in Silverlight 4 using PathListBox
Posted by: Pravinkumar Dabade
in Category Silverlight 2, 3, 4 and 5
Abstract: In this article, we will see how to align the text to a given path using a ‘PathListBox’ control, in Silverlight 4.0. We will also see how to animate the text using Visual states in Silverlight.
The PathListBox control is a new addition to the Blend 4 SDK, and allows the elements inside a ListBox to lay out along any Path control shape. Using this control, you can achieve basic motion path animation in Silverlight and WPF. I had previously written an article on how to use Motion Path in WPF 4 using Expression Blend 4. We can do a similar example in Silverlight 4.0 as well. Follow the above steps to achieve the same goal in Silverlight 4 using Microsoft Expression Blend 4.
In this demonstration, we will align some ‘Text’ around a path. So let’s start by creating a Silverlight application. For this open Microsoft Expression Blend 4.0 and create a new Silverlight application with the name ‘SilverlightMotionPathExample’ as shown below:
Once your application is created, change the background color of the ‘LayoutRoot’ to ‘Black’ color and make its height and width 500 and 600 respectively.
Now from the ‘Toolbox’, click on ‘Pen’ tool and draw a path as shown below, on the Silverlight ‘MainPage’ :
Now let’s add a ‘PathListBox’ control from ‘Asset’ window on our Silverlight ‘MainPage’ and choose the ‘Layout Paths’ section, as we did previously in a WPF application.
Now drag the ‘Circle’ (Select an object to use as a LayoutPath) highlighted by a square in the diagram shown below, over the ‘Path’ and click on the ‘Path’. Now if you check your ‘Layout Paths’ section in the properties window, you will see your path got added as a layout path:
Now add a ‘TextBlock’ control from the ‘Asset’ window on our Silverlight ‘MainPage’. Set its ‘Font’ property to ‘20’, foreground color to ‘Yellow’ and ‘Text’ property to ‘Wel Come to DotNetCurry!! Enjoy the Articles’ as shown below:
Now make a choice of ‘PathListBox’ and change the ‘Foreground’ color to yellow as shown below:
Now after selecting ‘PathListBox’, choose ‘ItemSource’ property from the ‘Common Properties’ section and click on advance options. From the advance options, choose ‘Element Property Binding’ and then click on ‘TextBlock’ as shown below:
Once you click the ‘TextBlock’, you should see a ‘Create Data Binding’ dialog box. Choose ‘Text property and click the ‘OK’ button as shown below:
Observe that the text of the TextBlock is aligned according to our path. Now increase the ‘Font’ size to 18 by selecting ‘PathListBox’. Your screen will look similar to the following:
Conclusion – In this article, we have seen how to use ‘PathListBox’ control to align Text on a given path in Silverlight 4.0 and Microsoft Expression Blend 4.0. We can have multiple layout paths on which we can align our objects or Text, as per our requirements.
The entire source code of this article can be downloaded over here
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!