Question

I am designing a image editor in silverlight 4.0

Looking for typing text along curvature path like circular or arc

Something similar to what is available in photoshop http://youtu.be/6L6qAKkBQxc

Is there any code snippet available on this?

Thanks

Answer 1

You need a PathListBox (from Microsoft.Expression.Controls) here.

Basically you just need to create a Path and convert it into PathListBox, then bind the Text property of a TextBlock (where you specify the text you want) to the ItemsSource of the PathListBox.

Something like this.

xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"

<Grid x:Name="LayoutRoot" Background="White">
    <ec:PathListBox Height="135" Margin="143.5,73.5,224.5,0" VerticalAlignment="Top" ItemsSource="{Binding Text, ElementName=textBlock}">
        <ec:PathListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" FontWeight="Bold" FontSize="18.667" />
            </DataTemplate>
        </ec:PathListBox.ItemTemplate>
        <ec:PathListBox.LayoutPaths>
            <ec:LayoutPath SourceElement="{Binding ElementName=path}" Orientation="OrientToPath" Padding="-10"/>
        </ec:PathListBox.LayoutPaths>
    </ec:PathListBox>
    <Path x:Name="path" Data="M144,203 C144,203 165,74 273,74 C381,74 415,208 415,208" Height="135" Margin="143.5,73.5,224.5,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"/>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="this is a test, test..." VerticalAlignment="Top" Margin="22,19,0,0" Visibility="Collapsed"/>
</Grid>

Another thing is you might want to overwrite the ItemContainerStyle of the PathListBox so each letter won’t be selectable.

Hope this helps. 🙂