How to get Right aligned StackPanel in silverlight + 5 simple steps

2009-02-03T03:47:00.000-08:00

The Problem: As of now, Blend don't provide the 'right aligned' property to Stack Panel for its child elements which will arrange the elements from right to left; that is 'Right aligned Stack Panel'.

Solution to Problem: Here is the step by step procedure to achieve this

Insert a grid on stage, put it in exactly at same position(left, top) & with same size(height, width), as you want your stalk panel to be. Suppose name of this grid is 'rightalignedstack_container'.

Select the 'LayoutRoot' grid. Make sure it is in Grid view, as shown below.
Now, make the grid 'rightalignedsta_container' aligned to right-top, set its right & top margins (keep left & bottom 'zero') & make the width 'Auto'. The settings are shown below:

Now insert the 'right_aligned_stack' panel inside this grid (rightalignedstack_container). Keep this stack 'Auto' in its width. Keep the margins 'zero', orientation 'Horizontal'.

That is it, now what ever elements which you will add in this stack panel will start populating from right to left (Right aligned stack panel).

Notice that, the stack panel have expanded on its left side keeping the right edge constant. The newer element is getting added on right side of stack panel making the older elements shift towards left.

The logic behind this is, since we have a grid with fix right margin & auto width as parent of stack panel; it is the right margin of parent grid which is not allowing the stack panel expand on right side. Also, since the width of parent grid & stack panel is 'Auto' we can have as many child's as we want.

If we have limitations on display area of stack panel child's, then have right-left arrows in side the parent grid, which allow scrolling. In this case the stack panel will be masked & on click of left-right arrow child elements will move.

The Application of solution: This can be used when you want 'Welcome User name' text in right top corner; where 'Welcome' is common but 'User name' is dynamic. Above solution will make sure that the 'welcome' text will shift to left depending on length of 'User Name'.

Let me know your views on this solution. My mail ID is milind.somanatspadeworxdotcom.

Silverlight

How to get Right aligned StackPanel in silverlight + 5 simple steps