Articles in this section
Category / Section

How to customize the SfRadialMenu view to 180 degrees in Xamarin.Forms

2 mins read

The SfRadialMenu view can be customized to 180 degrees using the “SegmentedIndex”, “VisibleSegmentsCount” and “LayoutType” APIs of SfRadialMenu.

The following code snippet demonstrates how to customize the SfRadialMenu view to 180 degrees.

XAML 

<ContentPage.Resources>
        <ResourceDictionary>
            <OnPlatform x:TypeArguments="x:String" x:Key="customfontfamily" 
                        iOS="Social" 
                        Android="radialmenu_socialicons.ttf#Social_Icons" 
                        WinPhone="radialmenu_socialicons.ttf#Social_Icons"  />
            <Style TargetType="Label" x:Key="labelStyle">
                <Setter Property="FontSize" Value="Medium"/>
                <Setter Property="HeightRequest" Value="30"/>
                <Setter Property="WidthRequest" Value="30"/>
                <Setter Property="XAlign" Value="Center"/>
                <Setter Property="YAlign" Value="Center"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
                <Setter Property="VerticalTextAlignment" Value="Center"/>
            </Style>
            <Style TargetType="radialMenu:SfRadialMenuItem" x:Key="radialMenuItemStyle">
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="ItemHeight" Value="40"/>
                <Setter Property="ItemWidth" Value="40"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <radialMenu:SfRadialMenu x:Name="radial_Menu" 
                             RimRadius="150" 
                             VisibleSegmentsCount="8" 
                             LayoutType="Custom" 
                             CenterButtonRadius="25" 
                             CenterButtonBackgroundColor="#7ac943" 
                             RimColor="Transparent" 
                             SelectionColor="Transparent" 
                             CenterButtonText="&#xe703;" 
                             CenterButtonTextColor="White"
                             IsDragEnabled="false" 
                             CenterButtonFontSize="18" 
                             EnableRotation="false" 
                             EnableCenterButtonAnimation="false" 
                             SeparatorThickness="0" 
                             AnimationDuration="10" 
                             CenterButtonFontFamily="{StaticResource customfontfamily}" >
        <radialMenu:SfRadialMenu.Items>
            <radialMenu:SfRadialMenuItem Style="{StaticResource radialMenuItemStyle}"
                                         SegmentIndex="0" >
                <radialMenu:SfRadialMenuItem.View>
                    <Grid HeightRequest="40" 
                          WidthRequest="40">
                        <Image Source="radialmenu_facebook.png" />
                        <Label Text="&#xe700;"  
                               Style="{StaticResource labelStyle}"
                               FontFamily="{StaticResource customfontfamily}" >
 
                        </Label>
                    </Grid>
                </radialMenu:SfRadialMenuItem.View>
            </radialMenu:SfRadialMenuItem>
            <radialMenu:SfRadialMenuItem Style="{StaticResource radialMenuItemStyle}"
                                         SegmentIndex="1">
                <radialMenu:SfRadialMenuItem.View>
                    <Grid HeightRequest="40" 
                          WidthRequest="40">
                        <Image Source="radialmenu_gplus.png"/>
                        <Label Text="&#xe707;" 
                               Style="{StaticResource labelStyle}"
                               FontFamily="{StaticResource customfontfamily}">
                        </Label>
                    </Grid>
                </radialMenu:SfRadialMenuItem.View>
            </radialMenu:SfRadialMenuItem>
            <radialMenu:SfRadialMenuItem Style="{StaticResource radialMenuItemStyle}"
                                         SegmentIndex="2">
                <radialMenu:SfRadialMenuItem.View>
                    <Grid HeightRequest="40" 
                          WidthRequest="40">
                        <Image Source="radialmenu_twitter.png" />
                        <Label Text="&#xe704;" 
                               Style="{StaticResource labelStyle}"
                               FontFamily="{StaticResource customfontfamily}">
 
                        </Label>
                    </Grid>
                </radialMenu:SfRadialMenuItem.View>
            </radialMenu:SfRadialMenuItem>
            <radialMenu:SfRadialMenuItem Style="{StaticResource radialMenuItemStyle}"
                                         SegmentIndex="3">
                <radialMenu:SfRadialMenuItem.View>
                    <Grid HeightRequest="40" 
                          WidthRequest="40">
                        <Image Source="radialmenu_linkedin.png" />
                        <Label Text="&#xe706;" 
                               Style="{StaticResource labelStyle}"
                               FontFamily="{StaticResource customfontfamily}">
                        </Label>
                    </Grid>
                </radialMenu:SfRadialMenuItem.View>
            </radialMenu:SfRadialMenuItem>
            <radialMenu:SfRadialMenuItem  Style="{StaticResource radialMenuItemStyle}"
                                          SegmentIndex="4">
                <radialMenu:SfRadialMenuItem.View>
                    <Grid HeightRequest="40" 
                          WidthRequest="40">
                        <Image Source="radialmenu_gplus.png" />
                        <Label Text="&#xe702;" 
                               Style="{StaticResource labelStyle}"
                               FontFamily="{StaticResource customfontfamily}">
                        </Label>
                    </Grid>
                </radialMenu:SfRadialMenuItem.View>
            </radialMenu:SfRadialMenuItem>
        </radialMenu:SfRadialMenu.Items>
    </radialMenu:SfRadialMenu>

 

Output

RadialMenu

 

In the following sample, we have used the VisibleSegmentsCount has 8 and used to arrange the individual item in first 5 items to achieve this behavior.

You can download the complete 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)
Please  to leave a comment
Access denied
Access denied