Comment on page
Bunifu Cards
Add stylish cards into your Windows Forms applications; Create beautiful layouts with Bunifu Cards
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.
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 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:
C#
VB.NET
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:
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#
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
This property gets or sets the background color of the card. It can accept both the RGB and the HEX color formats.
This property allows you to set the color of the top-edge section of the card. Simply do this by providing the color value
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
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
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:
This property gets or sets a boolean value that, when set to true, adds a shadow on the left side of the card.
This property gets or sets a boolean value that, when set to true, creates a shadow on the right of the card.
This property gets or sets a boolean value that, when set to true, adds a shadow to the bottom of the card.
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.
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.
Last modified 2yr ago