Xamarin.Forms 帧内容在Android中溢出

Question

I have a Xamarin.Forms app (4.6.0.800) & I'm making a control using Frame for the rounded corners. But the background color of grid flows out of the bounds of the frame on Android. It works as expected on iOS.

Here's the XAML code

<Frame x:Name="MainFrame" CornerRadius="8" Padding="1" BorderColor="Black" HorizontalOptions="FillAndExpand"
               IsClippedToBounds="True">

            <Grid HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid x:Name="FirstButton" Grid.Column="0">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Tapped="FirstButton_Tapped" />
                    </Grid.GestureRecognizers>
                    <controls:ShapeView x:Name="FirstBox" 
                                        CornerRadius="8" Margin="0,0,-4,0"
                                        ShapeType="Box"
                                        HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
                    <Label x:Name="FirstBoxLabel"
                       VerticalOptions="Center" HorizontalOptions="Center"/>
                </Grid>
                <Grid x:Name="SecondButton" Grid.Column="1" >
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Tapped="SecondButton_Tapped" />
                    </Grid.GestureRecognizers>
                    <controls:ShapeView x:Name="SecondBox"
                                        CornerRadius="8" Margin="-4,0,0,0"
                                        ShapeType="Box"
                                        HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
                    <Label x:Name="SecondBoxLabel" 
                       VerticalOptions="Center" HorizontalOptions="Center"/>
                </Grid>
            </Grid>
        </Frame>

I have tried adding IsClippedToBounds="True" but that didn't help either. I wonder what am I missing?

Answer 1

It seems an existing issue on some version of Xamarin.Forms when we set the BorderColor . As as workaround, you could add an extra Frame as the parent layout of the CusTomView. In this way you don't need to set BorderColor any more. Check the following code.

// padding here will become the bordercolor of the frame
<Frame BackgroundColor="Black" Padding="1" CornerRadius="8">
            <Frame x:Name="MainFrame" CornerRadius="8" Padding="0"  HorizontalOptions="FillAndExpand"
               IsClippedToBounds="True" >
                <Grid HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid x:Name="FirstButton" Grid.Column="0">
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Tapped="FirstButton_Tapped" />
                        </Grid.GestureRecognizers>
                        <BoxView x:Name="FirstBox" 
                                        CornerRadius="8" Margin="0,0,-4,0"
                                        HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
                        <Label x:Name="FirstBoxLabel"
                       VerticalOptions="Center" HorizontalOptions="Center"/>
                    </Grid>
                    <Grid x:Name="SecondButton" Grid.Column="1" >
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Tapped="SecondButton_Tapped" />
                        </Grid.GestureRecognizers>
                        <BoxView x:Name="SecondBox"
                                        CornerRadius="8" Margin="-4,0,0,0"
                                        HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
                        <Label x:Name="SecondBoxLabel" 
                       VerticalOptions="Center" HorizontalOptions="Center"/>
                    </Grid>
                </Grid>
            </Frame>
        </Frame>