Search code examples
xamlexpression-blend

Blend Pen tool and XAML syntax


I am trying create a basic shape with the Pen tool. All I want is an 'S' like shape that is essentially rotated clockwise 90 degrees. I can't use a TextBlock and just rotate an 'S' though. The reason why is because I need to programmatically set the StrokeThickness dynamically. For the life of me, I can't figure out the darn Pen tool with Blend to accomplish this.

Does anyone know how to use the Pen tool to create an 'S' shape that is rotated clockwise 90? I can only have it 24 dpi high, and at most 56 dpi wide. All I really care about is the XAML with the Path syntax. However, I'm not having much luck.

Any help is appreciated!


Solution

  • The Pen tool definitely takes a bit of practice to get used to. For your scenario though I would just just start out with an Ellipse then place a bit smaller Ellipse inside the center of it. Then select both and do Object -> Combine -> Subtract to make it a hollow ring. Then using a Rectangle repeat the same steps as before to cut it in half. From there make a copy, flip it vertically by Object -> Flip -> Vertical and position the second one to the side to create your sideways "S" shape and again select both and Object -> Combine -> Unite to create just one solid Path giving you an end result of something like this.

    <Path Data="M35,0.5 C53.160675,0.5 68.043991,
                14.532038 69.399399,32.345566 L69.451454,33.167 
                L69.52951,33.167 L69.5,34.333992 C69.5,50.626396 
                82.707596,63.834 99,63.834 C115.2924,63.834 128.5,50.626396 
                128.5,34.333992 L128.47049,33.167 L133.47049,33.167 
                L133.5,34.333992 C133.5,53.387825 118.05383,68.834 99,68.834 
                C80.839325,68.834 65.956001,54.801964 64.600601,36.988438 
                L64.548546,36.167004 L64.47049,36.167004 L64.5,35.000008 
                C64.5,18.707603 51.2924,5.5000019 35,5.5000019 C18.707596,5.5000019
                5.5,18.707603 5.5,35.000008 L5.5295105,36.167004 L0.52950668,
                36.167004 L0.5,35.000008 C0.5,15.946178 15.946175,0.5 35,0.5 z" 
                Fill="Red" Stroke="Blue" Height="24" Width="56" Stretch="Fill"  
                UseLayoutRounding="False"/>
    

    However to make life easier for yourself when making complex XAML Path shapes, if you're familiar with tools like Fireworks or Illustrator there are converter tools that allow you export your Vector's into nice XAML which is definitely recommended for the difficult Path creations. Hope this helps.