Bunifu Image Button (New)

Bunifu Framework Docs

Home Pricing FAQs My Account

Search…

Introduction

Getting started

BUNIFU CHARTS

BUNIFU DATAVIZ [Deprecated]

Basic Charts [Deprecated]

Advanced Charts [Deprecated]

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

​
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
C#
VB.NET
1
private void Form1_Load(object sender, EventArgs e)
2
{
3
​
4
    var imageButton = new Bunifu.UI.WinForms.BunifuImageButton();
5
    this.Controls.Add(imageButton);
6
    
7
}
Copied!
1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
2
    
3
    Dim imageButton As New Bunifu.UI.WinForms.BunifuVScrollBar    
4
    Controls.Add(imageButton)
5
    
6
End Sub
7
​
Copied!
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.
Below 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 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.
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...
CODE
1
  
2
  If BunifuImageButton1.Rotation = 0 Then
3
      BunifuImageButton1.Rotate(180)
4
  Else    
5
      BunifuImageButton1.Rotate(0)
6
  End If
7
  
Copied!

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.