jamesmontemagno / ImageCirclePlugin

Circle Images for your Xamarin.Forms Applications
MIT License
240 stars 68 forks source link

[Bug] Circle Image not correctly rendering (while in a horizontal StackLayout?) #88

Closed MarcusOy closed 4 years ago

MarcusOy commented 5 years ago

Hi there, I am trying to use this plugin, however, I cannot get the circle image to render properly. See screenshots. I believe it has to do with the parent containers it is in. It starts in a Frame, which has the content of a Grid (first row with a GridLength of 0.45 out of 1.0 and GridUnitType on Star), then it is in a StackLayout that is Horizontal.

Edit: just tested making a circle image in a ScrollView with content being a normal StackLayout, it works fine.

Bug Information

Version Number of Plugin: 3.0.0.5 Device Tested On: None Simulator Tested On: iPhone 7 and XR Version of VS: VS for Mac 8.0.5 (Build 9) Version of Xamarin: 4.0.0.482894

Steps to reproduce the Behavior

I used starter code. Nothing else.

Expected Behavior

Renders correctly

Actual Behavior

The image used can be seen outside of the circle

Code snippet

This happens on the code listed in the Readme.md, however I was trying different settings and the result is the same every time.


            this.frameGrid = new Grid
            {
                RowDefinitions =
                {
                    new RowDefinition{Height = new GridLength(0.45, GridUnitType.Star) },
                    new RowDefinition{Height = new GridLength(0.55, GridUnitType.Star) }
                }
            };
            this.image = new CircleImage
            {
                BorderColor = Color.White,
                BorderThickness = 3,
                HeightRequest = 40,
                WidthRequest = 40,
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.Center,
                Source = ImageSource.FromUri(new Uri("https://techcrunch.com/wp-content/uploads/2018/07/logo-2.png"))
            };
            this.frameGrid.Children.Add(new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Children =
                {
                    this.image,
                    new StackLayout
                    {
                        Orientation = StackOrientation.Vertical,
                        Spacing = 0,
                        Children =
                        {
                            // Label,
                            // Label
                        }
                    }
                }
            }, 0, 0);

Screenshots

Screen Shot 2019-06-29 at 10 43 41 AM
jamesmontemagno commented 5 years ago

would need a sample project if you have it and can then see. This seems like it should work just fine as I have used horizontal stacks all the time. You could also put it in a grid.

MarcusOy commented 5 years ago

I switched to another library because I couldn’t figure out the problem myself. Sorry :(


From: James Montemagno notifications@github.com Sent: Tuesday, July 2, 2019 7:32:50 PM To: jamesmontemagno/ImageCirclePlugin Cc: MarcusOy; Author Subject: Re: [jamesmontemagno/ImageCirclePlugin] [Bug] Circle Image not correctly rendering (while in a horizontal StackLayout?) (#88)

would need a sample project if you have it and can then see. This seems like it should work just fine as I have used horizontal stacks all the time. You could also put it in a grid.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/jamesmontemagno/ImageCirclePlugin/issues/88?email_source=notifications&email_token=AD4CTGIYFC3CH4OO6SR72ULP5PXTFA5CNFSM4H4KVYXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZC5IQQ#issuecomment-507892802, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AD4CTGMGBHC33D5CZV7STXDP5PXTFANCNFSM4H4KVYXA.