WPF路径:如何在XAML中绘制它？

Question

我想创建一个非矩形标题的自定义GroupBox,如下图所示:

如您所见,标题的内容必须是可参数化的,因此可以在xaml中输入图像,标题和背景.

提前致谢.

---

谢谢您的回答.

实际上我想在自定义组合框中使用这个设计,所以在你的答案中,如果我没有设置网格的宽度和高度(宽度= 150高度= 30),形状组件会分开,所以我希望形状在一个独特的身体,所以很容易应用背景颜色.顺便问一下,你可以像下面的图片一样绕过角落吗？

Answer 1

试试这个

  <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>

说明

我使用border作为border具有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>

使用坐标系,我使用起始点M 100,0作为边界是100和我使用40作为数据中的路径高度和150作为网格总网格宽度.和Z用于关闭路径数据.

最终产出

更新 您可以使用视图按照要求缩放此绘图,我也添加了圆角曲线

第一种方法

<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>

第二种方法

    <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>