Develop Reference

How to correctly highlight buttons on click?

So I have built an application in C# using Winforms and my application uses a few different buttons. I'd like to have a highlight on the button that has been clicked to show what 'tab' you're in.
I've tried doing the following;
// BUTTONS //
private void dashboard_btn_Click(object sender, EventArgs e)
{
// Load Form
OpenChildForm(new FormDashboard());
dashboard_btn.FlatAppearance.BorderColor = Color.Red;
dashboard_btn.FlatAppearance.BorderSize = 1;
}
However, this of course doesn't work nicely since it adds a border around the button but when I click another button the border also stays around the previous button.
How would you implement a feature to add a border around the button that get's clicked but have the border disappear after you click another button?
Thank you for any feedback!
EDIT:
I've implemented Jimi's advice and used the Leave event to change the border around the button back to 0. However I'm not sure how to implement this in a global way so all my buttons are subscribed to this event.
My code now looks like this;
// BUTTONS //
private void dashboard_btn_Click(object sender, EventArgs e)
{
// Load Form
OpenChildForm(new FormDashboard());
// Button Highlight
dashboard_btn.FlatAppearance.BorderColor = Color.Red;
dashboard_btn.FlatAppearance.BorderSize = 1;
}
// BUTTON REMOVE HIGHLIGHT //
private void dashboard_btn_Leave(object sender, EventArgs e)
{
dashboard_btn.FlatAppearance.BorderSize = 0;
}
EDIT 2:
I ended up using Jimi's example and this worked for me :)

This might lend itself to a RadioButton style functionality because clicking a different radio button in the same container will uncheck the others. So, to implement the "generalized approach" that you mention in your comment, you could make a simple custom RadioButtonEx class where the Appearance property is set to Button then change your border style when the Checked property changes. In this example, the Click event has been changed to static so that clicking on any button directs the event to the common onAnyClick method.
public partial class MainForm : Form
{
public MainForm()
{
InitializeComponent();
RadioButtonEx.Click += onAnyClick;
}
private void onAnyClick(object sender, EventArgs e)
{
label1.Text = ((RadioButtonEx)sender).Text;
}
}
public class RadioButtonEx : RadioButton
{
public static new event EventHandler Click;
public RadioButtonEx()
{
FlatAppearance.BorderColor = Color.Red;
FlatAppearance.BorderSize = 1;
Appearance = Appearance.Button;
}
protected override void OnCheckedChanged(EventArgs e)
{
base.OnCheckedChanged(e);
if(Checked)
{
FlatStyle = FlatStyle.Flat;
Click?.Invoke(this, EventArgs.Empty);
}
else
{
FlatStyle = FlatStyle.Standard;
}
}
}

C# XAML Hover Area with Mouse Position

i need to implement hover areas to my Tool.
When i enter the last ~ 25% of the Window my Item should appear.
I tried to make an invisible Grid but an invisible object cant trigger events.
Is it possible to make a hover area with the Mouse Position?
private void BlackMetalClockRing_MouseLeave(object sender, MouseEventArgs e)
{
gridExpandInfo.Visibility = Visibility.Hidden;
}
private void BlackMetalClockRing_MouseEnter(object sender, MouseEventArgs e)
{
if (gridInformationPanel.Visibility != Visibility.Visible)
gridExpandInfo.Visibility = Visibility.Visible;
}

Associate the MouseEnter event to a new Border that'll cover your grid, with Background="Transparent". Set yourBorder.Visibility = Visibility.Collapsed at the end of this event (in order to make sure it wont intercept further mouse events).
In the MouseLeave event (which stays associated to your grid), set back yourBorder.Visibility = Visibility.Visible.

Hide image when click outside of image in wpf

When my WPF application loads, an image is shown in center.
how can i handle mouse click outside of image. when user clicks outside of image it hide.
My code is in c#.

You can simply add a handler to the top level control, eg. Grid, Window, etc. In that handler, you can check whether the control that was clicked on was the Image and if it wasn't, then you could hide it:
The XAML:
<Grid PreviewMouseLeftButtonDown="Grid_PreviewMouseLeftButtonDown">
...
<Image Name="TheImage" Source="/WpfApplication2;component/Images/Add_16.png" />
...
</Grid>
The code behind:
private void Grid_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.OriginalSource != TheImage)
{
TheImage.Visibility = Visibility.Hidden;
}
}
While this fulfils your requirements, it should be noted that once hidden, the Image will no longer be 'clickable'.

