CODEWITHSUNDEEP
wpfpath
Habib Gherairi
Habib Gherairi

Reputation: 291

WPF Path : How to Draw this in XAML?

I want to create a custom GroupBox with non rectangular header like in the following picture :

enter image description here

As you see, the content of the header must be parametrable, so image, title and background can be entered in xaml.

Thanks in advance.

Thank you for your answer.

Actually i want to use this design in a custom groupbox, so in your answer if i dont't set width and height of the grid (width=150 height =30) the shape components become separated, So i want the shape to be in a unique Body, so it will be easy to apply background colors. and by the way can you round corners like the following picture ?

enter image description here

Upvotes: 3

Views: 2901

Answers (1)

Heena
Heena

Reputation: 8634

Try this

  <Grid Width="150" Height="30">
    <Border CornerRadius="15,0,0,0" Background="SkyBlue" Height="30" Width="100" HorizontalAlignment="Left"></Border>                    
    <Path Data="M 100,0 L 150,40 L 100 40 Z" Fill="SkyBlue"></Path>
    <TextBlock Text="&#xE161;" FontFamily="Segoe Ui Symbol" Margin="10,0,0,0" FontSize="20" ></TextBlock>
    <TextBlock Text="Configuration" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>

Explanation

I have used border as border has cornerRadius property.

<Border CornerRadius="15,0,0,0" Background="SkyBlue" Height="30" Width="100" HorizontalAlignment="Left">

enter image description here

And path data is

  <Path Data="M 100,0 L 150,40 L 100 40 Z" Fill="SkyBlue"></Path>

enter image description here

Using coordinate system ,i have use started point M 100,0 as border with is 100 and i used 40 for path height in data and 150 for grid total grid width. and Z used for close path data. enter image description here

Final Output

enter image description here

Update You can use viewbox to scale this drawing as per requrement and i have added rounded curve also

1st method

<Viewbox>
<Grid Width="150" Height="30">
    <Border CornerRadius="20,0,0,0" Background="SkyBlue" Height="30" Width="103" HorizontalAlignment="Left"></Border>
    <Path Name="myPathShape" Fill="SkyBlue" >
        <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry"  Center="90,45" RadiusX="40" RadiusY="50"  />
        </Path.Data>        
    </Path>
    <TextBlock Text="&#xE161;" FontFamily="Segoe Ui Symbol" Margin="10,0,0,0" FontSize="20" ></TextBlock>
    <TextBlock Text="Configuration" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</Viewbox>

2nd method

    <Viewbox>
    <Grid Width="150" Height="30">
        <Border CornerRadius="15,0,0,0" Background="SkyBlue" Height="30" Width="103" HorizontalAlignment="Left"></Border>
        <Path Data="M98.625,0.25 C104.076,-1.14832 109.448,2.02746 114.75,9.25 L130.125,29.8739 L102.25,29.9989" Fill="SkyBlue" HorizontalAlignment="Left" Height="30.073" Margin="98.625,-0.073,0,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="31.5"/>
        <TextBlock Text="&#xE161;" FontFamily="Segoe Ui Symbol" Margin="10,0,0,0" FontSize="20" ></TextBlock>
        <TextBlock Text="Configuration" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
    </Grid>      
</Viewbox>

Upvotes: 5

Related Questions