如何在Xamarin Forms中创建蜂窝状六边形按钮并实现蜂窝排布？

嘿，这个需求挺有意思的！我之前也折腾过类似的蜂窝布局控件，给你几个落地性强的方案，完全不用怕SkiaSharp会耗掉几周时间，其实有不少简化路径：

方案一：自定义布局+基础六边形按钮（最快上手） #

这个方案不用碰复杂的绘图API，用Xamarin Forms原生控件就能搞定：

• 六边形按钮实现：
  用Polygon控件定义六边形路径，把它作为Button的Background，或者直接用ContentView包裹Polygon和Label来模拟按钮。比如给Polygon设置Points属性为六边形的顶点坐标，然后给外层的ContentView添加点击事件，同时要确保点击只响应六边形区域——可以用Geometry.Contains方法判断点击点是否在Polygon的路径内，过滤掉六边形外的无效点击。
• 蜂窝排布实现：
  自定义一个继承Layout<View>的HexagonLayout，重写LayoutChildren方法来计算每个按钮的位置。蜂窝布局的核心规律是：
  • 先确定六边形的边长，计算出实际宽度（2 * 边长）和高度（Math.Sqrt(3) * 边长）
  • 奇数行的元素X坐标为 索引 * 宽度，Y坐标为 行号 * 高度
  • 偶数行的元素X坐标要额外偏移宽度/2，Y坐标和奇数行规则一致
    按照这个逻辑循环布局所有子元素，就能得到你要的_ / \_ \_/ \ / \_/ \_/结构。

方案二：SkiaSharp实现（灵活度更高） #

如果需要更复杂的样式（比如渐变、阴影、动态效果），SkiaSharp其实没你想的那么复杂：

• 六边形按钮绘制：
  先创建一个SKPath，用AddPolygon方法添加六边形的顶点，然后自定义一个HexagonButton继承SKCanvasView，在OnPaintSurface方法里绘制这个路径，同时处理点击事件——在Touch事件里把屏幕坐标转换成画布坐标，用SKPath.Contains判断是否点击在六边形内。
• 蜂窝布局简化：
  如果按钮数量固定，甚至可以直接在一个SKCanvasView上批量绘制所有六边形，然后根据点击坐标反向计算对应的按钮位置，这种方式不用创建大量控件，性能更好，开发速度也快，熟悉SkiaSharp基本API的话，一天就能搞定核心逻辑。

方案三：第三方控件库（偷懒备选） #

如果不想自己造轮子，可以看看Syncfusion、Telerik这类Xamarin Forms第三方控件库，部分库会提供现成的六边形控件或蜂窝布局容器，但缺点是可能需要付费，而且灵活性不如自定义实现。

额外技巧提示 #

• 点击区域优化：不管用哪种方案，一定要处理点击区域的有效性，避免用户点击六边形空白区域也触发事件。
• 复用性设计：把六边形按钮和蜂窝布局封装成独立的自定义控件，以后其他页面直接引用就行。
• 性能优化：如果按钮数量超过50个，优先考虑SkiaSharp批量绘制或者自定义布局的复用逻辑，避免大量控件导致的性能问题。

其实这些方案都不用花费几周时间，比如方案一的核心功能一两天就能完成，剩下的就是调整样式和细节~

内容的提问来源于stack exchange，提问作者user2900970