ToolBar Button Style

[SystemTrading]

The buttons on the NT ToolBars have a nice DropShadowEffect when the mouse is hovering over them. If I add a button with only text, the drop shadow effect is replicated perfectly. When I add an image (with a transparent background) using the code from the link below, I no longer get the DropShadowEffect and the entire image rectangle is highlighted when the mouse is hovering. I see in the skins where DropShadowEffects are defined, but I have been unsuccessful in getting my button to work the same as the standard NT buttons. Would anyone be able to provide a sample?

http://ninjatrader.com/support/helpGuides/nt8/en-us/?using_bitmapimage_objects_with_buttons.htm

[NinjaTrader_PatrickH]

Hello SystemTrading,

What Style are you using? Can you attach the script or code you are running?

[SystemTrading]

Below is the code I have at the moment. And this is the image I am trying to use .

private void SetupChart(Chart chartWindow)
        {         
            // Instantiate a BitmapImage to hold an image 
            BitmapImage myBitmapImage = new BitmapImage();
            
            // Assign an image on the filesystem to the BitmapImage. 
            myBitmapImage.BeginInit();
            myBitmapImage.UriSource = new Uri(NinjaTrader.Core.Globals.InstallDir + "Images\\sample.png");
            myBitmapImage.EndInit();                        
            
            // Instantiate an ImageBrush to apply to the Button
            ImageBrush backgroundImage = new ImageBrush();     
            
            // Assign the BitmapImage as the ImageSource of the ImageBrush
            backgroundImage.ImageSource = myBitmapImage;            
        
            // Create a style to apply to the button                        
            Trigger trigger = new Trigger();            
            trigger.Property =  System.Windows.Controls.Button.IsMouseOverProperty;           
            trigger.Value = true;
            
            DropShadowEffect dropShadowEffect = (DropShadowEffect)Application.Current.TryFindResource("HoverDropShadow");                        
            Setter setter = new Setter(System.Windows.Controls.Button.EffectProperty, dropShadowEffect);                                                
            trigger.Setters.Add(setter);
            
            Style s = new Style();
            s.TargetType = typeof(System.Windows.Controls.Button);
            s.Triggers.Add(trigger);
            
            // Instantiate the Button            
            Button myButton = new Button();        
            myButton.Style = s;
            
            // Set the Imagebrush as the Background for the Button
            myButton.Background = backgroundImage;            
                    
            myButton.Width = 22;                            
            myButton.Height = 22;
            myButton.ToolTip = tip;
            myButton.IsEnabled = true;
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.VerticalAlignment = VerticalAlignment.Top;
            myButton.Click += ChatButton_Click;            
            
            // Add the Button to the Chart's Toolbar            
            chartWindow.MainMenu.Add(myButton);                                
        }

[NinjaTrader_Matthew]

Below is the code I have at the moment. And this is the image I am trying to use .

Good question.

We do not actually use images, we use Icons, and they are implemented in an NTMenuItem, which is wrapped into a generic Menu object and styled as well.

In order to style an object on the chart control menu and style + use effects like the rest of the chart, you'll need to implement in a similar fashion. I've added comments to some code below to help understand how we achieve this.

Your Image can be used as an icon, but we'll need to make the button an NTMenuItem. None of our button styles have this same exact effect you're looking for.

private void SetupChart(Chart chartWindow)
{
	BitmapImage myBitmapImage = new BitmapImage();
	
	// Assign an image on the filesystem to the BitmapImage.
	myBitmapImage.BeginInit();
	myBitmapImage.UriSource = new Uri(NinjaTrader.Core.Globals.InstallDir + "Images\\sample.png");
	myBitmapImage.EndInit();

	// create a menu container for the "button" and style it as a system menu
	Menu myMenu = new Menu();
	myMenu.Style = Application.Current.TryFindResource("SystemMenuStyle") as Style;

	// Instantiate the "Button" as a menu item
	NTMenuItem myButton = new NTMenuItem();
	myButton.Style = Application.Current.TryFindResource("MainMenuItem") as Style;

	myButton.Icon = new System.Windows.Controls.Image
	{
		Source = myBitmapImage
	};

	// no need to hard code sizes, just set the vertical & content alignment per below			
	//	myButton.Height = 22;
	//	myButton.Width = 22;

	// auto fit to content
	myButton.VerticalContentAlignment = VerticalAlignment.Top;			
	myButton.VerticalAlignment = VerticalAlignment.Top;

	// add the "button" to the menu container		
	myMenu.Items.Add(myButton);
	
	// Add the Button to the Chart's Toolbar
	chartWindow.MainMenu.Add(myMenu);
}

[SystemTrading]

Beautiful!!!! Thank you for the assistance!!!