CODEWITHSUNDEEP
c#xamlxamarin
Abdullah Qureshi
Abdullah Qureshi

Reputation: 1

Xamarin round cornered frame's background color surpasses the rounded edges

I'm using a frame tag to wrap a grid inside, but whenever I add corner radius to the frame, the background color of the said frame goes out from the rounded corners and is displayed as a sharp corner.

Can anyone help?

An image is also attached with the question to portray the problem correctly.

The code snippet is:

<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>

enter image description here

Upvotes: 0

Views: 2443

Answers (5)

Anderson
Anderson

Reputation: 411

I had the same problem, and it was hard to fix it. But, I found the solution: I created a property called EntryBackgroundColorProperty and, inside Custom Renderer implementation, the color of gradientDrawabe was pointed to this new property.

To summarize: you must avoid use the default property "BackgroundColor", create another instead.

Upvotes: 0

Jay Bhatia
Jay Bhatia

Reputation: 98

it is because you frame allows your grid to go out of its bound so you need to set is clip to bounds IsClippedToBounds = "True"

after applying this in to your code it will look like this 

<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>

now when you set IsClippedToBounds = "True" it will tell your frame to not let its child elements go out of its bounds/borders so your issue will be resolved

Upvotes: 0

bhavya joshi
bhavya joshi

Reputation: 1136

Simply set:

IsClippedToBounds = "True"

in frame. It will stop child element to go outside of container.

Upvotes: 2

Paul Weaver
Paul Weaver

Reputation: 51

It's a bug in the implementation of the Frame element type. Although a frame won't contain it's own background, it will contain the backgrounds of other elements within it.

The work-around is to wrap one frame inside an identical sized frame. Use the outer frame to specify the CornerRadius, but leave out the BackgroundColor. The inner frame can specify the background color and it will be rounded off by the outer frame.

Be sure to include Padding="0,0,0,0" on both frames.

Upvotes: 2

David Christopher Reynolds
David Christopher Reynolds

Reputation: 1451

I solved this by using the FreshEssentials library. See

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

and

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

Upvotes: 0

Related Questions