How to draw shapes with Path element?

How d开发者_运维百科o I draw the following with path elements in XAML?

1. <<
2. >>
3. ->
4. |<
5. >|
6. <
7. >

Thanks!

It's been a while since I did this, but I dug out some of my old code.

<Path Fill="Gray" Data="M 10 0 L 20 10 L 0 10 Z"/>

That draws a small up arrow. As I recall, that text decodes to something like "Move to (10,0), Line to (20,10), Line to (0,10), Return to beginning and close shape".

That should get you started. There are more commands you can look up on MSDN.

You can use Expression Blend to convert an Object to a Path. See this link

Here is all your Texts convertered to 7 Path elements using TextBlocks with default font etc converted to Path. If you're not satisfied with the result you can do the same thing yourself following the short description in the link with Blend. It does produce pretty verbose Xaml though.

For how to do similar things in code, see this answer by Ian Griffiths

1.<<
<Path Data="M6.6328125,6.5054684 L6.6328125,7.3843746 L2.8710938,9.4703121 L2.8710938,9.4937496 L6.6328125,11.333593 L6.6328125,12.20664 L1.59375,9.6753902 L1.59375,9.3296871 z M14.842813,6.5054684 L14.842813,7.3843746 L11.081094,9.4703121 L11.081094,9.4937496 L14.842813,11.333593 L14.842813,12.20664 L9.80375,9.6753902 L9.80375,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="13.249"/>

2.>>
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z M9.80375,6.5054684 L14.842813,9.3296871 L14.842813,9.6753902 L9.80375,12.20664 L9.80375,11.333593 L13.577188,9.5054684 L13.577188,9.4703121 L9.80375,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="13.249"/>

3.->
<Path Data="M0.84375,9.2300777 L4.0429688,9.2300777 L4.0429688,9.9859371 L0.84375,9.9859371 z M6.3937502,6.5054684 L11.432813,9.3296871 L11.432813,9.6753902 L6.3937502,12.20664 L6.3937502,11.333593 L10.167188,9.5054684 L10.167188,9.4703121 L6.3937502,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="0.844,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="10.589"/>

4.|<
<Path Data="M1.0078125,3.7749996 L1.875,3.7749996 L1.875,15.775 L1.0078125,15.775 z M9.5028124,6.5054684 L9.5028124,7.3843746 L5.7410936,9.4703121 L5.7410936,9.4937496 L9.5028124,11.333593 L9.5028124,12.20664 L4.4637499,9.6753902 L4.4637499,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="12" Margin="1.008,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="8.495"/>

5.>|
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z M9.2178125,3.7749996 L10.085,3.7749996 L10.085,15.775 L9.2178125,15.775 z" Fill="Black" HorizontalAlignment="Left" Height="12" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="8.491"/>

6.<
<Path Data="M6.6328125,6.5054684 L6.6328125,7.3843746 L2.8710938,9.4703121 L2.8710938,9.4937496 L6.6328125,11.333593 L6.6328125,12.20664 L1.59375,9.6753902 L1.59375,9.3296871 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="5.039"/>

7.>
<Path Data="M1.59375,6.5054684 L6.6328125,9.3296871 L6.6328125,9.6753902 L1.59375,12.20664 L1.59375,11.333593 L5.3671875,9.5054684 L5.3671875,9.4703121 L1.59375,7.3843746 z" Fill="Black" HorizontalAlignment="Left" Height="5.702" Margin="1.594,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Width="5.039"/>