Bunifu Cards

Overview

Bunifu Cards is a control that is designed to mimic a basic card and is useful when arranging information on your dashboard. The following dashboard has utilized Bunifu cards to develop a layout which is exhibiting an elegant arrangement of the list of services given.

Getting started

Adding Bunifu Cards at design time

It's easy to add Bunifu Card control at design time. Start by locating Bunifu Card control in your toolbox and simply drag it to your form as shown below then customize it to your desired look and feel using properties that will be elaborated on later in this article.

N.B. If you haven't imported the controls to your toolbox check this article out.

Here is an example of basic visual procedures that will animate Bunifu Cards once your form is loaded!

Step one: Drag the card controls to your form and place them nicely as shown below. Access the color property and assign each of the cards with the following colors:

Step two: Add the following information to your card as shown below. (To get the icons, download the Pichon application here)

Step three: Locate BunifuTransition in your toolbox and drag it into your form.

Step four: Access the visibility property for each Bunifu Card and set it to the value False.

Step 5: Select your form by clicking it and navigate to its events pane. Look out for the Loadevent. Double click inside its empty textbox so that it can navigate you to the code editor.

Step 6: Inside the form load event code, write the following code as shown below:

using System;
using System.Threading.Tasks;
using System.Windows.Forms;
using Bunifu.UI.WinForms.BunifuAnimatorNS;

private async void Form1_Load(object sender, EventArgs e)
{
    await Task.Delay(500);
    bunifuTransition1.ShowSync(bunifuCards1, false, Animation.Mosaic);
    bunifuTransition1.ShowSync(bunifuCards2, false, Animation.ScaleAndHorizSlide);
    bunifuTransition1.ShowSync(bunifuCards3, false, Animation.Mosaic);
    bunifuTransition1.ShowSync(bunifuCards4, false, Animation.Mosaic);
}

Imports System
Imports System.Threading.Tasks
Imports System.Windows.Forms
Imports Bunifu.UI.WinForms.BunifuAnimatorNS

Private Async Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Await Task.Delay(500)
	bunifuTransition1.ShowSync(bunifuCards1, False, Animation.Mosaic)
	bunifuTransition1.ShowSync(bunifuCards2, False, Animation.ScaleAndHorizSlide)
	bunifuTransition1.ShowSync(bunifuCards3, False, Animation.Mosaic)
	bunifuTransition1.ShowSync(bunifuCards4, False, Animation.Mosaic)
End Sub

Step 7: Run your application. Here's what you will get:

Adding Bunifu cards at runtime

You can also add a Bunifu Card control during runtime. This works for both C# and VB.NET. To achieve this simply achieve this by navigating to your Form’s Load event and add the following code snippet:

Imports System
Imports System.Windows.Forms
Imports System.Drawing

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim bunifu_card As New BunifuCards()
	bunifu_card.Size = New Size(450, 250)
	bunifu_card.Location = New Point(200, 100)
	bunifu_card.color = Color.DodgerBlue
	Me.Controls.Add(bunifu_card)
End Sub

using Bunifu.Framework.UI;
using System;
using System.Windows.Forms;
using System.Drawing;

private void Form3_Load(object sender, EventArgs e)
{
    BunifuCards bunifu_card = new BunifuCards();
    bunifu_card.Size = new Size(450, 250);
    bunifu_card.Location = new Point(200, 100);
    bunifu_card.color = Color.DodgerBlue;
    this.Controls.Add(bunifu_card);
}

Border and Background properties

BackColor

This property gets or sets the background color of the card. It can accept both the RGB and the HEX color formats.

Color

This property allows you to set the color of the top-edge section of the card. Simply do this by providing the color value

BorderRadius

This property gets or sets an integer value that makes the cards have rounded edges. By increasing the value, the edges become more rounded.

Here's how to set the following border and background properties using both the C# and VB.NET languages during the form load event.

private void Form4_Load(object sender, EventArgs e)
{
    //sets the background color of the card
    bunifuCards1.BackColor = Color.White;
    //sets the top section of the card with a color
    bunifuCards1.color = Color.FromArgb(123, 75, 148);
    //sets the radius of the card's edges.
    bunifuCards1.BorderRadius = 24;
}

Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
	'sets the background color of the card
	bunifuCards1.BackColor = Color.White
	'sets the top section of the card with a color
	bunifuCards1.color = Color.FromArgb(123, 75, 148)
	'sets the radius of the card's edges.
	bunifuCards1.BorderRadius = 24
End Sub

Shadow properties

Shadows create nice effects in your cards that allow the card to blend well with the form's background. Below are available shadow properties you can apply:

1. LeftShadow

This property gets or sets a boolean value that, when set to true, adds a shadow on the left side of the card.

2. RightShadow

This property gets or sets a boolean value that, when set to true, creates a shadow on the right of the card.

3. BottomShadow

This property gets or sets a boolean value that, when set to true, adds a shadow to the bottom of the card.

4. ShadowDepth

This property gets or sets an integer value that sets the depth of the shadow. A larger integer value results in significantly more shadow visibility.

Take Away

Card designs have grown in popularity over the past few years for their versatility and ability to present visually appealing information – as you’ve probably noticed, most brands have really embraced cards. Pinterest and Dribbble use card layouts to feature information and visuals. Here, we have created this control with elegant capabilities for .NET developers. Bunifu Cards present the perfect “burst” of information in a way that is easy to browse and look through all at once.