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

只需将框架包装到另一个框架中，即可为其提供想要的bordercolor背景色。并给包装框架填充。这是带有边框的圆形图像的示例。

<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类为圆角支持创建贝塞尔路径。您只需要深入了解每个平台上的Draw方法（iOS，Android）并找出如何设置笔触宽度。

从Android开始最简单，因为笔画宽度已在代码中定义（on this line）。您只想在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);
        }
    }
}

Xamarin.Forms中的框架边框宽度

4 个答案: