Xamarin 圆角框架背景颜色超过圆角边缘答案

【问题标题】：Xamarin round cornered frame's background color surpasses the rounded edgesXamarin 圆角框架背景颜色超过圆角边缘
【发布时间】：2017-11-30 10:05:42
【问题描述】：

我使用框架标签在里面包裹了一个网格，但是每当我向框架添加圆角半径时，所述框架的背景颜色就会从圆角消失并显示为尖角。

谁能帮忙？

问题还附有图片以正确描述问题。

代码sn-p是：

<Frame CornerRadius="15" 
       BackgroundColor="Aqua"  
       OutlineColor="Black" 
       MinimumHeightRequest="100" 
       MinimumWidthRequest="150" 
       HorizontalOptions="Center" 
       VerticalOptions="Center" 
       Grid.Column="2">
    <Grid x:Name="MessageGrid"   
          HorizontalOptions="Fill" 
          VerticalOptions="Fill">
        <Grid Margin="0,0,0,0" 
              HorizontalOptions="FillAndExpand" 
              InputTransparent="True"  
              VerticalOptions="FillAndExpand">
            <Label x:Name="InfoText" 
                   TextColor="Black" 
                   HorizontalOptions="FillAndExpand" 
                   VerticalOptions="FillAndExpand" 
                   InputTransparent="True"
                   Text="Tooltip text goes here and this is to check if its responsive"/>
        </Grid>
    </Grid>
</Frame>

【问题讨论】：

UWP 错误：bugzilla.xamarin.com/show_bug.cgi?id=56914 在 iOS/Android 上按预期工作（至少对于表单 2.5.0.91635
我也有这个问题。你解决了吗？
您是否尝试设置 Frames IsClippedToBounds="True"。

标签： c# xaml xamarin

【解决方案1】：

这是 Frame 元素类型的实现中的一个错误。虽然框架不会包含它自己的背景，但它会包含其中其他元素的背景。

解决方法是将一个框架包裹在一个相同大小的框架内。使用外框指定 CornerRadius，但忽略 BackgroundColor。内框可以指定背景颜色，外框会四舍五入。

确保在两个框架上都包含 Padding="0,0,0,0"。

【讨论】：

只需要在外框上有 Padding="0,0,0,0" 。不过谢谢！

【解决方案2】：

简单设置：

IsClippedToBounds = "True"

在框架中。它会阻止子元素离开容器。

【讨论】：

【解决方案3】：

我使用 FreshEssentials 库解决了这个问题。见

https://forums.xamarin.com/discussion/57546/how-can-i-achieve-this-effect-stacklayout-or-frame

和

http://michaelridland.com/xamarin/freshessentials-for-xamarin-forms-the-must-have-nuget-for-forms/

【讨论】：

【解决方案4】：

这是因为你的框架允许你的网格超出它的边界，所以你需要设置是剪辑到边界IsClippedToBounds = "True"

将其应用到您的代码后，它将如下所示

<Frame CornerRadius="15" 
       BackgroundColor="Aqua"  
       OutlineColor="Black" 
       MinimumHeightRequest="100" 
       MinimumWidthRequest="150" 
       HorizontalOptions="Center" 
       VerticalOptions="Center" 
       Grid.Column="2"
       IsClippedToBounds = "True">
    <Grid x:Name="MessageGrid"   
          HorizontalOptions="Fill" 
          VerticalOptions="Fill">
        <Grid Margin="0,0,0,0" 
              HorizontalOptions="FillAndExpand" 
              InputTransparent="True"  
              VerticalOptions="FillAndExpand">
            <Label x:Name="InfoText" 
                   TextColor="Black" 
                   HorizontalOptions="FillAndExpand" 
                   VerticalOptions="FillAndExpand" 
                   InputTransparent="True"
                   Text="Tooltip text goes here and this is to check if its responsive"/>
        </Grid>
    </Grid>
</Frame>

现在，当您设置 IsClippedToBounds = "True" 时，它会告诉您的框架不要让其子元素超出其边界/边界，这样您的问题就会得到解决

【讨论】：

【解决方案5】：

我遇到了同样的问题，而且很难解决。但是，我找到了解决方案：我创建了一个名为 EntryBackgroundColorProperty 的属性，并且在 Custom Renderer 实现中，gradientDrawabe 的颜色指向了这个新属性。

总结：您必须避免使用默认属性“BackgroundColor”，而是创建另一个。

【讨论】：