CODEWITHSUNDEEP
wpfxamlpathexpression-blend
amit kohan
amit kohan

Reputation: 1618

Conversion from Shape to Path in XAML

How can I change a XAML code (which represent a set of shapes) to a single figure presented by PATH?

Let's say we have XAML code such as:

  <Ellipse Fill="#FF0A0A0E" HorizontalAlignment="Left" Margin="192,184,0,0" 
           Stroke="Black" Width="8" Height="8" VerticalAlignment="Top"/>
  <Rectangle Fill="Black" HorizontalAlignment="Left" Margin="152,187.5,0,0" 
             Stroke="Black" Width="89.5" Height="1" VerticalAlignment="Top"/>

and need to convert it into a single path object?

I tried using Blend 4 where it allows you to convert shaped into path but then above code was converted to:

<Path Data="M7.5,4 C7.5,5.9329966 5.9329966,7.5 4,7.5 C2.0670034,7.5 0.5,5.9329966 0.5,4 C0.5,2.0670034 2.0670034,0.5 4,0.5 C5.9329966,0.5 7.5,2.0670034 7.5,4 z" 
      Fill="#FF0A0A0E" HorizontalAlignment="Left" Height="8" Margin="192,184,0,0" 
      Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="8"/>
<Path Data="M0.5,0.5 L89,0.5 z" Fill="Black" HorizontalAlignment="Left" Height="1" 
      Margin="152,187.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" 
      Width="89.5" />

The reason I'm asking this question is because in I only can define only one Path. Correct me if I'm wrong. If so, then how can I embed 2 paths or more in one style?

Upvotes: 4

Views: 2679

Answers (2)

Fredrik Hedblad
Fredrik Hedblad

Reputation: 84674

You can combine two shapes into one Path with Expression Blend 4.

To do it, select both om them by holding ctrl or shift

enter image description here

After that, choose Object -> Combine -> Unite

And in your case it'll output this

<Path Data="M44,0.5 C45.932995,0.50000024 47.5,2.0670036 47.5,4.0000002 L89,4.0000002 89,4.0100003 47.499496,4.0100003 47.48193,4.3578544 C47.302696,6.122751 45.812183,7.5000002 44,7.5000002 42.187817,7.5000002 40.697304,6.122751 40.51807,4.3578544 L40.500504,4.0100003 0.5,4.0100003 0.5,4.0000002 40.5,4.0000002 C40.5,2.0670036 42.067005,0.50000024 44,0.5 z"
      Fill="Black"
      HorizontalAlignment="Left"
      Height="8"
      Margin="152,184,0,0"
      Stretch="Fill"
      Stroke="Black"
      VerticalAlignment="Top"
      Width="89.5"/>

Note that there is a bug with this if the Rectangles Height is exactly 1. Then it will just disappear. To workaround this just set Height to something like 1.00001

<Rectangle Fill="Black" HorizontalAlignment="Left" Margin="152,187.5,0,0"  
         Stroke="Black" Width="89.5" Height="1.00001" VerticalAlignment="Top"/>

Upvotes: 2

Tim
Tim

Reputation: 15247

It IS possible to do multiple separate paths with one Data field. For instance:

<Path Data="M0,0 L 10,10 L 20, 10 L 20,0 z M 100,5 L 110,15 L 120,15 L 120,5 z" 
      Stroke="Black" Fill="Red" />

However, that assumes you want the same Fill, Stroke, etc in both pieces, which is not the case in your example.

Upvotes: 0

Related Questions