just put the code MyImage.Visibility = System.Windows.Visibility.Hidden; in whichever event you want to capture.
for eg:
private void MyButton_Click_1(object sender, RoutedEventArgs e)
{
MyImage.Visibility = System.Windows.Visibility.Hidden;
}
private void MyTextbox_PreviewMouseDown_1(object sender, MouseButtonEventArgs e)
{
MyImage.Visibility = System.Windows.Visibility.Hidden;
}
private void MyWindow_MouseDown(object sender, MouseButtonEventArgs e)
{
MyImage.Visibility = System.Windows.Visibility.Hidden;
}
where MyImage is the name of image, MyTextbox is the name of textbox, MyButton is the name of Button and MyWindow is the name of Main Window

you can simply write
YourImageName.Visibility = Visibility.Hidden;
Write this code to any of the control i.e. TextBox or Button.

first click on the form to select it. then go to the event's section (near property section) and double-click the click event to make a function call when a form is clicked. in the code compare the sender object with the IsEqual(obj) method and see the sender is same image or it's not. if not hide it. :)

You can handle the click event of Application current window , and inside that event you can check if the mouse position is within that image or outside of that image , on basis of this you can set your image visibility condition you prefer .
Code sample example :
//registering event
Application.Curent.mainWindow.MouseRightButtonDown += MainWindow_MouseRightButtonDown;
//event implementation
void MouseRightButtonDown(object sender , MouseButtonEventArgs e)
{
//here you can check the ui element for image control using sender
//below will let you know the position of Click
e.GetPosition(// pass the ui element here)
}
Note : The above code shown is at app level click handling . If you
dont want at app level you can take the parent xaml within which the
image is present and do the same

Mouse up event doesn't get triggered

I have the following problem: I have a panel which has a specific color, say red.
When the user presses his mouse, the color of this panel gets stored in a variable. Then the user moves, his mouse still pressed, over to another panel. When he releases the mouse there, this panel should get the background color of the first that had been stored in the variable. My code looks something like this:
public Color currentColor;
private void ColorPickMouseDown(object sender, MouseEventArgs e)
{
Panel pnlSender = (Panel)sender;
currentColor = pnlSender.BackColor;
}
private void AttempsColorChanger(object sender, MouseEventArgs e)
{
Panel pnl = (Panel)sender;
pnl.BackColor = currentColor;
}
I need to identify the sender first because there are many possible panels that can trigger this event. The first MouseDown method works totally fine, the color is stored nicely in the variable. The secon one however doesn't even get triggered when the user does what I described above. When the ser clicks on the second panel, it works (there is an MouseUp part in a click aswell I guess).
What's wrong here? Why is the event not triggered when the user holds the mouse key down before?

(This answer assumes you are using Windows Forms.)
It could be that you need to capture the mouse by setting this.Capture = true in the MouseDown of the source control. (See Control.Capture)
If you did that, the source window would get the MouseUp event, and it would be the source window that had to determine the destination window under the mouse coords. You can do that using Control.GetChildAtPoint() (see this answer on Stack Overflow).
Use Windows Forms Drag and Drop Support Instead! <- Click for more info
I'm going to suggest you bite the bullet and use the .Net Drag and Drop methods to do this. It requires some reading up, but it will be much better to use it.
You start a drag in response to a MouseDown event by calling Control.DoDragDrop().
Then you need to handle the Control.DragDrop event in the drop target control.
There's a few more things you might need to do to set it up; see the Control.DoDragDrop() documentation for an example.
(For WPF drag and drop support, see here.)

when your mouse enter the target control , mouse down triggerd ang get target BackColor! you need add an boolean flag to your code :
public Color currentColor;
bool flag=false;
private void ColorPickMouseDown(object sender, MouseEventArgs e)
{
if(flag==false)
{
flag=true
Panel pnlSender = (Panel)sender;
currentColor = pnlSender.BackColor;
}
}
//assume mouse up for panles
private void AttempsColorChanger(object sender, MouseEventArgs e)
{
if(flag==true)
{
Panel pnl = (Panel)sender;
pnl.BackColor = currentColor;
flag=flase;
}
}
and also you need change your flag in mouseMove( if )

As I mentioned in my comment Mouse Events are captured by the originating control, You would probably be better off using the DragDrop functionality built into Windows Forms. Something like this should work for you. I assigned common event handlers, so they can be assigned to all of your panels and just work.
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void panel_MouseDown(object sender, MouseEventArgs e)
{
((Control)sender).DoDragDrop(((Control)sender).BackColor,DragDropEffects.All);
}
private void panel_DragDrop(object sender, DragEventArgs e)
{
((Control)sender).BackColor = (Color)e.Data.GetData(BackColor.GetType());
}
private void panel_DragEnter(object sender, DragEventArgs e)
{
e.Effect = DragDropEffects.Copy;
}
}

