NodeProgressBar
NodeProgressBar node control lets you display a progress bar inside a treeview node.
To start using this node control, specify its size by using its Size property. By default, its value is 50x16 pixels.
Data binding#
A progress bar has three parameters: progress, minimum, and maximum values.
To bind these parameters to the node class members, adjust the appropriate member names of the node via the ValueDataFieldName, MinValueDataFieldName, and MaxValueDataFieldName node control properties, respectively.
ValueDataFieldName property has a default value, 'ProgressValue', while MinValueDataFieldName and MaxValueDataFieldName have none.
If MinValueDataFieldName or MaxValueDataFieldName values aren't set explicitly, the progress bar's minimum value is 0, and the maximum value is 100.
Example
// Custom node class with members for the progress bar node control.
class ProgressNode : Node
{
public int Progress;
public int MinValue;
public int MaxValue;
public ProgressNode(string text) : base(text)
{
}
}
// NodeProgressBar node control usage example.
NodeTextBox tb = new NodeTextBox();
tb.AttachTo(tree);
NodeProgressBar pb = new NodeProgressBar();
pb.ValueDataFieldName = "Progress";
pb.MinValueDataFieldName = "MinValue";
pb.MaxValueDataFieldName = "MaxValue";
pb.AttachTo(tree);
ProgressNode n = new ProgressNode("Operation progress:");
n.Progress = 80;
n.MinValue = 0;
n.MaxValue = 200;
n.AttachTo(tree);
' Custom node class with members for the progress bar node control.
Class ProgressNode
Inherits Node
Public Property Progress As Integer
Public Property MinValue As Integer
Public Property MaxValue As Integer
Public Sub New(text As String)
MyBase.New(text)
End Sub
End Class
' NodeProgressBar node control usage example.
Dim tb As New NodeTextBox()
tb.AttachTo(tree)
Dim pb As New NodeProgressBar()
pb.ValueDataFieldName = "Progress"
pb.MinValueDataFieldName = "MinValue"
pb.MaxValueDataFieldName = "MaxValue"
pb.AttachTo(tree)
Dim n As New ProgressNode("Operation progress:")
n.Progress = 80
n.MinValue = 0
n.MaxValue = 200
n.AttachTo(tree)
Bar color customization#
In conjunction with controlling progress bar location as described above, NodeProgressBar provides the possibility to customize bar color per each node. To do that, you need to add to the node class two properties of type System.Drawing.Color, that defines start and end colors of the progress bar. Start color defines the color of the bar, used when bar location equals the minimum value. End color is used when bar location equals maximum value. When the bar is in the middle of the progress bar control bounds, its color is interpolated using these defined start and end colors.
The progress bar custom colors are supported only for non-system treeview themes, which may be activated using Theme treeview property:
After adding color properties, they should be bound to the NodeProgressBar instance using BarStartColorFieldName and BarEndColorFieldName properties respectively, as shown below.
Example
// Define a node custom class with progress bar's color properties.
class TaskNode : Node
{
public int Value;
public Color BarStartColor;
public Color BarEndColor;
}
// Add node controls.
NodeTextBox tb = new NodeTextBox();
tb.AttachTo(tree);
NodeProgressBar nodeBackColor = new NodeProgressBar();
nodeBackColor.FillFreeSpace = true;
nodeBackColor.ValueDataFieldName = "Value";
nodeBackColor.BarStartColorFieldName = "BarStartColor";
nodeBackColor.BarEndColorFieldName = "BarEndColor";
nodeBackColor.AttachTo(tree);
// Add nodes and define custom color for the progress bar node control.
TaskNode node = new TaskNode();
node.Text = "Task1 progress";
node.Value = 30;
// Set custom colors specific for this node.
node.BarStartColor = Color.White;
node.BarEndColor = Color.Violet;
node.AttachTo(tree);
node = new TaskNode();
node.Text = "Task2 progress";
node.Value = 50;
// Set custom colors specific for this node.
node.BarStartColor = Color.White;
node.BarEndColor = Color.Green;
node.AttachTo(tree);
node = new TaskNode();
node.Text = "Task3 progress";
node.Value = 100;
// Set custom colors specific for this node.
node.BarStartColor = Color.White;
node.BarEndColor = Color.Orange;
node.AttachTo(tree);
// IMPORTANT: switch treeview theme.
tree.Theme = eVisualTheme.Office2007Blue;
' Define a node custom class with progress bar's color properties.
Class TaskNode
Inherits Node
Public Property Value As Integer
Public Property BarStartColor As Color
Public Property BarEndColor As Color
End Class
' Add node controls.
Dim tb As New NodeTextBox()
tb.AttachTo(tree)
Dim nodeBackColor As New NodeProgressBar()
nodeBackColor.FillFreeSpace = True
nodeBackColor.ValueDataFieldName = "Value"
nodeBackColor.BarStartColorFieldName = "BarStartColor"
nodeBackColor.BarEndColorFieldName = "BarEndColor"
nodeBackColor.AttachTo(tree)
' Add nodes and define custom color for the progress bar node control.
Dim node As New TaskNode()
node.Text = "Task1 progress"
node.Value = 30
' Set custom colors specific for this node.
node.BarStartColor = Color.White
node.BarEndColor = Color.Violet
node.AttachTo(tree)
node = New TaskNode()
node.Text = "Task2 progress"
node.Value = 50
' Set custom colors specific for this node.
node.BarStartColor = Color.White
node.BarEndColor = Color.Green
node.AttachTo(tree)
node = New TaskNode()
node.Text = "Task3 progress"
node.Value = 100
' Set custom colors specific for this node.
node.BarStartColor = Color.White
node.BarEndColor = Color.Orange
node.AttachTo(tree)
' IMPORTANT: switch treeview theme.
tree.Theme = eVisualTheme.Office2007Blue
With the given code above, you should see this treeview:
