Motion Path in Silverlight 4 using PathListBox

Posted by: Pravinkumar Dabade , on 3/21/2011, in Category Silverlight 2, 3, 4 and 5
Views: 62555
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:

Silverlight Motion Path

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’ :

Silverlight Pen tool

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:

Layout Paths

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:

Dotnetcurry Welcome

Now make a choice of ‘PathListBox’ and change the ‘Foreground’ color to yellow as shown below:

Pathlistbox Brush

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:

Element property binding

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:

Create data binding

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:

Silverlight Pathlistbox

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.

Absolutely Awesome Book on C# and .NET

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 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 Book 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 the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) 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!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Jasper on Monday, March 21, 2011 9:33 AM
What is this copy-paste-MSDN style article ? Show more advanced settings like animation on PathListBox, templating, etc...
Comment posted by Pravinkumar on Wednesday, March 23, 2011 6:40 AM
Let first get the other people clear about the basic things and they can move towards the advance concepts. I appreciate your feed back.