CODEWITHSUNDEEP
c#wpf
JokerMartini
JokerMartini

Reputation: 6147

wpf path data differences

So I'm trying to create a vector path made of multiple shapes. The desired goal is this...

enter image description here

However I've seen data for paths written in multiple ways. One way is like this..

M10,0L20,10 0,10z

This same path could be written like this...

M10.2042655289777,2.10534975661348L20.2042655289777,12.1053497566135 0.204265528977683,12.1053497566135z

Both snippets above create this shape.

enter image description here

From my own analysis I've discovered that the first snippet of code is scaleable and fits the contents of the button its placed in. Where as the second approach appears to be more exact coordinates of the path points. Is there any way i can create a path with exact coordinates and then convert it to the more general one like so M10,0L20,10 0,10z. Or if anything i can i create my desired shape while maintaining its scalability.

Here is my path data...

<Path Fill="Blue" Data="M16.5,4.50000035762787L25.5,4.50000035762787 25.5,17.5000002384186 16.5,17.5000002384186z M2.5,4.49999994039536L11.5,4.49999994039536 11.5,25.5000002384186 2.5,25.5000002384186z M0.5,0.5L27.5,0.5 27.5,1.50000023841858 0.5,1.50000023841858z"></Path>

I guess i could always use Stretch="Uniform"

Upvotes: 1

Views: 365

Answers (1)

Peregrine
Peregrine

Reputation: 4556

If you want the shape all in one colour then you can use a single path object to define it.

<Grid Width="250" Height="250">
    <Border BorderBrush="Black" BorderThickness="1">
        <Path Margin="4" 
              Fill="Red" 
              Stretch="Uniform" 
              VerticalAlignment="Top" 
              Data="M 0,0 L 100,0 L 100,15 L 0,15 z 
                    M 5,20 L 40,20 L 40,100 L 5,100 z 
                    M 60,20 L 95,20 L 95,70 L 60,70 z" />
    </Border>
</Grid>

Note that because stretch is set to uniform, the display size of the path is constrained by the parent container. The coordinates used in the path element are just relative values. Changing the size of the grid will shrink the path drawing, keeping a 4 pixel margin from the border.

If you want to draw the shape in multiple colours then it becomes slightly more complicated. You can use multiple path objects, but in order to position them correctly, they all have to be coerced into the same coordinate system by using a pair of move values to define the overall size (still in relative units) at the start of each data string.

<Grid Width="250" Height="250">
    <Border BorderBrush="Black" BorderThickness="1">
        <Grid>
            <Path Margin="4" Fill="Red" Stretch="Uniform" 
                  Data="M 100,100 M 0,0 L 100,0 L 100,15 L 0,15 z" />

            <Path Margin="4" Fill="Blue" Stretch="Uniform" 
                  Data="M 0,0 M 100,100 M 5,20 L 40,20 L 40,100 L 5,100 z" />

            <Path Margin="4" Fill="Green" Stretch="Uniform" 
                  Data="M 0,0 M 100,100 M 60,20 L 95,20 L 95,70 L 60,70 z" />
        </Grid>
    </Border>  
</Grid>

The second grid is required as a border can only have a single child.

Upvotes: 1

Related Questions