Bunifu Image Button (New)
Bunifu Image Button brings out a visually-stunning UI to your Windows Forms and Controls. It combines animation and image-manipulation features to bring out the very best of your applications' designs
Last updated
Bunifu Image Button brings out a visually-stunning UI to your Windows Forms and Controls. It combines animation and image-manipulation features to bring out the very best of your applications' designs
Last updated
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:
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:
We'll use the Form Load event handler to run the code that adds the Image Button to our Form:
Two design-time properties are provided in the Smart Tags section:
ShowSizeMarkersGets or sets a value indicating whether the size markers (displayed at the control's top-area) will be visible during design-time.
ShowImageBordersGets or sets a value indicating whether borders will be viewed for the image applied during design-time.
Below are the customizable productivity and design properties of the Bunifu Image Button
ActiveImageGets or sets the image to be applied whenever the image button is active or hovered onto.
FadeWhenInactiveAutomatically fades the image when inactive.
FlipFlips the image to any given orientation. Supports both Vertical and Horizontal orientation-flipping options.
ImageGets or sets the image to be displayed in the Image Button.
ImageMargin Gets or sets the distance between the container and the underlying image.
RotationGets or sets the angle of rotation for the image. Please provide a value between 0 and 360.
ShowActiveImageSets a value indicating whether the ActiveImage will be applied on mouse-hover.
ShowCursorChangesGets or sets a value indicating whether the control will show cursor changes during mouse-hover events.
ToolTipTextAllows you to easily set some ToolTip information to be displayed to the user on mouse-hovering over the control.
IsZoomedInGets a value indicating whether the image is currently zoomed-in.
For all existing users, it is important to note that the previous Zoomproperty 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 ImageActiveproperty has been deprecated and replaced with the property ActiveImage; the ImageActiveproperty is however still supported and thus can be used in all existing projects.
ActiveImageChangedOccurs whenever the ActiveImage property has been changed.
AllowZoomingChangedOccurs whenever the AllowZooming property has been changed.
FadeWhenInactiveOccurs whenever the FadeWhenInactive property has been changed.
FlipChangedOccurs whenever the Flip property has been changed.
ImageChangedOccurs whenever the Image property has been changed.
ImageMarginChangedOccurs whenever the ImageMargin property has been changed.
RotationChangedOccurs whenever the Rotation property has been changed.
ShowCursorChangesChangedOccurs whenever the ShowCursorChanges property has been changed.
ZoomedInOccurs whenever the image has been zoomed-in.
ZoomedOutOccurs whenever the image has been zoomed-out.
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.
RotateSyntax: 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...
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.
