WPF 路径:如何在 XAML 中绘制它? [英] WPF Path : How to Draw this in XAML?

问题描述

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

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

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

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

提前致谢.

感谢您的回答.

实际上我想在自定义分组框中使用此设计，因此在您的回答中，如果我不设置网格的宽度和高度(宽度 = 150 高度 = 30)，则形状组件会分开，所以我想要形状在一个独特的身体中，所以很容易应用背景颜色.顺便说一句，你可以像下图那样圆角吗?

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 ?

推荐答案

试试这个

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

说明

我使用了边框，因为边框具有cornerRadius 属性.

I have used border as border has cornerRadius property.

<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 用于关闭路径数据.

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.

最终输出

更新您可以使用 viewbox 根据要求缩放此图形，并且我还添加了圆角曲线

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

第一种方法

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

这篇关于WPF 路径:如何在 XAML 中绘制它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！