​

Here's a preview of the control in action:

This means that the Image is contained within a container and has a margin (set using the ImageMargin property) between itself and its container. The image's zooming will, therefore, expand based on the size of its container on mouse-hover and zoom-out to its default-set size inside the container. We shall explain further on this aspect.

Here are still some more previews of Bunifu Image Button:

A preview of the Rotation feature in Bunifu Image Buttons.

As you can see, there's some text within the control displaying some sort of measurements separated by a colon. These measurements include the size of the container and the size of the image applied. These measurements automatically change whenever you resize the Image Button. They help you to know the varying sizes of the image and its container and come in handy when getting their size-differences especially once the ImageMargin property changes. You can make use of the Smart Tags feature that comes with it to apply some of the most common properties without going to the Properties window:

So, for example, when you change the ImageMargin value from the default 40 to 50, here's what happens:

As you can see, the image has shrunk from within its container since its margin from the container has been increased. However, when zooming occurs, it will span to fit the container's size, making it bigger in scale.

Finally here's a preview of the Image Button in action:

Adding a Bunifu Image Button at Design Time

We simply need to locate our control in the Toolbox and drop it onto our Form - ensure you check that its version is 1.6.0.0 or higher and not 1.5.4.0 or lower as this release is an upgrade from the older 1.5.4 version:

Adding a Bunifu Image Button at Run Time

We'll use the Form Load event handler to run the code that adds the Image Button to our Form:

Code

private void Form1_Load(object sender, EventArgs e)
{
​
    var imageButton = new Bunifu.UI.WinForms.BunifuImageButton();
    this.Controls.Add(imageButton);
    
}

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    
    Dim imageButton As New Bunifu.UI.WinForms.BunifuVScrollBar    
    Controls.Add(imageButton)
    
End Sub
​

Properties

Two design-time properties are provided in the Smart Tags section:

ShowSizeMarkers

Gets or sets a value indicating whether the size markers (displayed at the control's top-area) will be visible during design-time.

ShowImageBorders

Gets or sets a value indicating whether borders will be viewed for the image applied during design-time.

ActiveImage

Gets or sets the image to be applied whenever the image button is active or hovered onto.

FadeWhenInactive

Automatically fades the image when inactive.

Flip

Flips the image to any given orientation. Supports both Vertical and Horizontal orientation-flipping options.

Image

Gets or sets the image to be displayed in the Image Button.

ImageMargin

Gets or sets the distance between the container and the underlying image.

Rotation

Gets or sets the angle of rotation for the image. Please provide a value between 0 and 360.

ShowActiveImage

Sets a value indicating whether the ActiveImage will be applied on mouse-hover.

ShowCursorChanges

Gets or sets a value indicating whether the control will show cursor changes during mouse-hover events.

ToolTipText

Allows you to easily set some ToolTip information to be displayed to the user on mouse-hovering over the control.

IsZoomedIn

Gets a value indicating whether the image is currently zoomed-in.

Events

ActiveImageChanged

Occurs whenever the ActiveImage property has been changed.

AllowZoomingChanged

Occurs whenever the AllowZooming property has been changed.

FadeWhenInactive

Occurs whenever the FadeWhenInactive property has been changed.

FlipChanged

Occurs whenever the Flip property has been changed.

ImageChanged

Occurs whenever the Image property has been changed.

ImageMarginChanged

Occurs whenever the ImageMargin property has been changed.

RotationChanged

Occurs whenever the Rotation property has been changed.

ShowCursorChangesChanged

Occurs whenever the ShowCursorChanges property has been changed.

ZoomedIn

Occurs whenever the image has been zoomed-in.

ZoomedOut

Occurs whenever the image has been zoomed-out.

Methods

With the Image Button also comes in some methods that may assist you further.

They include:

ZoomIn()

Zooms-in the image.

ZoomOut()

Zooms-out the image to its default-set size.

Rotate

Syntax: Rotate(angle [integer], allowAnimation [boolean], animationSpeed [integer]):

Rotates the image to a set angle of rotation from zero (0) to 360 degrees. This method also allows you to animate the rotation of an image with any preset animation speed. Animations are enabled in this method by default.

Let's try an example...

  
  If BunifuImageButton1.Rotation = 0 Then
      BunifuImageButton1.Rotate(180)
  Else    
      BunifuImageButton1.Rotate(0)
  End If
  

And here's the same example but with a rotation from 0 to 360-degrees:

You can always change the speed of rotation using the method's animationSpeed parameter, which comes as the very last parameter option to change. By default, the animation speed is set to 500 milliseconds. The higher the speed the slower the animation, while the lower or lesser the speed the faster the animation.