Xamarin 在图像周围形成自定义框架形状答案

【问题标题】：Xamarin Forms custom frame shape around ImageXamarin 在图像周围形成自定义框架形状
【发布时间】：2019-04-12 02:02:16
【问题描述】：

我的应用中有一张图片，它周围有一个框架，以使图片变成一个圆圈。我想要框架的自定义形状，但不知道如何获得这个确切的形状。

（请忽略图中的房子，它只是在 Xamarin 中表示图像，我只需要轮廓为形状）。

我也不需要框架有彩色边框，只需要形状。

任何帮助将不胜感激！

这是我现在的 Frame + Image 代码：

<Frame x:Name="PictureFrame" Padding="0" Margin="0" HorizontalOptions="Center" BorderColor="Transparent" WidthRequest="80" HeightRequest="80" HasShadow="False">
    <Image x:Name="Picture" Source="picture" Margin="0,0,0,0" Aspect="AspectFill"/>
</Frame>

【问题讨论】：

标签： xaml xamarin.forms

【解决方案1】：

您可能必须创建一个自定义渲染器来实现您正在寻找的内容。例如，在 Android 上，框架掩码实际上是使用贝塞尔路径实现的，如果您深入研究代码，您可以根据自己的喜好进行控制。

看看FreshEssentials AdvancedFrame 视图，它几乎可以满足您的需求。他们所做的修改是，您可以在左侧或右侧的两个角上都有一个 90 度的锐角。您只需稍微修改此代码，即可在除左上角之外的所有区域设置圆角。

你需要修改的是：

AdvancedFrame（如果您希望角半径可单独配置或其他。这是从 Xamarin.Forms 中的原始 Frame 控件继承的基础）
AdvancedFrameRendererDroid
AdvancedFrameRendereriOS
AdvancedFrameRendererUWP（仅当您需要 UWP 支持时）

提示：

在 Android 上，框架的背景掩码使用 Path 类定义。

在 iOS 上，使用 UIKit 框架中的 UIBezierPath 类。

【讨论】：

感谢您的建议，我现在就试试这个！
祝你好运，一开始使用贝塞尔路径可能会有点令人沮丧，但一旦你掌握了它们的要点，那就是无限可能！

【解决方案2】：

现在有了 Xamarin.Forms，您可以使用 Shapes。路径数据是你的圆点。

<AbsoluteLayout
    BackgroundColor="AliceBlue"
    >
    <Path
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        Margin="8"
        Data="M142.798828,0 C221.365114,0.164668482 285,63.9009723 285,142.5 C285,221.200577 221.200577,285 142.5,285 C63.7994232,285 0,221.200577 0,142.5 C0,139.784357 0.0759637392,137.086456 0.225882227,134.408306 L0,133.828125 L0,0 L142.798828,0 Z"
        Stroke="LightBlue"
        StrokeThickness="2"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        />
    <Image
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        Aspect="AspectFit"
        Source="brigadeiro"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="94"
        HeightRequest="94"
        />
</AbsoluteLayout>

【讨论】：