Make your layout look awesome by using Bunifu Card. It has been designed to mimic a basic card and is useful when arranging information on your dashboard. 

Adding Bunifu Cards in 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 to your form as shown below then customize to desired look and feel using properties that will be elaborated later in this article. 

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

Adding Bunifu cards at runtime 

You can also add Bunifu Card control during design time. 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:

C# Code

private void Form1_Load(object sender, EventArgs e)

{

    var cards = new Bunifu.Framework.UI.BunifuCards();

    cards.Size = new Size(200, 100);

    this.Controls.Add(cards);

}


VB.NET Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

    Dim cards As New Bunifu.Framework.UI.BunifuCards

    cards.Size = new Size(200, 100)

    Controls.Add(cards)
 
End Sub

Once the code has been added your preview should look like this:

Custom properties 

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

C# Code 

private void Form1_Load(object sender, EventArgs e)
{
    var cards = new Bunifu.Framework.UI.BunifuCards()
   
    cards.Size = new Size(500, 200)
    cards.color = Color.Blue
     this.Controls.Add(cards)
}


VB.NET Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

    Dim cards As New Bunifu.Framework.UI.BunifuCards

    cards.Size = New Size(500, 200);

    cards.color = Color.Blue;

    Controls.Add(cards)

End Sub
  • Border radius - This property allows you to make your cards have rounded edges. 

C# Code

private void Form1_Load(object sender, EventArgs e)

{

    var cards = new Bunifu.Framework.UI.BunifuCards()

    cards.Size = new Size(500, 200)

    cards.BorderRadius = 5

    this.Controls.Add(cards)

}

VB.NET  Code

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
   
    Dim cards As New Bunifu.Framework.UI.BunifuCards
    cards.Size = New Size(500, 200);
    cards.BorderRadius = 5
    Controls.Add(cards)

End Sub


Below is a an example of card control with border radius and top edge color:

Applying shadow properties

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

  • LeftShadow – This property allows you to apply shadow to the left of the card [Boolean]  
  • RightShadow – This property allows you to apply shadow to the right of the card [Boolean]  
  • BottomShadow – This property allows you to apply shadow at the bottom of the card [Boolean]  
  • ShadowDepth – This property allows you to set the depth of the shadow [Integer]  

C# Code

private void Form1_Load(object sender, EventArgs e)
{
    var cards = new Bunifu.Framework.UI.BunifuCards();
    cards.Size = new Size(500, 200);
    cards.color = Color.Blue;
    cards.BorderRadius = 5;
    cards.BottomSahddow = true;
    cards.ShadowDepth = 80;
    this.Controls.Add(cards);
}

VB.NET Code 

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

    Dim cards As New Bunifu.Framework.UI.BunifuCards
    cards.Size = New Size(500, 200)
    cards.color = Color.Blue
    cards.BorderRadius = 5
    cards.BottomSahddow = True
    cards.ShadowDepth = 80
    Controls.Add(cards)
End Sub

Here is a preview of shadow panel with shadow applied

That's it!

Bunifu cards inherits from default panel class. For further reference on card control feel free to learn more on Microsoft website

 

 

Did this answer your question?