如何为框架设置不同的拐角半径? [英] How to set different corner radius for Frame?

问题描述

热设置框架的每个拐角半径吗?可以全部设置一次，但我可以分别设置每个值，将2舍入为2的法线.

Hot to set each corner radius for the Frame? It can be set all by one, but I to set each of them individually, 2 rounded 2 normal.

推荐答案

您需要在每个平台上创建一个自定义渲染器.我不知道是否可以单独控制半径，但是可以控制拐角是否遵守半径.

You need to create a custom renderer on each platform. I don't know if you can control the radius individually but you can control whether the corner adheres to the radius or not.

首先，您在共享项目中需要一个自定义类，它将作为您的自定义控件...

Firstly, you need a custom class in your shared project that will act as your custom control ...

using System;
using Xamarin.Forms;

namespace MyApp.Controls
{
    public class CustomFrame : Frame
    {
        // ---------------------------------------------------------------------------------------------------------------
        public static readonly BindableProperty CornerRadiusTopLeftProperty = BindableProperty.Create(
            propertyName: "CornerRadiusTopLeft",
            returnType: typeof(bool),
            declaringType: typeof(CustomFrame),
            defaultValue: true,
            defaultBindingMode: BindingMode.TwoWay
        );

        public bool CornerRadiusTopLeft
        {
            get { return (bool)GetValue(CornerRadiusTopLeftProperty); }
            set { base.SetValue(CornerRadiusTopLeftProperty, value); }
        }

        // ---------------------------------------------------------------------------------------------------------------
        public static readonly BindableProperty CornerRadiusTopRightProperty = BindableProperty.Create(
            propertyName: "CornerRadiusTopRight",
            returnType: typeof(bool),
            declaringType: typeof(CustomFrame),
            defaultValue: true,
            defaultBindingMode: BindingMode.TwoWay
        );

        public bool CornerRadiusTopRight
        {
            get { return (bool)GetValue(CornerRadiusTopRightProperty); }
            set { base.SetValue(CornerRadiusTopRightProperty, value); }
        }

        // ---------------------------------------------------------------------------------------------------------------
        public static readonly BindableProperty CornerRadiusBottomLeftProperty = BindableProperty.Create(
            propertyName: "CornerRadiusBottomLeft",
            returnType: typeof(bool),
            declaringType: typeof(CustomFrame),
            defaultValue: true,
            defaultBindingMode: BindingMode.TwoWay
        );

        public bool CornerRadiusBottomLeft
        {
            get { return (bool)GetValue(CornerRadiusBottomLeftProperty); }
            set { base.SetValue(CornerRadiusBottomLeftProperty, value); }
        }

        // ---------------------------------------------------------------------------------------------------------------
        public static readonly BindableProperty CornerRadiusBottomRightProperty = BindableProperty.Create(
            propertyName: "CornerRadiusBottomRight",
            returnType: typeof(bool),
            declaringType: typeof(CustomFrame),
            defaultValue: true,
            defaultBindingMode: BindingMode.TwoWay
        );

        public bool CornerRadiusBottomRight
        {
            get { return (bool)GetValue(CornerRadiusBottomRightProperty); }
            set { base.SetValue(CornerRadiusBottomRightProperty, value); }
        }
    }
}

然后，您需要在每个平台上创建渲染器.我还没有完成Android方面的工作，但这就是iOS所需要的...

You then need to create the renderer on each platform. I haven't done the Android side yet but this is what you need for iOS ...

using System;

using CoreAnimation;

using MyApp.iOS.CustomRenderers;
using Foundation;
using MyApp.Controls;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomFrame), typeof(CustomFrameRenderer))]
namespace MyApp.iOS.CustomRenderers
{
    public class CustomFrameRenderer : FrameRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);

            if (Element != null)
            {
                var element = Element as CustomFrame;

                int result = 0;

                if (element.CornerRadiusTopLeft)
                    result += (int)CACornerMask.MinXMinYCorner;

                if (element.CornerRadiusTopRight)
                    result += (int)CACornerMask.MaxXMinYCorner;

                if (element.CornerRadiusBottomLeft)
                    result += (int)CACornerMask.MinXMaxYCorner;

                if (element.CornerRadiusBottomRight)
                    result += (int)CACornerMask.MaxXMaxYCorner;

                Layer.MaskedCorners = (CACornerMask)result;
            };
        }
    }
}

然后您就可以在XAML文件中将其用作自定义控件.

You're then able to make use of it in your XAML file as a custom control.

将命名空间添加到您的页面中...

Add the namespace to your page ...

xmlns:customControls="clr-namespace:MyApp.Controls"

...然后添加您的自定义框架...

... then add your custom frame ...

<customControls:CustomFrame BackgroundColor="White" CornerRadius="10" HasShadow="false"            
        CornerRadiusBottomLeft="false" CornerRadiusBottomRight="false" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Padding="15">

    <!-- Add your other elements here -->
</customControls:CustomFrame>

希望对您有所帮助. Android渲染器祝您好运，我相信这并不难，只是还没有实现.

I hope that helps you. Good luck with the Android renderer, I'm sure it's not hard, just haven't gotten to it yet.

这篇关于如何为框架设置不同的拐角半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！