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
  • Properties
  • StartColor
  • ProgressValue
  • Value
  • AutoTransition
  • ColorArray
  • Interval

Was this helpful?

  1. BUNIFU UI
  2. Components

Bunifu Color Transition

Add intuitive color transitions in your applications

PreviousComponentsNextBunifu Drag

Last updated 4 years ago

Was this helpful?

Bunifu Color Transition is a component that makes possible the transition of various colors from one color-state to another. It's super useful when you want to show different states/progression of an activity or task.

Here's a preview of the component in action:

Simply locate BunifuColorTransition control in your toolbox and drag it on to your form. You can then customize using custom properties as it will be elaborated later in this article.

Properties

When you click on the component and go to the Properties Tab, we’ll see the following properties:

StartColor

is the start color (the initial color) and EndColor is the target color (the color that stops the transition).

ProgressValue

is a value between 0 and 100 that sets the gradient between the StartColor and EndColor .

Value

is the current value of the transition (the intermediate color between StartColor and EndColor , specified by the Progress Value property)

AutoTransition

is a boolean that allows you to set automatic transition of specific TransitionControl.

ColorArray

is array of colors to transition from and to.

Interval

is the speed of transition between the color arrays.

We want to change the background color of our form (BackColor) in a gradient from White to Red according to the value pointed by a Bunifu TrackBar.

So let’s add that track bar to our form and after we place it on our form, let’s go to “Properties” tab and then on “Events” and then scroll down until we find the ValueChanged event:

Using the event handler we will add the code below:

C# code

private void bunifuTrackbar1_ValueChanged(object sender, EventArgs e)
{   

    bunifuColorTransition1.ProgessValue = bunifuTrackbar1.Value;
    this.BackColor = bunifuColorTransition1.Value;
    
}
Private Sub BunifuTrackbar1_ValueChanged(ByVal sender As Object, 
    ByVal e As EventArgs) 

    Handles BunifuTrackbar1.ValueChanged    
    BunifuColorTransition1.ProgessValue = BunifuTrackbar1.Value
    BackColor = BunifuColorTransition1.Value 

End Sub

The code above sets the progress value of our Bunifu Color Component, to the track bar value. After that we set the back color of our form to the Value pointed by our component.

If you wish to create a splash screen using Bunifu Color Transition set the following properties