How to open the SfRadialMenu in list view click action in Xamarin.Forms

You can add the RadialMenu control to the ListView page and open it anywhere by tapping on the ListView item. The following steps describe how to open SfRadialMenu in list view click action.

Step 1: Add the necessary assemblies in the PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding SfRadialMenu to your project.

Setp 2: Add the ListView with items loaded on the view.

Xaml code:

<syncfusion:SfListView x:Name="listView"  
                ItemsSource="{Binding BookInfo}"  ItemTapped="listView_ItemTapped" 
                ItemSize="250">
 
<syncfusion:SfListView.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="main">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.4*" />
                <RowDefinition Height="0.6*" />
            </Grid.RowDefinitions>
            <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="Small" />
            <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/>
        </Grid>
    </DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

C# code:

namespace Radial_Sample
{
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new BookInfoRepository();
    }
}
}

Step 3: Add the RadialMenu control to the same view using the following code sample.

<radialMenu:SfRadialMenu IsOpen="False" IsVisible="False" Closing="radial_Menu_Closing" CenterButtonBackFontFamily="Segoe MDL2 Assets.ttf"  HorizontalOptions="Center" HeightRequest="250" WidthRequest="220"  VerticalOptions="Center" x:Name="radial_Menu" CenterButtonText="&#xe72b;" CenterButtonBackText="&#xe72b;" CenterButtonFontFamily="Segoe MDL2 Assets.ttf" >
<radialMenu:SfRadialMenu.Items>
    <radialMenu:SfRadialMenuItem FontIconText="&#xe72e;" IconFontFamily="Segoe MDL2 Assets.ttf">
        <radialMenu:SfRadialMenuItem.Items>
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe71C;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe72c;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe72e;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe734;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
        </radialMenu:SfRadialMenuItem.Items>
    </radialMenu:SfRadialMenuItem>
    <radialMenu:SfRadialMenuItem FontIconText="&#xe734;" 
                IconFontFamily="Segoe MDL2 Assets.ttf">
        <radialMenu:SfRadialMenuItem.Items>
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe72c;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe72d;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe734;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe72e;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
        </radialMenu:SfRadialMenuItem.Items>
    </radialMenu:SfRadialMenuItem>
    <radialMenu:SfRadialMenuItem  FontIconText="&#xe72e;" 
                IconFontFamily="Segoe MDL2 Assets.ttf">
        <radialMenu:SfRadialMenuItem.Items>
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe730;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe72e;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe730;" 
                        IconFontFamily="Segoe MDL2 Assets.ttf" />
        </radialMenu:SfRadialMenuItem.Items>
    </radialMenu:SfRadialMenuItem>
    <radialMenu:SfRadialMenuItem  FontIconText="&#xe730;" IconFontFamily="Segoe MDL2 Assets.ttf">
        <radialMenu:SfRadialMenuItem.Items>
            <radialMenu:SfRadialMenuItem  IconFontSize="16" FontIconText="&#xe72c;" IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  IconFontSize="18" FontIconText="&#xe730;" IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  IconFontSize="20" FontIconText="&#xe72e;" IconFontFamily="Segoe MDL2 Assets.ttf" />
        </radialMenu:SfRadialMenuItem.Items>
    </radialMenu:SfRadialMenuItem>
    <radialMenu:SfRadialMenuItem FontIconText="&#xe72c;" IconFontFamily="Segoe MDL2 Assets.ttf">
        <radialMenu:SfRadialMenuItem.Items>
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe734;" IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe739;" IconFontFamily="Segoe MDL2 Assets.ttf" />
            <radialMenu:SfRadialMenuItem  FontIconText="&#xe734;" IconFontFamily="Segoe MDL2 Assets.ttf" />
        </radialMenu:SfRadialMenuItem.Items>
    </radialMenu:SfRadialMenuItem>
</radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

Step 4: Get the x-position and y-position of the tapped item on the listView item and set the IsOpen and IsVisible properties of RadialMenu to true. On closing the radial menu, set the visibility of radial menu to false.

private void listView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)
{
 
radial_Menu.TranslationX = e.Position.X - (radial_Menu.Width);
radial_Menu.TranslationY = e.Position.Y - (radial_Menu.Height);
radial_Menu.IsOpen = true;
radial_Menu.IsVisible = true;
}
 
 
private void radial_Menu_Closing(object sender, Syncfusion.SfRadialMenu.XForms.ClosingEventArgs e)
{
radial_Menu.IsVisible = false;
}

Output image:

Open SfRadialMenu in ListView

You can get the sample for opening SfRadialMenu in list view click action from this link.

Did you find this information helpful?

Yes

Comments (0)

How to open the SfRadialMenu in list view click action in Xamarin.Forms

Xaml code:

C# code:

Access denied