Bunifu Framework Docs
HomePricingFAQsMy Account
  • Introduction
  • Getting started
    • Requirements
    • Installation
    • Installing for .Net 5 & Above
    • Licensing
      • Managing your licenses
      • Bunifu Licensing CLI
      • Bunifu Device Remover (Deprecated)
  • BUNIFU UI
    • Controls
      • Bunifu Button
      • Bunifu Button (variant)
      • Bunifu Cards
      • Bunifu CheckBox
      • Bunifu Circle Progress
      • Bunifu Datagrid View
      • Bunifu Date Picker
      • Bunifu Drop Down
      • Bunifu Flat Button
      • Bunifu Form Caption Button
      • Bunifu Form Control Box
      • Bunifu Form Resize Icon
      • Bunifu Gradient Panel
      • Bunifu Icon Button
      • Bunifu Image Button (New)
      • Bunifu Image Button (Old)
      • Bunifu IOS Switch (1.5.3)
      • Bunifu Label
      • Bunifu Loader
      • Bunifu Picture Box
      • Bunifu Pages
      • Bunifu Panel
      • Bunifu Progress Bar
      • Bunifu Radial Gauge
      • Bunifu Radio Button
      • Bunifu Rating
      • Bunifu Range
      • Bunifu Separator
      • Bunifu Sliders
      • Bunifu Shadow Panel
      • Bunifu Shapes
      • Bunifu Switch (1.5.3)
      • Bunifu ScrollBars
      • Bunifu Toggle Switch
      • Bunifu Toggle Switch (variant)
      • Bunifu Tile Button
      • Bunifu Thin Button (1.5.3)
      • Bunifu ToolTip
      • Bunifu Textbox
      • Bunifu User Control
    • Components
      • Bunifu Color Transition
      • Bunifu Drag
      • Bunifu Elipse [Deprecated]
      • Bunifu Form Dock
      • Bunifu Form Drag
      • Bunifu Form Resizer
      • Bunifu Snackbar
      • Bunifu Transition
  • BUNIFU CHARTS
    • Introduction
      • Quick Tips
    • Chart Components
      • Bunifu Bar Chart
      • Bunifu Bubble Chart
      • Bunifu Canvas Control
      • Bunifu Doughnut Chart
      • Bunifu Horizontal bar Chart
      • Bunifu Line Chart
      • Bunifu Pie chart
      • Bunifu Polar Chart
      • Bunifu Radar Chart
  • BUNIFU DATAVIZ [Deprecated]
    • Basic Charts [Deprecated]
      • Step Line Chart [Deprecated]
      • Step Area Chart [Deprecated]
      • Spline Chart [Deprecated]
      • Pie Chart [Deprecated]
      • Line Chart [Deprecated]
      • Doughnut Chart [Deprecated]
      • Bar Chart [Deprecated]
      • Area Chart [Deprecated]
      • Column Chart [Deprecated]
    • Advanced Charts [Deprecated]
      • Stacked Column 100 Chart [Deprecated]
      • Stacked Column Chart [Deprecated]
      • Stacked Bar Chart 100 [Deprecated]
      • Stacked Bar Chart [Deprecated]
      • Stacked Area Chart 100 [Deprecated]
      • Stacked Area Chart [Deprecated]
      • Scatter Chart [Deprecated]
      • Range Spline Area Chart [Deprecated]
      • Range Column Chart [Deprecated]
      • Range Bar Chart [Deprecated]
      • Range Area Chart [Deprecated]
      • OHLC Chart [Deprecated]
      • Candle Stick Chart [Deprecated]
      • Bubble Chart [Deprecated]
Powered by GitBook
On this page
  • Overview
  • Getting started
  • Adding Bunifu Cards at design time
  • Adding Bunifu cards at runtime
  • Border and Background properties
  • BackColor
  • Color
  • BorderRadius
  • Shadow properties
  • 1. LeftShadow
  • 2. RightShadow
  • 3. BottomShadow
  • 4. ShadowDepth
  • Take Away

Was this helpful?

  1. BUNIFU UI
  2. Controls

Bunifu Cards

Add stylish cards into your Windows Forms applications; Create beautiful layouts with Bunifu Cards

PreviousBunifu Button (variant)NextBunifu CheckBox

Last updated 3 years ago

Was this helpful?

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.

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 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

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);
}

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.

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.

N.B. If you haven't imported the controls to your toolbox .

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

To get to know more about Bunifu Transition control check out this documentation .

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

check this article out
here
here
VB.NET.