Articles in this section

How to show SfRadial menu as a floating point button?

Steps to show SfRadial menu as floating-point button:

 

Step 1: Add radial menu in the content page.

 

Step 2: Add radial menu items and the center button view.

 

Step 3: Place the radial menu in the appropriate position using the point property.

 

The following code sample demonstrates how to show radial menu as a floating-point button.

XAML:

<radialMenu:SfRadialMenu x:Name="radialMenu" 
                             IsDragEnabled="true" 
                             CenterButtonPlacement="Center"
                             LayoutType="Custom" 
                             VisibleSegmentsCount="8" 
                             CenterButtonRadius="40"
                             CenterButtonBackgroundColor="Coral" 
                             RimColor="Transparent" 
                             SelectionColor="Transparent"
                             CenterButtonTextColor="White" 
                             CenterButtonFontSize="25" 
                             EnableRotation="True"
                             RimRadius="150" >
        <radialMenu:SfRadialMenu.CenterButtonView>
                <Grid HeightRequest="40" WidthRequest="40">
                    <Image Source="Grace.png" />
                  </Grid>
                </radialMenu:SfRadialMenu.CenterButtonView>
                <radialMenu:SfRadialMenu.Items>
                    <radialMenu:SfRadialMenuItem SegmentIndex="0" ItemHeight="70" ItemWidth="80" Text="item 1" ItemTapped="Handle_ItemTapped">
                        <radialMenu:SfRadialMenuItem.View>
                            <Grid HeightRequest="55" WidthRequest="80">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="15"/>
                                </Grid.RowDefinitions>
                                <Image Grid.Row="0" Source="call.png"/>
                                <Label Grid.Row="1" Text="item 1" TextColor="Coral" FontSize="12"></Label>
                            </Grid>
                        </radialMenu:SfRadialMenuItem.View>
                    </radialMenu:SfRadialMenuItem>
                    <radialMenu:SfRadialMenuItem SegmentIndex="2" ItemHeight="70" ItemWidth="80" Text="item 2" ItemTapped="Handle_ItemTapped_1" >
                        <radialMenu:SfRadialMenuItem.View>
                            <Grid HeightRequest="55" WidthRequest="80">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="15"/>
                                </Grid.RowDefinitions>
                                <Image Grid.Row="0" Source="call.png"/>
                                <Label Grid.Row="1" Text="item 2" TextColor="Coral" FontSize="12"></Label>
                            </Grid>
                        </radialMenu:SfRadialMenuItem.View>
                    </radialMenu:SfRadialMenuItem>
                </radialMenu:SfRadialMenu.Items>
            </radialMenu:SfRadialMenu>

 

C#

public partial class GettingStarted_RadialMenu : ContentPage
    {
        public GettingStarted_RadialMenu()
        {
            InitializeComponent();
        }
 
        protected override void OnAppearing()
        {
            radialMenu.Point = new Point(140, 260);
        }
    }

 

Sample image to show the default drawer:

Floating point button in SfRadial

Please find the sample from the following link: Sample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied