英文:
Creating a custom button shape with inverted corner WPF
问题
我试图在WPF中创建一个自定义按钮，其形状如下所示：
但是我在底部右侧的倒角上遇到了困难。我已经看到了各种组合矩形和椭圆形状的示例，或者使用自定义路径，但是我还没有看到如何将其转化为按钮的任何示例。
英文:
I am trying to create a custom button in WPF in this shape:
But am struggling on the inverted CornerRadius in the bottom right. I have seen various examples of combining Rectangle and Ellipse shapes, or by using a custom path, however I haven't seen any examples of how to then turn that into a button.
答案1
得分: 1
将您的设计转化为按钮很简单，只需将其设置为按钮的内容。使用 CombinedGeometry 类，您可以制作各种不同的按钮形状（请参阅 如何：创建组合几何图形）。以下是使用 CombinedGeometry 实现您的设计的示例：
<Button>
<Grid>
<Path Fill="White"
Width="160"
Height="160">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="80,0,80,160" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="40"
RadiusY="40"
Center="120,160" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="0,120,120,40" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,80,80" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="40"
RadiusY="40"
Center="40,80" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="40,0,40,120" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
<TextBlock Text="自定义按钮"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black" />
</Grid>
</Button>
这可以通过使用更少的几何元素来改进，但它为您提供了一个工作模板。
英文:
Turning your design into a button is simple, you make it the Content of your Button. Using the CombinedGeometry Class, sky's the limit to what you can make (see How to: Create a Combined Geometry). Here's an implementation of your design using CombinedGeometry:
<Button>
<Grid>
<Path Fill="White"
Width="160"
Height="160">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="80,0,80,160" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="40"
RadiusY="40"
Center="120,160" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="0,120,120,40" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,80,80" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="40"
RadiusY="40"
Center="40,80" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="40,0,40,120" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
<TextBlock Text="Custom Button"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black" />
</Grid>
</Button>
This could be improved by using less geometry but it gives you a template to work with.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论