Xamarin Forms Android Frame Renderer и угловой радиус

Question

Когда я создаю пользовательский рендер для Xamarin Forms Frame в Android, свойство CornerRadius переходит к броску. Неважно, что я установил, это не работает. Он всегда рисует прямоугольник.

Xamarin Forms (Контроль) -

public class MyFrame : Frame
{
}

Xamarin Forms (XAML) -

<shd:MyFrame WidthRequest="200" HeightRequest="200" CornerRadius="100">
    <shd:MyFrame.Content>
        <Label Text="Hello" TextColor="Black"/>
    </shd:MyFrame.Content>
</shd:MyFrame>

Xamarin Android -

public class MyFrameRenderer : ViewRenderer<Controls.MyFrame, FrameRenderer>
{
    public MyFrameRenderer(Context context) : base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Controls.MyFrame> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
        }
    }
}

Как установить свойство CornerRadius для придания ему закругленных углов.

Спасибо!

Обновление

Нейморфизм - это дизайн тренд, где контроль имеет два оттенка тени, темный и светлый. Если вы посетите этот веб-сайт, вы сможете визуализировать то, чего я пытаюсь достичь.

Я использовал изображение патча Android для достижения аналогичного эффекта для прямоугольной рамки angular, однако, когда я попытался предоставить CornerRadius, оно не сработало.

Answer 1

Вы можете попробовать Forms9Patch Nuget Package, чтобы реализовать его в каждом iOS и Android. Посмотрите на документ .

<StackLayout Padding=" 10">
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />
    <Forms9Patch:Frame Padding="20"
                       HeightRequest="100"
                       WidthRequest="100"
                       OutlineColor="Blue"
                       OutlineWidth="3"
                       OutlineRadius="10"
                       HasShadow="True"
                       BorderRadius="50"
                       BackgroundColor="Gray">
        <!--<Label Text="Forms9Patch.Frame w/ OutlineWidth+OutlineRadius"
               TextColor="White"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               FontSize="14" />-->

    </Forms9Patch:Frame>

</StackLayout>

Эффект:

А если вы хотите создать изображение с различными формами, вы можете использовать его Forms9Patch.Image с Свойства контура и формы

Answer 2

Как я это сделал.

Создан пользовательский рендер для просмотра. Со свойствами для основного цвета, темной тени и светлой тени -

public class NeumorphicCircleBackground : View
{
    public static readonly BindableProperty LightColorProperty =
        BindableProperty.Create("LightColor", typeof(Color), typeof(NeumorphicCircleBackground), null);

    public Color LightColor
    {
        get { return (Color)GetValue(LightColorProperty); }
        set { SetValue(LightColorProperty, value); }
    }

    public static readonly BindableProperty MainColorProperty =
        BindableProperty.Create("MainColor", typeof(Color), typeof(NeumorphicCircleBackground), null);

    public Color MainColor
    {
        get { return (Color)GetValue(MainColorProperty); }
        set { SetValue(MainColorProperty, value); }
    }

    public static readonly BindableProperty DarkColorProperty =
        BindableProperty.Create("DarkColor", typeof(Color), typeof(NeumorphicCircleBackground), null);

    public Color DarkColor
    {
        get { return (Color)GetValue(DarkColorProperty); }
        set { SetValue(DarkColorProperty, value); }
    }
}

и представлением Android -

protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);

        var h = canvas.Height;
        var w = canvas.Width;
        var size = Math.Min(h, w);

        float a = 0.1f * size;
        float b = 0.6f * size;
        float x0 = (w - size) / 2;
        float y0 = 0f;

        RectF ovalLight = new RectF();
        RectF ovalMain = new RectF();
        RectF ovalDark = new RectF();
        ovalLight.Set(x0, y0, x0 + b, y0 + b);
        ovalMain.Set(x0 + a, y0 + a, x0 + a + b, y0 + a + b);
        ovalDark.Set(x0 + 2 * a, y0 + 2 * a, x0 + 2 * a + b, y0 + 2 * a + b);

        var r = b / 2;

        var xl = x0 + b / 2;
        var yl = y0 + b / 2;
        var xd = x0 + 2 * a + b / 2;
        var yd = y0 + 2 * a + b / 2;
        var xm = x0 + a + b / 2;
        var ym = y0 + a + b / 2;

        var lightGradient = GetRadialPaint(xl, yl, r, _lightColor);
        var darkGradient = GetRadialPaint(xd, yd, r, _darkColor);
        var mainGradient = new Paint(PaintFlags.AntiAlias) { Color = _mainColor };

        if (_isCircle)
        {
            DrawCircle(canvas, xl, yl, r, lightGradient);
            DrawCircle(canvas, xd, yd, r, darkGradient);
            DrawCircle(canvas, xm, ym, r, mainGradient);
        }
        else
        {
            DrawRoundedRectangle(canvas, ovalLight, 50f, 50f, lightGradient);
            DrawRoundedRectangle(canvas, ovalDark, 50f, 50f, darkGradient);
            DrawRoundedRectangle(canvas, ovalMain, 50f, 50f, mainGradient);
        }
    }

я добавил дополнительные свойства, чтобы сделать его обобщенным c Закругленный угол Прямоугольник, а также идеальный круг. Вы можете изменить его так, как хотите.

Answer 3

Попробуйте это

Установка радиуса угла на половину высоты и ширины и установка отступа на 0.

 <Frame  HeightRequest="100" Padding="0" HorizontalOptions="Center" HasShadow="True" BackgroundColor="Accent" IsClippedToBounds="True" WidthRequest="100" CornerRadius="50">
            <Image Source="yourimage.png" Aspect="AspectFill"></Image>
 </Frame>