Xamarin.Forms 中的框架边框宽度

Question

我使用Xamarin.Forms ，我有Image 。 我想用Corner Radius和Border Width来边框。 我可以做吗 ？ 我尝试使用Frame 。 很好，但它只有Border Width = 1，我无法更改。 我知道Effect ，但我不想使用它们。 我可以用 Rectangle 或任何方式来做吗？

Answer 1

你可以尝试这样的事情：

<Frame HasShadow="False" CornerRadius="25" Padding="2" BackgroundColor="#F69927">
    <Frame HasShadow="False" CornerRadius="23" BackgroundColor="White" Padding="12">
        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Start">
            <!-- Content -->                
        </StackLayout>
    </Frame>
</Frame>

Answer 2

只需将您的框架包裹到另一个框架中，为其提供您希望边框颜色的背景颜色。 并提供包装框架填充。 这是带边框的圆形图像的示例。

<Frame CornerRadius="60" HeightRequest="100" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Padding="2" IsClippedToBounds="True">
    <Frame CornerRadius="60" HeightRequest="100" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
            <Image Source="dp.jpg" HeightRequest="40" WidthRequest="40" Aspect="AspectFill"></Image>
    </Frame>
</Frame>

Answer 3

您可以使用效果创建自己的实现，也可以扩展FreshEssentials开源库。 他们有一个名为AdvancedFrame的控件，它为所有平台上的 Frame 控件提供自定义渲染器。

如果您查看每个特定于平台的项目，您会注意到AdvancedFrameRenderer类为圆角支持创建贝塞尔曲线路径。 您只需要深入了解每个平台（ iOS 、 Android ）上的Draw方法并弄清楚如何设置笔画宽度。

从 Android 开始最容易，因为在代码中已经定义了笔画宽度（ 在这一行）。 您只需要在 AdvancedFrame 控件中为此创建一个属性，以便您可以在每个控件上拥有不同的宽度。 我不确定如何在 iOS 上设置笔画宽度，但它使用 UIBezierPath 应该很容易修改。

Answer 4

我尝试与 FrameRenderer for Android 共舞，我找到了一些解决方案。 不好的一面是，要成为 MyFrameRenderer 类中可见的边框颜色、宽度和角半径变量，我必须创建 MyFrame:Frame 类以仅影响我自己的框架类型。 足够接近我的目的......所以：

namespace PROJECT
{
    public class MyFrame : Xamarin.Forms.Frame
    {
        public static float myFrameWidth = 2;
        public static float myCornerRadius = 12;
        public static Color myFrameColor = Color.Red;
        public static Color myBackgroundColor = Color.Black;

        public MyFrame() { }
    }
}

...

[assembly: ExportRenderer(typeof(PROJECT.MyFrame), typeof(PROJECT.Droid.MyFrameRenderer))]
namespace PROJECT.Droid
{
    class MyFrameRenderer : FrameRenderer
    {
        protected override void OnDraw(Android.Graphics.Canvas canvas)
        {
            // canvas contains image of standard outline
            // to "hide" it, not efficent but sometimes "close enough solution"
            // is to overlay that outline by new one in our's page background color
            // then draw a new one in prefered style
            // or... just draw thicker one over the old

            var my1stPaint = new Android.Graphics.Paint();
            var my2ndPaint = new Android.Graphics.Paint();
            var backgroundPaint = new Android.Graphics.Paint();

            my1stPaint.AntiAlias = true;
            my1stPaint.SetStyle(Paint.Style.Stroke);
            my1stPaint.StrokeWidth = MyFrame.myFrameWidth + 2;
            my1stPaint.Color = MyFrame.myFrameColor.ToAndroid();

            my2ndPaint.AntiAlias = true;
            my2ndPaint.SetStyle(Paint.Style.Stroke);
            my2ndPaint.StrokeWidth = MyFrame.myFrameWidth;
            my2ndPaint.Color = MyFrame.myBackgroundColor.ToAndroid();

            backgroundPaint.SetStyle(Paint.Style.Stroke);
            backgroundPaint.StrokeWidth = 4;
            backgroundPaint.Color = MyFrame.myBackgroundColor.ToAndroid();

            Rect oldBounds = new Rect();
            canvas.GetClipBounds(oldBounds);

            RectF oldOutlineBounds = new RectF();
            oldOutlineBounds.Set(oldBounds);

            RectF myOutlineBounds = new RectF();
            myOutlineBounds.Set(oldBounds);
            myOutlineBounds.Top += (int)my2ndPaint.StrokeWidth+3;
            myOutlineBounds.Bottom -= (int)my2ndPaint.StrokeWidth+3;
            myOutlineBounds.Left += (int)my2ndPaint.StrokeWidth+3;
            myOutlineBounds.Right -= (int)my2ndPaint.StrokeWidth+3;

            canvas.DrawRoundRect(oldOutlineBounds, 10, 10, backgroundPaint); //to "hide" old outline
            canvas.DrawRoundRect(myOutlineBounds, MyFrame.myCornerRadius, MyFrame.myCornerRadius, my1stPaint);
            canvas.DrawRoundRect(myOutlineBounds, MyFrame.myCornerRadius, MyFrame.myCornerRadius, my2ndPaint);

            base.OnDraw(canvas);
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Frame> e)
        {
            base.OnElementChanged(e);
        }
    }
}