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="" FontFamily="Segoe Ui Symbol" Margin="10,0,0,0" FontSize="20" ></TextBlock>
<TextBlock Text="Configuration" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
解释
我使用了边框,因为边框具有cornerRadius属性。
<Border CornerRadius="15,0,0,0" Background="SkyBlue" Height="30" Width="100" HorizontalAlignment="Left">
路径数据是
<Path Data="M 100,0 L 150,40 L 100 40 Z" Fill="SkyBlue"></Path>
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.
最终输出
Update您可以使用视图框根据要求缩放此绘图,我还添加了圆角曲线
第一种方法
<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="" FontFamily="Segoe Ui Symbol" Margin="10,0,0,0" FontSize="20" ></TextBlock>
<TextBlock Text="Configuration" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</Viewbox>
第二种方法
<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="" FontFamily="Segoe Ui Symbol" Margin="10,0,0,0" FontSize="20" ></TextBlock>
<TextBlock Text="Configuration" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</Viewbox>