如何在 Xamrin.Form 的 FrameRenders 中使 3 个角变圆？

Question

我想将 BottomLeft、TopRight、TopLeft 角设为圆角。我试过以下。但是，当文本大小稍大时，它不会显示正确的设计。

我添加了如下代码。

为了更好理解，我添加了图片。

渲染代码

public class ExtendedFrameRenderer : FrameRenderer
{
    public override void Draw (CoreGraphics.CGRect rect)
    {
        base.Draw (rect);
        var elem = (ExtendedFrame)this.Element;
        UIRectCorner cornerstoRound = UIRectCorner.AllCorners;
        if (elem != null)
        {
            cornerstoRound = UIRectCorner.BottomLeft | UIRectCorner.TopRight | UIRectCorner.TopLeft;
        }

        var path = UIBezierPath.FromRoundedRect(rect, cornerstoRound, new CoreGraphics.CGSize(8, 8));
        var maskLayer = new CAShapeLayer();
        maskLayer.Path = path.CGPath;
        this.Layer.Mask = maskLayer;
    }
}

查看：

<Grid ColumnSpacing="2" Padding="5">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="15" />
    </Grid.ColumnDefinitions>

    <local:ExtendedFrame Grid.Column="1" OutlineColor="Transparent" HasShadow="False"
                         BackgroundColor="#30a5da">
        <StackLayout Spacing="0">
            <Label TextColor="White"
                   FontFamily="SourceSansPro-Regular"
                   FontSize="16"
                   Text="{Binding Text}" />
            <Label Grid.Row="1" Grid.Column="1"
                   FontSize="12" HorizontalTextAlignment="End"
                   Text="{Binding MessageDateTime, StringFormat='{0:hh:mm tt}'}"
                   TextColor="White" />
        </StackLayout>
    </local:ExtendedFrame>
</Grid>

Answer 1

我觉得这样比较简单。这是我的 UWP 插件。也许它会帮助你。查看 customRender.Link

Answer 2

我认为您可以在 XF 中执行此操作而无需覆盖 FrameRenderer。这会给你塑造你想要的。而且如果你不覆盖渲染器，它应该更好地处理里面的内容

    <Grid Margin="10" HorizontalOptions="EndAndExpand">
            <Frame
                BackgroundColor="Red"
                CornerRadius="0"
                HeightRequest="50"
                HorizontalOptions="End"
                VerticalOptions="End"
                WidthRequest="20" />
            <Frame
                BackgroundColor="Blue"
                CornerRadius="10"
                HeightRequest="100">
                <StackLayout>
                    <Label
                        FontSize="17"
                        Text="long fake text text"
                        TextColor="White" />
                    <Label
                        FontSize="12"
                        HorizontalTextAlignment="End"
                        Text="05:30 AM"
                        TextColor="Yellow" />
                </StackLayout>
            </Frame>
        </Grid>

如何在 Xamrin.Form 的 FrameRenders 中使 3 个角变圆？

How to make 3 corner rounded in FrameRenders in Xamrin.Form?

c#

listview

mvvm-light

xamarin.forms