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="" 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="" 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="" 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="" 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="" 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="" Style="{StaticResource labelStyle}" FontFamily="{StaticResource customfontfamily}"> </Label> </Grid> </radialMenu:SfRadialMenuItem.View> </radialMenu:SfRadialMenuItem> </radialMenu:SfRadialMenu.Items> </radialMenu:SfRadialMenu>
Output
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