Question

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

Answer 1

没有黑客，有一个非常简单的解决方案：

使用nuget软件包Xamarin.Forms.PancakeView。

如何使用它？

安装nuget包Xamarin.Forms.PancakeView。
然后，您需要告诉我们的XAML页面可以在哪里找到PancakeView，这可以通过向ContentPage中添加以下属性来完成：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView">
       ...
</ContentPage>

只需在页面上打一个PancakeView即可，一切就绪：

<yummy:PancakeView BackgroundColor="#bc91d7" CornerRadius="60,0,0,60" IsClippedToBounds="true" HorizontalOptions="FillAndExpand" HeightRequest="150">
   <Image Source="unicorn.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" />
</yummy:PancakeView>

Answer 2

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

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

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所需要的...

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文件中将其用作自定义控件。

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

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

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

<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渲染器祝您好运，我相信这并不难，只是还没有开始。

Answer 3

使用xaml进行非常骇人的尝试，您仍然可以注意到边界上的伪像，但是为了快速进行，为什么不这样做。

    <Grid>

        <Frame Margin="0,0,0,20" HasShadow="False" BorderColor="Transparent" CornerRadius="12" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Gray"/>
        <Frame Margin="1,1,1,20" HasShadow="False" BorderColor="Transparent" CornerRadius="11" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="White"/>
        <Frame Margin="0,20,0,0" VerticalOptions="Fill" HasShadow="False" BorderColor="Transparent" CornerRadius="2" HorizontalOptions="Fill" BackgroundColor="Gray" />
        <Frame Margin="1,20,1,1" VerticalOptions="Fill"  HasShadow="False" BorderColor="Transparent" CornerRadius="2" HorizontalOptions="Fill" BackgroundColor="White" />
        <BoxView Margin="1.75,15,1.75,15" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="White" HeightRequest="19" StyleId="hide background"/>

        <ContentView Margin="8" x:Name="MainContainer">
            <StackLayout >
                <Label TextColor="DimGray" Text="This is your main container"/>
                <Label TextColor="DimGray" Text="Put stuff here"/>
            </StackLayout>
        </ContentView>

    </Grid>

Answer 4

使用 Xamarin.Forms.PancakeView。

 <yummy:PancakeView BackgroundColor="#2DA6EA"  WidthRequest="300" HorizontalOptions="Start" CornerRadius="0,30,0,30">
                    <StackLayout>
                    <Label TextColor="White" Margin="10,0,0,0" FontSize="15" Text="Welcome"/>
                    <Label TextColor="White" Margin="10,0,0,0"  FontSize="20" Text="Dolapo"/>
                </StackLayout>
                </yummy:PancakeView>

如何为框架设置不同的拐角半径？

4 个答案: