Blue mouse hover effect

[ruppschtaler]

Hi there,

I'm trying to achieve the look of NinjaTrader's chart window in my Add-on by adding controls like InstrumentSelector and XamDateTimeEditor to NTWindow's MainMenu.
Works nicely - even most of the controls show up skinned.
But when hovering the mouse over these controls the default blue mouse hover effect is active in NTWindow (in contrary to NinjaTrader's chart window).
I've attached two screenshots.

Please help
Thanks in advance

[NinjaTrader_Jim]

Hello ruppschtaler,

Thanks for opening the thread.

The AddOnFramework example from our help guide adds the Instrument selector and other items through XAML and the control template for the skin is inherited.

Are you doing anything different than what is outlined in the AddOnFramework example?

I have also attached a reduced AddOn example that also inherits the Style from the skin.

AddOnFramework example can be found here: http://ninjatrader.com/support/helpG...ript_Basic.zip

If this does not resolve your inquiry, could you provide an export of the AddOn's source code?

I look forward to being of further assistance.

[ruppschtaler]

Hi Jim,

Thanks for your quick reply!

Yes, in contrary to your AddOnFramework example there is no need in my Add-on for tabs and I'm happy to save some space.
Therefore I don't add my controls to an NTTabPage but directly to the MainMenu of Add-on's NTWindow.

[NinjaTrader_Jim]

Hello ruppschtaler,

Thanks for your reply.

I've included another example that does not create an NTTabPage in the AddOn window, loads its page content from XAML. Styles are inherited as well.

Without the full code, I am only left to speculate. If you still have not resolved your inquiry around inheriting Styles, please provide an export showing what you have done to see the results you are getting. (Please provide a reduced version of the code that only displays the issue so it can be reviewed easily.)

If you do not want to share the export on the forums, you may reach me at platformsupport [at] ninjatrader [dot] com with the thread URL, the export and the text "Attention Jim."

I'll be happy to assist you further.

[ruppschtaler]

Hi Jim,

The issue is simple to reproduce:
Just add an instrument selector in code behind to the MainMenu of the AddOnFrameworkWindow (see attached screenshot).
The control shows up correctly skinned but unfortunately with the annoying blue mouse hover effect...

[NinjaTrader_Jim]

Hello ruppschtaler,

Thanks for making this matter clearer.

I am observing that we can add controls to a Chart's NTWindow.MainMenu and the mouse over behavior is that of NinjaTrader's, but when we add controls to an AddOn's NTWindow.MainMenu, we get the results you are observing.

I am inquiring with the development team if this is supposed to be expected behavior and what any recommendations may be. I'll update this post/thread as more information becomes available.

[NinjaTrader_JessicaP]

Hello ruppschtaler,

As far as answering your question directly, the behavior you are observing is the default behavior when no button hover event is handled in a WPF element. You can learn more about this at this publicly available link.

https://stackoverflow.com/questions/26850712/blue-mouse-over-effect-on-button-in-blend-wpf

While we are reviewing the InstrumentSelector style we ship, I wanted to chime in and give you some insight regarding modifying Ninja's built-in xaml, in case there are any other areas where what you see out-of-the-box needs a little tweaking to meet your needs.

To modify an existing style you will need two things :

• Information about the style you are modifying
• A new, unfinalized style instance you can change.

For the first bullet, I have attached an indicator which, when run on a chart with Chart Trader open, inspects the Buy button on the Ask side of the market and prints all its information to the Output Window.


From the attached indicator we learn that the background color we are looking for is 0xFFCCCCCC .


While this following code snippet won't quite accomplish your goal, it will give you a starting point which you can use to modify any displayed behavior in Ninja. This sample will make the entire Instrument Selector's background (in this case this only shows up behind the hourglass icon) green when you mouse over the instrument selector.

            Style myInstrumentSelectorStyle = new Style();
            myInstrumentSelectorStyle.BasedOn = Application.Current.TryFindResource(typeof(InstrumentSelector)) as Style;
            Setter background = new Setter(DataGrid.BackgroundProperty, Brushes.ForestGreen);
            DataTrigger onHover = new DataTrigger()
            {
                Binding = new Binding()
                {
                    Path = new PropertyPath("IsMouseOver"),
                },
                Value = true,
            };
            onHover.Setters.Add(background);
            myInstrumentSelectorStyle.Triggers.Add(onHover);

            InstrumentSelector  InstrumentSelector = new InstrumentSelector(){Style = myInstrumentSelectorStyle };
            MainMenu.Add(InstrumentSelector);

Again, while we will review the style we are shipping, it is my hope that these two tools will give you a greater ability to style your own applications.

[ruppschtaler]

Hello Jessica,

Thanks for your reply!

Your code works nicely to change Instrument Selector's background but unfortunately the background is not the issue but rather the area behind the control (please see attached screenshot of my first post).
Maybe the blue hover effect originates from the menu item?
Since NTWindow's MainMenu is an ObservableCollection I don't know how to change the style of the MainMenu.
Same issue with EVERY control - DateTimeEditor, TextBox etc.

[NinjaTrader_JessicaP]

I'm glad the above example was helpful. I believed it was necessary to provide that first to address this sort of problem in the general case, in case other customers browsing the forums happen across this thread.

In your case specifically, this is caused by the MenuItem style being applied on top of the instrument selector in your add-on. Fortunately, a work-around already exists for this case.

[FONT=Courier New]public AddonShellWindow()
{
  Caption = "Addon Shell Window";
  Width = 400;
  Height = 250;
  UseOverflowMenu = true;[/FONT]

Please let us know if there are any other ways we can help.

[ruppschtaler]

Wow, that's simple - and it worked...
Thank you so much!

[Bidder]

In response to post #7 above.

A code behind style creation method with mouseover functionality:

protected Style SetStyle(Brush FontBrush, Brush BackBrush, Brush HoverBrush)
{
Style BhStyle = new Style();
BhStyle.BasedOn = Application.Current.TryFindResource(typeof(Button) ) as Style;
BhStyle.TargetType = typeof(Button);
BhStyle.Setters.Add(new Setter(Button.BorderThicknessProperty, new Thickness(0)));
BhStyle.Setters.Add(new Setter(Button.HorizontalAlignmentProperty, HorizontalAlignment.Center));
BhStyle.Setters.Add(new Setter(Button.FontSizeProperty, 11.0));
BhStyle.Setters.Add(new Setter(Button.FontWeightProperty, FontWeights.Regular));
BhStyle.Setters.Add(new Setter(Button.ForegroundProperty, FontBrush));
BhStyle.Setters.Add(new Setter(Button.BackgroundProperty, BackBrush));
Setter sbg = new Setter(Button.BackgroundProperty, HoverBrush);
DataTrigger onHover = new DataTrigger()
{
Binding = new Binding()
{
Path = new PropertyPath("IsMouseOver"),
RelativeSource = RelativeSource.Self
},
Value = true
};
onHover.Setters.Add(sbg);
BhStyle.Triggers.Add(onHover);
return BhStyle;
}