Bunifu Image Button is a control similar to a button; the one major difference is that the core visual aspect we're provided with is the Image property that automatically zooms on mouse-hover using the ImageMargin property which sets the distance between the Image and its container. 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.
And here's the default style:
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 184.108.40.206 or higher and not 220.127.116.11 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:
private void Form1_Load(object sender, EventArgs e)
var imageButton = new Bunifu.UI.WinForms.BunifuImageButton();
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim imageButton As New Bunifu.UI.WinForms.BunifuVScrollBar
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.
Here are the customizable productivity and design properties of the Bunifu Image Button:
- 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.
For all existing users, it is important to note that the previous Zoom property has been deprecated and is now replaced with the ImageMargin property; you may still continue to use the Zoom property as the new control provides backward-compatibility with all the currently existing properties. Likewise, the ImageActive property has been deprecated and replaced with the property ActiveImage; the ImageActive property is however still supported and thus can be used in all existing projects.
- 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.
With the Image Button also comes in some methods that may assist you further.
- ZoomIn(): Zooms-in the image.
- ZoomOut(): Zooms-out the image to its default-set size.
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...
Here, we want to animate an Image Button from the default 0-degrees to 180-degrees if it's currently set to 0 degrees and 180-degrees to 0 degrees if it's currently set to 180-degrees:
if (bunifuImageButton1.Rotation == 0) bunifuImageButton1.Rotate(180);
If BunifuImageButton1.Rotation = 0 Then
Once you run this code (ensuring that your Image Button's name is bunifuImageButton1 (in C#) or BunifuImageButton1 (in VB.NET)), the image will rotate from 0 to 180-degrees with a clean and simple animation.
Here's our result - we have included this method in a Bunifu Button's click event:
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.