I know it's an old question but I had the same issue and none of the above answers worked for me. In my case I had to handle the MouseMove event in the target control and check for the mouse to be released. I did set 'BringToFront' on my target panel just in case that helped at all.
public Color currentColor;
private void ColorPickMouseDown(object sender, MouseEventArgs e)
{
Panel pnlSender = (Panel)sender;
currentColor = pnlSender.BackColor;
}
private void panelTarget_MouseMove(object sender, MouseEventArgs e)
{
//the mouse button is released
if (SortMouseLocation == Point.Empty)
{
Panel pnl = (Panel)sender;
pnl.BackColor = currentColor;
}
}

Making a background image scale with button size

I'm trying to add some background images to a few buttons in my Win Forms application. The three images are different sizes (ie pixel dimensions don't match, one is 128x128 and another is 256x256). I need the buttons to be identical in size (otherwise the GUI is horribly asymmetrical). Without changing the actual image files, how can I get the images to scale with button size?
I've tried creating my own class, and adding an event handler for the button resize event, but that doesn't seem to work. My code:
class CustomButton : Button {
internal void CustomButton_Resize( object sender, EventArgs e ) {
if ( this.BackgroundImage == null ) {
return;
}
var pic = new Bitmap( this.BackgroundImage, this.Width, this.Height );
this.BackgroundImage = pic;
}
}
and in the form:
this.buttonOne.Resize += new System.EventHandler(this.buttonOne.CustomButton_Resize);
Forgot to mention, the above code does not resize the images at all. The buttons still need to have different sizes to display the images completely.

Easiest way to add a background image to a .NET Button object and scale it to fit
I used this method to avoid any additional coding of new classes and event handlers. This helped me also avoid converting all Button objects into Image objects.
Add image to your Resources.resx file.
Click on your chosen button.
Navigate to the BackgroundImage property and choose the image you imported into the project's resources.resx file.
Navigate to the BackgroundImageLayout property and choose Stretch.
Make sure you don't have anything entered for the Image and Text properties or else they will interfere with your new background image.

The easy programmatic way
Say I have a button btn1, Following code is working perfectly in visual-studio-2010.
private void btn1_Click(object sender, EventArgs e)
{
btn1.Width = 120;
btn1.Height = 100;
}
void btn1_Resize(object sender, EventArgs e)
{
if ( this.BackgroundImage == null )
return;
var bm = new Bitmap(btn1.BackgroundImage, new Size(btn1.Width, btn1.Height));
btn1.BackgroundImage = bm;
}
The better way
You can add eventHandler in the constructor of your custombutton (just to ensure that you are adding eventhandler correctly)
class CustomButton : Button
{
CustomButton()
{
this.Resize += new System.EventHandler(buttonOne.CustomButton_Resize);
}
void CustomButton_Resize( object sender, EventArgs e )
{
if ( this.BackgroundImage == null )
return;
var pic = new Bitmap( this.BackgroundImage, new Size(this.Width, this.Height) );
this.BackgroundImage = pic;
}
}
Now when you will resize the button anywhere your image will get fit(scaled) to its new size.

You could start with something like this...
public class ImageButton : Control
{
public Image backgroundImage;
public Image BackgroundImage
{
get
{
return backgroundImage;
}
set
{
backgroundImage = value;
Refresh();
}
}
public ImageButton()
{
}
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.Clear(BackColor);
if(BackgroundImage != null)
e.Graphics.DrawImage(BackgroundImage, 0, 0, Width, Height);
base.OnPaint(e);
}
protected override void OnPaintBackground(PaintEventArgs pevent)
{
//base.OnPaintBackground(pevent);
}
}
You can just handle paint and draw the image yourself. You may also try using a PictureBox or some other control which has more scaling options