Question Button Images

[BrandonMPSMI]

Okay now that my calculator is working I'm starting to make it look really pretty.

Basically I have a button down and up image. I can assign the up image but I don't see where I can assign the down image. Can you help me?

 

[JuggaloBrotha]

Is it possible to change the Image property in the MouseDown event then change it back in the MouseUp event?

 

[BrandonMPSMI]

Yes you can change the buttons image. But preferably I'd like to do this through the design interface so that I don't have to constantly load images.

I mean I would like to embedd the images into the program itself!

(I could imagine it... people making tilesets for the calculator )

 

[JuggaloBrotha]

But the button only has 1 image property and you want two images, 1 at a time, to be displayed.

The other option is to make a user control and add your own image property which will be used when the MouseDown event is fired, you can handle this event internally with it's own Protected MouseDown event sub.

 

[BrandonMPSMI]

Yes the button can only be assigned one image (Why didn't they make it so that you could assign the down, and disabled image?)

I don't understand your second statement exactly. What I'm trying to avoid is having to specify a "filepathnamethingy"

 

[JuggaloBrotha]

So add the images as a resource then use the resource's images

 

[BrandonMPSMI]

OKay I think I'm starting to understand. But I'll have to figure out how to add a resource (Since I'm newbie)

 

[JuggaloBrotha]

Add the files to the solution of the project and for each file set it's 'Build Action' property to 'Embedded Resource' and it's 'Copy to Output' property to 'Never Copy' and now you can access it using My.Resources

 

[BrandonMPSMI]

Okay I figured out how to set the resource and change the image. But now How do I create the event for when the button is pressed (mousedown)

"Code...Code...Codes for the newbie?"

 

[JuggaloBrotha]

In the code window there's two drop downs right above your code, the left one is all of the controls, select your button now in the right one are all of the events, select the MouseDown one. Now you'll see that the IDE has created the code segment for the mousedown event.

 

[Solitaire]

Use a Static Boolean variable to toggle back and forth.

Use a single button and click on it alternatively to toggle between two values, in your case, it would be either up or down.

Here is an example using a Static Boolean variable to toggle between two images. In your case, the image will be on the button itself. You will also want to include the code that performs the desired alternative in each of the True or False cases.

    Private Sub btnOnOff_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnOnOff.Click
        Static onoff As Boolean
        onoff = Not onoff
        If onoff = True Then
            picLight.Image = My.Resources.lightbulb
            ' more code here
        Else
            picLight.Image = My.Resources.lightbulb_off
            ' more code here
        End If
    End Sub

 

[BrandonMPSMI]

Yes... I really needed to know that. (now I can see what events I can generate)

Thanx from the newbie.

 

[JuggaloBrotha]

Use a single button and click on it alternatively to toggle between two values, in your case, it would be either up or down.

Here is an example using a Static Boolean variable to toggle between two images. In your case, the image will be on the button itself. You will also want to include the code that performs the desired alternative in each of the True or False cases.

    Private Sub btnOnOff_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnOnOff.Click
        Static onoff As Boolean
        onoff = Not onoff
        If onoff = True Then
            picLight.Image = My.Resources.lightbulb
            ' more code here
        Else
            picLight.Image = My.Resources.lightbulb_off
            ' more code here
        End If
    End Sub

That swaps the image on click, what BrandonMPSMI's asking for is the image to change when the button is pressed down and then change back when it's returned to the up position. Which means in a single click the image changes then changes back. Your code changes the image once per click, not twice:

Okay now that my calculator is working I'm starting to make it look really pretty.

Basically I have a button down and up image. I can assign the up image but I don't see where I can assign the down image. Can you help me?

 

[JuggaloBrotha]

Ok, I think I've got this working right. It took me 20 minutes to make and I did about 10 minutes worth of testing and there's no exceptions or odd behavior that I know of that could happen. Here's the code:

Option Explicit On
Option Strict On

Imports System.ComponentModel

Public Class myButton
    Inherits Windows.Forms.Button

#Region " Variables "
    Private m_PressedImage As Image
    Private m_TempSwapImage As Image
    Private m_TempDisabledImage As Image
    Private m_UseImageSwap As Boolean
    Private m_ImageSwapped As Boolean
    Private m_DisabledImage As Image
#End Region
#Region " Events "
    Public Event DisabledImageChanged As EventHandler
    Public Event PressedImageChanged As EventHandler
    Public Event UseImageSwapChanged As EventHandler
#End Region
#Region " Sub New "
    Public Sub New()
        MyBase.New()
        Me.m_PressedImage = Nothing
        Me.m_TempSwapImage = Nothing
        Me.m_DisabledImage = Nothing
        Me.m_TempDisabledImage = Nothing
        Me.m_UseImageSwap = True
        Me.m_ImageSwapped = False
    End Sub
#End Region
#Region " Properties: PressedImage, UseImageSwap "
    <DefaultValue(GetType(Boolean), ""), Description("Image displayed on the control when the control's disabled"), Category("Appearance")> _
          Public Property DisabledImage() As Image
        Get
            Return Me.m_DisabledImage
        End Get
        Set(ByVal value As Image)
            If Me.m_DisabledImage Is Nothing Then
                Me.m_DisabledImage = value
                Me.OnDisabledImageChanged(EventArgs.Empty)
            Else
                If Me.m_DisabledImage.Equals(value) = False Then
                    Me.m_DisabledImage = value
                    Me.OnDisabledImageChanged(EventArgs.Empty)
                End If
            End If
        End Set
    End Property

    <DefaultValue(GetType(Boolean), ""), Description("Image displayed on the control when the MouseDown event fires"), Category("Appearance")> _
        Public Property PressedImage() As Image
        Get
            Return Me.m_PressedImage
        End Get
        Set(ByVal value As Image)
            If Me.m_PressedImage Is Nothing Then
                Me.m_PressedImage = value
                Me.OnPressedImageChanged(EventArgs.Empty)
            Else
                If Me.m_PressedImage.Equals(value) = False Then
                    Me.m_PressedImage = value
                    Me.OnPressedImageChanged(EventArgs.Empty)
                End If
            End If
        End Set
    End Property

    <DefaultValue(GetType(Boolean), "True"), Description("Determines whether the two image's will be swapped on the MouseDown event"), Category("Appearance")> _
    Public Property UseImageSwap() As Boolean
        Get
            Return Me.m_UseImageSwap
        End Get
        Set(ByVal value As Boolean)
            If Me.m_UseImageSwap <> value Then
                Me.m_UseImageSwap = value
                Me.OnUseImageSwapChanged(EventArgs.Empty)
            End If
        End Set
    End Property
#End Region
#Region " Overridable Subs: OnDisabledImageChanged, OnPressedImageChanged, OnUseImageSwapChanged "
    Protected Overridable Sub OnDisabledImageChanged(ByVal e As EventArgs)
        RaiseEvent DisabledImageChanged(Me, e)
    End Sub

    Protected Overridable Sub OnPressedImageChanged(ByVal e As EventArgs)
        RaiseEvent PressedImageChanged(Me, e)
    End Sub

    Protected Overridable Sub OnUseImageSwapChanged(ByVal e As EventArgs)
        RaiseEvent UseImageSwapChanged(Me, e)
    End Sub
#End Region
#Region " Overrides Subs: OnMouseDown, OnMouseUp "
    Protected Overrides Sub OnMouseDown(ByVal mevent As System.Windows.Forms.MouseEventArgs)
        MyBase.OnMouseDown(mevent)
        SwapImages(True)
    End Sub

    Protected Overrides Sub OnMouseUp(ByVal mevent As System.Windows.Forms.MouseEventArgs)
        MyBase.OnMouseUp(mevent)
        SwapImages(False)
    End Sub
#End Region
#Region " Overrides Subs: OnKeyDown, OnKeyUp "
    Protected Overrides Sub OnKeyDown(ByVal kevent As System.Windows.Forms.KeyEventArgs)
        MyBase.OnKeyDown(kevent)
        If kevent.KeyCode = Keys.Space Then SwapImages(True)
    End Sub

    Protected Overrides Sub OnKeyUp(ByVal kevent As System.Windows.Forms.KeyEventArgs)
        MyBase.OnKeyUp(kevent)
        If kevent.KeyCode = Keys.Space Then SwapImages(False)
    End Sub
#End Region
#Region " OnEnabledChanged "
    Protected Overrides Sub OnEnabledChanged(ByVal e As System.EventArgs)
        MyBase.OnEnabledChanged(e)
        If DesignMode = False AndAlso Me.m_DisabledImage IsNot Nothing Then
            If Me.Enabled = False Then
                Me.m_TempDisabledImage = Me.Image
                Me.Image = Me.m_DisabledImage
            Else
                Me.Image = Me.m_TempDisabledImage
                Me.m_TempDisabledImage = Nothing
            End If
        End If
    End Sub
#End Region
#Region " SwapImages "
    Private Sub SwapImages(ByVal ButtonPressed As Boolean)
        If Me.m_UseImageSwap = True Then
            If ButtonPressed = True Then
                If Me.m_ImageSwapped = False Then
                    Me.m_ImageSwapped = True
                    Me.m_TempSwapImage = Me.Image
                    Me.Image = Me.m_PressedImage
                End If
            Else
                Me.m_ImageSwapped = False
                Me.Image = Me.m_TempSwapImage
                Me.m_TempSwapImage = Nothing
            End If
        End If
    End Sub
#End Region

End Class

Add a new class to the project, call it whatever you want, paste the above code replacing all of the text from your new class, change the name of the class to match the file name you gave it. Build/run your app once now look in your toolbox when in the form designer and you'll see it appear at the top. Drag and drop onto the form.

New Properties:
DisabledImage - Image shown when the control's not enabled.
PressedImage - Image shown when the button's pressed by either the mouse button or spacebar
UseImageSwap - Determines whether the image's are swapped when the button's pressed.