)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set MouseOverBackgroundColor for the SfRadialMenuItem?

Platform: WPF |
Control: SfRadialMenu |
Published Date: May 18, 2016 |
Last Revised Date: June 24, 2019 |
Product Version: 13.4.0.53

MouseOverBackground color of SfRadialMenuItem can be changed by MenuMouseOverBackground property. To enable the background color, ShowMouseOverStyle property of SfRadialMenuItem need to set to True. The same has been explained in the following code example:

XAML:

<Window x:Class="SfRadialMenuItem_New.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:navigation="clr-namespace:Syncfusion.Windows.Controls.Navigation;assembly=Syncfusion.SfRadialMenu.Wpf"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="Grid1">
<navigation:SfRadialMenu x:Name="_Radialmenu">
<navigation:SfRadialMenuItem Header="MenuItem1" ShowMouseOverStyle="True" MenuMouseOverBackgroundColor="Red" />
<navigation:SfRadialMenuItem Header="MenuItem2" ShowMouseOverStyle="True" MenuMouseOverBackgroundColor="Yellow" />
<navigation:SfRadialMenuItem Header="MenuItem3" ShowMouseOverStyle="True" MenuMouseOverBackgroundColor="Green" />
<navigation:SfRadialMenuItem Header="MenuItem4" ShowMouseOverStyle="True" MenuMouseOverBackgroundColor="Brown"/>
<navigation:SfRadialMenuItem Header="MenuItem5" ShowMouseOverStyle="True" MenuMouseOverBackgroundColor="BlueViolet" />
</navigation:SfRadialMenu>
</Grid>
</Window>
 

 

C#:

namespace SfRadialMenuItem_New
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
SfRadialMenu _Radialmenu = new SfRadialMenu();
SfRadialMenuItem Item1 = new SfRadialMenuItem();
Item1.Header = "MenuItem1";
Item1.ShowMouseOverStyle = true;
Item1.MenuMouseOverBackgroundColor = Brushes.Red;
SfRadialMenuItem Item2 = new SfRadialMenuItem();
Item2.Header = "MenuItem2";
Item2.ShowMouseOverStyle = true;
Item2.MenuMouseOverBackgroundColor = Brushes.Yellow;
SfRadialMenuItem Item3 = new SfRadialMenuItem();
Item3.Header = "MenuItem3";
Item3.ShowMouseOverStyle = true;
Item3.MenuMouseOverBackgroundColor = Brushes.Green;
SfRadialMenuItem Item4 = new SfRadialMenuItem();
Item4.Header = "MenuItem4";
Item4.ShowMouseOverStyle = true;
Item4.MenuMouseOverBackgroundColor = Brushes.Brown;
SfRadialMenuItem Item5 = new SfRadialMenuItem();
Item5.Header = "MenuItem5";
Item5.ShowMouseOverStyle = true;
Item5.MenuMouseOverBackgroundColor = Brushes.BlueViolet;
_Radialmenu.Items.Add(Item1);
_Radialmenu.Items.Add(Item2);
_Radialmenu.Items.Add(Item3);
_Radialmenu.Items.Add(Item4);
_Radialmenu.Items.Add(Item5);
Grid1.Children.Add(_Radialmenu);
}
}
}
 

 

Output:

            RadialMenu.png

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Harald Stapfer
Dec 02, 2019

How to set MouseOverBackgroundColor for the SfRadialMenuItem by using data binding (e.g: ItemsSource="{Binding Options}")

Reply
Hemalatha Marikumar [Syncfusion]
Dec 06, 2019

It has been achieved by keeping the collection of SfRadialMenuItem through ViewModel with setting each radial menu item color as per in below code snippet

Code Snippet:

XAML:

C#: public class ViewModel { private ObservableCollection collection; public ObservableCollection Collection { get { return collection; } set { collection = value; } } public ViewModel() { collection = new ObservableCollection(); collection.Add(new SfRadialMenuItem() { MenuMouseOverBackgroundColor = Brushes.Brown, ShowMouseOverStyle=true,Header= "Item 1" }); collection.Add(new SfRadialMenuItem() { MenuMouseOverBackgroundColor = Brushes.Red, ShowMouseOverStyle=true,Header= "Item 2" }); collection.Add(new SfRadialMenuItem() { MenuMouseOverBackgroundColor = Brushes.Blue, ShowMouseOverStyle=true,Header= "Item 3" }); collection.Add(new SfRadialMenuItem() { MenuMouseOverBackgroundColor = Brushes.Yellow, ShowMouseOverStyle=true,Header= "Item 4" }); collection.Add(new SfRadialMenuItem() { MenuMouseOverBackgroundColor = Brushes.Violet, ShowMouseOverStyle=true,Header= "Item 5" });
} }

Sample Link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/RadialMenu_Sample1731828336

Fabian
Mar 25, 2020

It seems to work only if the mouse is over the header-label? Is there a way to make it work for the whole menu-item?

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon