Tapped and Hover button color of a SfRadialMenu

[george s]

We were wanting to know how to set the background color of the center button of a SfRadialMenu when it is either hovered or tapped.

[Kishore Jeyachandran]

Hi George,

Thank you for contacting Syncfusion support.

Based on your request, we have provided a sample below that demonstrates how to change the background color of the center button in the SfRadialMenu when it is hovered or tapped. This implementation uses the VisualStateManager to handle interaction states such as Hovered and Pressed, and dynamically updates the CenterButtonBackgroundColor based on the current visual state.

XAML Code :
 

 <ContentPage.Resources>

     <ResourceDictionary>

         <Style x:Key="CenterButtonVisualStyle" TargetType="syncfusion:SfRadialMenu">

             <Setter Property="VisualStateManager.VisualStateGroups">

                 <VisualStateGroupList>

                     <VisualStateGroup Name="CommonStates">

                         <VisualState Name="Normal">

                             <VisualState.Setters>

                                 <Setter Property="CenterButtonBackgroundColor" Value="Gray" />

                             </VisualState.Setters>

                         </VisualState>

                         <VisualState Name="Hovered">

                             <VisualState.Setters>

                                 <Setter Property="CenterButtonBackgroundColor" Value="Blue" />

                             </VisualState.Setters>

                         </VisualState>

                         <VisualState Name="Pressed">

                             <VisualState.Setters>

                                 <Setter Property="CenterButtonBackgroundColor" Value="Red" />

                             </VisualState.Setters>

                         </VisualState>

                     </VisualStateGroup>

                 </VisualStateGroupList>

             </Setter>

         </Style>

     </ResourceDictionary>

 </ContentPage.Resources>

 

 <syncfusion:SfRadialMenu

 x:Name="radialMenu"

 CenterButtonText="Edit"

 CenterButtonTextColor="White"

 Style="{StaticResource CenterButtonVisualStyle}">

     <syncfusion:SfRadialMenu.Items>

         <syncfusion:SfRadialMenuItem Text="Bold" />

         <syncfusion:SfRadialMenuItem Text="Italic" />

         <syncfusion:SfRadialMenuItem Text="Underline" />

         <syncfusion:SfRadialMenuItem Text="Highlight" />

     </syncfusion:SfRadialMenu.Items>

 </syncfusion:SfRadialMenu>

Please feel free to contact us if you have any further questions or need additional assistance.

Regards,
Kishore J