On appearing image doesn't show

[Zain]

Hi, I am using the radial menu. The center button image doesn't show when it appears on the screen. It only appears in the center after I click on it to open.  

<radialMenu:SfRadialMenu x:Name="RadMenu" RimRadius="200" CenterButtonRadius="60" Point="120,215" IsDragEnabled="False" IsEnabled="False" SeparatorColor="Red" RimColor="#FFF880" CenterButtonBackgroundColor="#FFF880" SelectionColor="#63a9ef" Opened="RadMenu_Opened" Closed="RadMenu_Closed" DragEnd="RadMenu_DragEnd" CenterButtonBorderColor="#FFF880" >

                    <radialMenu:SfRadialMenu.CenterButtonView >

                        <Frame BackgroundColor="Red" CornerRadius="140"

                               Padding="0" IsClippedToBounds="True">

                            <Image Source="koko2" Aspect="AspectFill"/>

                        </Frame>

                </radialMenu:SfRadialMenu.CenterButtonView>

                    <radialMenu:SfRadialMenu.Items>

                    <radialMenu:SfRadialMenuItem Text="Reminder" FontSize="16" ItemWidth="120" FontFamily="SecondFont" HorizontalOptions="CenterAndExpand" ItemTapped="Reminder_ItemTapped"/>

                    <radialMenu:SfRadialMenuItem Text="Need to Buy" FontSize="16" ItemWidth="120" FontFamily="SecondFont"/>

                    </radialMenu:SfRadialMenu.Items>

                </radialMenu:SfRadialMenu>

[Ruba Shanmugam]

Hi Zain, 

 

Greetings from Syncfusion, 

 

We have prepared a sample based on the code snippet provided using the latest version. We regret to let you know that we were not able to replicate the same. Find the sample & screenshot link from below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RadialMenu_CenterButtonView1293801935 

 

Screenshot: 

 

   

 

Could you please share the following details which would be helpful for us to check on it and provide you solution at the earliest. 

Xamarin forms & SfRadialMenu version used in your application 

Issue replicating sample (if possible) 

Issue reproducing platform details 

Since we were not aware for your exact scenario. So could you please try our sample and let us know if you still facing the same issue? If not, please modify our sample and revert us back with the following details which would be helpful for us to check on it and provide you the solution as soon as possible. 

 

Regards, 

Ruba Shanmugam 

[Zain]

Hi Ruba, I've figured out what is causing the problem. It is due to the image being placed in a frame. If I place an image without the frame it works normally, and shows the image I want when it first appears. However the purpose of the frame was to crop the image into a circle. Do you recommend any other method to crop the image into a circle? I have tried using EllipseGeometry (as seen below) how ever this causes the radmenu to have an oblong shape.

[Zain]

<radialMenu:SfRadialMenu IsVisible="False" x:Name="RadMenu" RimRadius="200" CenterButtonRadius="60" Point="120,215" SeparatorColor="Red" RimColor="#FFF880" CenterButtonBackgroundColor="#FFF880" SelectionColor="#63a9ef" Opened="RadMenu_Opened" Closed="RadMenu_Closed" DragEnd="RadMenu_DragEnd" CenterButtonBorderColor="#FFF880" >

                <radialMenu:SfRadialMenu.CenterButtonView >

                    <Image Source="RadMenuDefault" HeightRequest="110" WidthRequest="110" Aspect="AspectFill" VerticalOptions="Center" HorizontalOptions="Center">

                        <Image.Clip>

                            <EllipseGeometry

                                Center="60,60" RadiusX="110" RadiusY="110"/>

                        </Image.Clip>

                    </Image>

                </radialMenu:SfRadialMenu.CenterButtonView>

                <radialMenu:SfRadialMenu.Items>

                    <radialMenu:SfRadialMenuItem Text="Today's Ping" FontSize="16" ItemWidth="120" FontFamily="SecondFont" VerticalOptions="Center" HorizontalOptions="Center" ItemTapped="Reminder_ItemTapped"/>

                    <radialMenu:SfRadialMenuItem Text="Paw Journal" FontSize="16" ItemWidth="120" FontFamily="SecondFont" ItemTapped="SfRadialMenuItem_ItemTapped"/>

                    <radialMenu:SfRadialMenuItem Text="Customize Me!" FontSize="16" ItemWidth="120" FontFamily="SecondFont" ItemTapped="SfRadialMenuItem_ItemTapped_1"/>

                </radialMenu:SfRadialMenu.Items>

            </radialMenu:SfRadialMenu>

[Jeya Kasipandi]

Hi Zain,

We have checked the reported issue based on the code snippet provided and it displays the image as like circle shape. Please find the tested sample from below link:

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted57213290  

Could you please check the issue with the above sample and let us know whether it is reproduced or not ?. If the issue was not reproduced in this sample, please revert us by modifying the sample based on your application scenario or provide the sample and share screenshot or video about the issue and also share which platform facing this issue. This will be helpful for us to provide better solution at the earliest.

Regards,
Jeya K 

[Zain]

Hi I have follewed your code above. However the image on the radmenu appears like this (Its not round) I also tried making the image smaller however that doesn't work:

[Jeya Kasipandi]

Hi Zain,

We suggest you change Radius X and Radius Y value based on half of the value of height request and width request values of an image and add image inside the grid as like below code snippet and check the reported issue resolved or not.

  <radialMenu:SfRadialMenu.CenterButtonView>

 <Grid VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="110" WidthRequest="110">

                    <Image Source="imgd.png" BackgroundColor="Red" HeightRequest="110" WidthRequest="110" Aspect="AspectFill" VerticalOptions="Center" HorizontalOptions="Center">

                        <Image.Clip>

                            <EllipseGeometry

                                Center="55,55" RadiusX="55" RadiusY="55"/>

                        </Image.Clip>

                    </Image>

                    </Grid>

   </radialMenu:SfRadialMenu.CenterButtonView>

If you are still facing problem, can you please add image inside SfBorder control to get the circle shape as like below code snippet

 

 <radialMenu:SfRadialMenu.CenterButtonView>

<Grid HeightRequest="110" WidthRequest="110" HorizontalOptions="Center" VerticalOptions="Center">

                        <border:SfBorder BorderThickness="0" BorderColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="55">

                            <Image Source="imgd.png" BackgroundColor="Red" HeightRequest="110" WidthRequest="110" Aspect="AspectFill" VerticalOptions="Center" HorizontalOptions="Center">

                         </Image>

                        </border:SfBorder>

                    </Grid>

   </radialMenu:SfRadialMenu.CenterButtonView>

Please refer the below link for more information about SfBorder

https://help.syncfusion.com/xamarin/border/customization#adding-circular-image 

We have modified the sample based on this and please find the sample from below link

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted271532199

Please check with the above and if you are still facing problem, can you please share an image used in centerbuttonview and if possible, share issue replication sample. This will be helpful for us to investigate further and provide better solution at earliest.

Regards,

Jeya K