Bunifu Cards

Bunifu Framework Docs

Home Pricing FAQs My Account

Search…

Introduction

Getting started

Requirements

Installation

Licensing

BUNIFU UI

BUNIFU CHARTS

Introduction

Chart Components

BUNIFU DATAVIZ [Deprecated]

Basic Charts [Deprecated]

Advanced Charts [Deprecated]

Bunifu Cards

Add stylish cards into your Windows Forms applications; Create beautiful layouts with 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:
1.
167, 255, 131
2.
252, 232, 80
3.
80, 196, 237
4.
251, 168, 52
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.
To get to know more about Bunifu Transition control check out this documentation here.
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:
C#
VB.NET
1
using System;
2
using System.Threading.Tasks;
3
using System.Windows.Forms;
4
using Bunifu.UI.WinForms.BunifuAnimatorNS;
5
​
6
private async void Form1_Load(object sender, EventArgs e)
7
{
8
    await Task.Delay(500);
9
    bunifuTransition1.ShowSync(bunifuCards1, false, Animation.Mosaic);
10
    bunifuTransition1.ShowSync(bunifuCards2, false, Animation.ScaleAndHorizSlide);
11
    bunifuTransition1.ShowSync(bunifuCards3, false, Animation.Mosaic);
12
    bunifuTransition1.ShowSync(bunifuCards4, false, Animation.Mosaic);
13
}
Copied!
1
Imports System
2
Imports System.Threading.Tasks
3
Imports System.Windows.Forms
4
Imports Bunifu.UI.WinForms.BunifuAnimatorNS
5
​
6
Private Async Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
7
	Await Task.Delay(500)
8
	bunifuTransition1.ShowSync(bunifuCards1, False, Animation.Mosaic)
9
	bunifuTransition1.ShowSync(bunifuCards2, False, Animation.ScaleAndHorizSlide)
10
	bunifuTransition1.ShowSync(bunifuCards3, False, Animation.Mosaic)
11
	bunifuTransition1.ShowSync(bunifuCards4, False, Animation.Mosaic)
12
End Sub
13
​
Copied!
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:
VB.NET
C#
1
Imports System
2
Imports System.Windows.Forms
3
Imports System.Drawing
4
​
5
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
6
	Dim bunifu_card As New BunifuCards()
7
	bunifu_card.Size = New Size(450, 250)
8
	bunifu_card.Location = New Point(200, 100)
9
	bunifu_card.color = Color.DodgerBlue
10
	Me.Controls.Add(bunifu_card)
11
End Sub
12
​
Copied!
1
using Bunifu.Framework.UI;
2
using System;
3
using System.Windows.Forms;
4
using System.Drawing;
5
​
6
private void Form3_Load(object sender, EventArgs e)
7
{
8
    BunifuCards bunifu_card = new BunifuCards();
9
    bunifu_card.Size = new Size(450, 250);
10
    bunifu_card.Location = new Point(200, 100);
11
    bunifu_card.color = Color.DodgerBlue;
12
    this.Controls.Add(bunifu_card);
13
}

Copied!
Let's take a deep dive and get insights into the properties that are available on 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.
C#
VB.NET
1
private void Form4_Load(object sender, EventArgs e)
2
{
3
    //sets the background color of the card
4
    bunifuCards1.BackColor = Color.White;
5
    //sets the top section of the card with a color
6
    bunifuCards1.color = Color.FromArgb(123, 75, 148);
7
    //sets the radius of the card's edges.
8
    bunifuCards1.BorderRadius = 24;
9
}
Copied!
1
Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
2
	'sets the background color of the card
3
	bunifuCards1.BackColor = Color.White
4
	'sets the top section of the card with a color
5
	bunifuCards1.color = Color.FromArgb(123, 75, 148)
6
	'sets the radius of the card's edges.
7
	bunifuCards1.BorderRadius = 24
8
End Sub
9
​
10
​
Copied!
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. 