Как рисовать фигуры с помощью элемента Path?

Question

Как нарисовать следующее с элементами пути в XAML?

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

Спасибо!

Answer 1

Вы можете использовать Expression Blend для преобразования объекта в Path.См. эту ссылку

. Здесь представлены все ваши тексты, преобразованные в 7 Path элементов с использованием TextBlock s со шрифтом по умолчанию и т. Д., Преобразованные в Path.Если вы не удовлетворены результатом, вы можете сделать то же самое самостоятельно, следуя короткому описанию в ссылке с Blend.Тем не менее, он производит довольно многословный Xaml.

О том, как делать подобные вещи в коде, см. этот ответ 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"/>

Answer 2

Прошло много времени с тех пор, как я это сделал, но я выкопал часть своего старого кода.

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

Это рисует маленькую стрелку вверх.Насколько я помню, этот текст декодируется во что-то вроде «Переместить в (10,0), Линия в (20,10), Линия в (0,10), Вернуться в начало и закрыть форму»).

Это должно начать вас.Есть больше команд, которые вы можете посмотреть на MSDN.