如何在Xamarin.Form中的Frame Renders中使3个圆角变圆？

Posted 2021-04-01

我想将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>

答案

我认为你可以在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>

另一答案

我认为这更简单。这是我的UWP插件。也许它会帮助你。看看customRender.Link