Erstellen eines einfachen Tracker-Controls

Artentus · 31. Juli 2013, 16:43

Hallo Community.

In diesem Artikel erkläre ich, wie man ein Trackercontrol (bekannt aus z.B. dem Taskmanager) erstellt, und erkläre dabei auch allgemein die Vorgehensweise, die man bei so etwas verwenden sollte.
Ich habe das Control ursprünglich in C# erstellt, weswegen ich immer beide Codes posten werde. Allerdings braucht ihr euch keine Sorgen zu machen, ich habe alles per Hand übersetzt, weshalb der VB-Code qualitativ genauso hochwertig ist.

Aber nun zum Eigentlichen. Bevor wir mit dem Programmieren anfangen können, sollten wir uns zunächst überlegen, was unser Control alles können soll. Ich verwende dazu sehr gerne ein Klassendiagramm, dieses bekommt ihr mit "Rechtstklick auf euer Projekt im Projektmappenexplorer -> Klassendiagramm anzeigen".
Das Trackercontrol soll mehrere Pfade besitzen können (also mehrere Graphen-Linien), also liegt es nahe, daraus eine extra Klasse zu machen. Dort können wird dann alle Eigenschaft gut unterbringen. In meinem Fall möchte ich, dass ein Pfad seine, Farbe, seine Linienbreite, seine Füllfarbe, ob er überhaupt gefüllt ist, den maximalen Wert, einen Namen, und natürlich die später angezeigten Werte speichert. Das Klassendiagramm für die Pfad-Klasse sieht dann so aus:

Die restlichen Eigenschaften und Methoden, die ihr seht, kommen von den implementierten Interfaces, zu denen ich nun auch etwas sagen werden.
Bei einem Pfad handelt es sich um eine Liste von Werten, die nachher im Tracker angezeigt werden, aus diesen wird das Diagramm zusammengesetzt. Also liegt es nahe, dass unsere Klasse IEnumerable und ICollection implementiert. Ich habe mich dafür entschieden, dass die Werte als Integer gespeichert werden sollen, deswegen IEnumerable(Of Integer). Ihr könnt natürlich auch einen anderen Datentypen wie Single oder Double wählen.
Auch INotifyPropertyChanged habe ich implementiert, denn wir wollen das Tracker-Control später ja auch darüber informieren, wenn sich eine Eigenschaft geändert hat und neugezeichnet werden muss. Mehr dazu gibts dann gleich beim Code.
Zur Architektur kann ich sagen, ich habe absichtlich nicht einfach IList(Of Integer) implementiert, da diese auch Methoden wie Add und Remove besitzt. Diese möchte ich aber nicht, denn man soll immer nur ganz hinten einen neuen Wert hinzufügen können, und man soll keine Werte entfernen können. Außerdem habe ich noch eine Eigenschaft "MaxStoredValues" angelegt, die angibt, wie viele Werte der Pfad speichern soll. Wird die Anzahl überschritten, so soll die Klasse die überflüssigen Werte löschen. Dadurch verhindere ich, dass irgendwann ein paar Millionen Werte gespeichert sind, die man sowieso nicht sehen kann.

Artentus · 31. Juli 2013, 17:47

Jetzt gehts ans Eingemachte, wir müssen nun alles, was wir uns im Klassendiagramm zusammengebastelt haben, implementieren. Ich poste nun zuerst den fertigen Code und erkläre ihn dann.

VB

VB.NET-Quellcode

Imports System.Drawing
Imports System.ComponentModel
''' <summary>
''' Ein Pfad, der in einem Tracker angezeigt werden kann.
''' </summary>
''' <remarks></remarks>
Public Class TrackerPath : Implements IEnumerable(Of Integer), ICollection, INotifyPropertyChanged
Private values As Queue(Of Integer)
Private maxStored As Integer
Private _lineColor As Color
Private _fillColor As Color
Private _isFilled As Boolean
Private _lineWidth As Single
Private _name As String
Private _maximum As Integer
Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged
''' <summary>
''' Der größte Wert, der im Tracker angezeigt wird.
''' Es können auch höhere Werte hinzugefügt werden.
''' </summary>
''' <remarks></remarks>
Public Property Maximum As Integer
Get
Return _maximum
End Get
Set(value As Integer)
If (_maximum <> value) Then
_maximum = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("Maximum"))
End If
End Set
End Property
''' <summary>
''' Der Name dieses Pfades.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property Name As String
Get
Return _name
End Get
Set(value As String)
If (_name <> value) Then
_name = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("Name"))
End If
End Set
End Property
''' <summary>
''' Die Farbe dieses Pfades.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property LineColor As Color
Get
Return _lineColor
End Get
Set(value As Color)
If (_lineColor <> value) Then
_lineColor = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("LineColor"))
End If
End Set
End Property
''' <summary>
''' Die Farbe der Füllung des Pfades.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property FillColor As Color
Get
Return _fillColor
End Get
Set(value As Color)
If (_fillColor <> value) Then
_fillColor = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("FillColor"))
End If
End Set
End Property
''' <summary>
''' Gibt an, ob dieser Pfad gefüllt sein soll.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property IsFilled As Boolean
Get
Return _isFilled
End Get
Set(value As Boolean)
If (_isFilled <> value) Then
_isFilled = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("IsFilled"))
End If
End Set
End Property
''' <summary>
''' Die Linienbreite dieses Pfades.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property LineWidth As Single
Get
Return _lineWidth
End Get
Set(value As Single)
If (_lineWidth <> value) Then
_lineWidth = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("LineWidth"))
End If
End Set
End Property
''' <summary>
''' Gibt die maximale Anzahl an Werten an, die in diesem Pfad gespeichert werden.
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property MaxStoredValues As Integer
Get
Return maxStored
End Get
Set(value As Integer)
If maxStored <> value Then
maxStored = value
If maxStored < values.Count Then
CutQueue()
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("Items"))
End If
End If
End Set
End Property
''' <summary>
''' Erstellt einen neuen Pfad.
''' </summary>
''' <remarks></remarks>
Public Sub New()
values = New Queue(Of Integer)()
maxStored = 100
_maximum = 100
_lineWidth = 1
_isFilled = False
End Sub
Private Sub CutQueue()
Do While values.Count > maxStored
values.Dequeue()
Loop
End Sub
''' <summary>
''' Fügt diesem Pfad einen neuen Wert hinzu.
''' </summary>
''' <param name="value"></param>
''' <remarks></remarks>
Public Sub Add(value As Integer)
values.Enqueue(value)
If (maxStored < values.Count) Then CutQueue()
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("Items"))
End Sub
Public Function GetEnumerator() As IEnumerator(Of Integer) Implements IEnumerable(Of Integer).GetEnumerator
Return values.GetEnumerator()
End Function
Public Sub CopyTo(array As Integer(), index As Integer)
values.CopyTo(array, index)
End Sub
Public Sub CopyTo(array As Array, index As Integer) Implements ICollection.CopyTo
values.CopyTo(DirectCast(array, Integer()), index)
End Sub
Public ReadOnly Property Count As Integer Implements ICollection.Count
Get
Return values.Count
End Get
End Property
Public ReadOnly Property IsSynchronized As Boolean Implements ICollection.IsSynchronized
Get
Return False
End Get
End Property
Public ReadOnly Property SyncRoot As Object Implements ICollection.SyncRoot
Get
Return DirectCast(values, ICollection).SyncRoot
End Get
End Property
Private Function GetEnumerator1() As IEnumerator Implements IEnumerable.GetEnumerator
Return values.GetEnumerator()
End Function
End Class

C#

C-Quellcode

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
namespace TrackerControl
{
/// <summary>
/// Ein Pfad, der in einem Tracker angezeigt werden kann.
/// </summary>
public class TrackerPath : IEnumerable<int>, ICollection, INotifyPropertyChanged
{
Queue<int> values;
int maxStored;
Color lineColor;
Color fillColor;
bool isFilled;
Single lineWidth;
string name;
int maximum;
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Der größte Wert, der im Tracker angezeigt wird.
/// Es können auch höhere Werte hinzugefügt werden.
/// </summary>
public int Maximum
{
get
{
return maximum;
}
set
{
if (maximum != value)
return;
maximum = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Maximum"));
}
}
/// <summary>
/// Der Name dieses Pfades.
/// </summary>
public string Name
{
get
{
return name;
}
set
{
if (name == value)
return;
name = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Name"));
}
}
/// <summary>
/// Die Farbe dieses Pfades.
/// </summary>
public Color LineColor
{
get
{
return lineColor;
}
set
{
if (lineColor == value)
return;
lineColor = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("LineColor"));
}
}
/// <summary>
/// Die Farbe der Füllung des Pfades.
/// </summary>
public Color FillColor
{
get
{
return fillColor;
}
set
{
if (fillColor == value)
return;
fillColor = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("FillColor"));
}
}
/// <summary>
/// Gibt an, ob dieser Pfad gefüllt sein soll.
/// </summary>
public bool IsFilled
{
get
{
return isFilled;
}
set
{
if (isFilled == value)
return;
isFilled = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("IsFilled"));
}
}
/// <summary>
/// Die Linienbreite dieses Pfades.
/// </summary>
public Single LineWidth
{
get
{
return lineWidth;
}
set
{
if (lineWidth == value)
return;
lineWidth = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("LineWidth"));
}
}
/// <summary>
/// Gibt die maximale Anzahl an Werten an, die in diesem Pfad gespeichert werden.
/// </summary>
public int MaxStoredValues
{
get
{
return maxStored;
}
set
{
if (maxStored == value)
return;
maxStored = value;
if (maxStored < values.Count)
{
CutQueue();
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Items"));
}
}
}
/// <summary>
/// Erstellt einen neuen Pfad.
/// </summary>
public TrackerPath()
{
values = new Queue<int>();
maxStored = 100;
maximum = 100;
lineWidth = 1;
isFilled = false;
}
private void CutQueue()
{
while (values.Count > maxStored)
values.Dequeue();
}
/// <summary>
/// Fügt diesem Pfad einen neuen Wert hinzu.
/// </summary>
/// <param name="value"></param>
public void Add(int value)
{
values.Enqueue(value);
if (maxStored < values.Count)
CutQueue();
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Items"));
}
public IEnumerator<int> GetEnumerator()
{
return values.GetEnumerator();
}
IEnumerator IEnumerable.GetEnumerator()
{
return values.GetEnumerator();
}
public void CopyTo(int[] array, int index)
{
values.CopyTo(array, index);
}
public void CopyTo(Array array, int index)
{
values.CopyTo((int[])array, index);
}
public int Count
{
get { return values.Count; }
}
public bool IsSynchronized
{
get { return false; }
}
public object SyncRoot
{
get { return (values as ICollection).SyncRoot; }
}
}
}

Aufgrund des oben genannten Systems, immer nur hinten einen Wert anzufügen, habe ich als internen Speicher eine Queue (also eine first-in-first-out List) gewählt. Dies macht mir weitere Implementierungen leichter. In der CutQueue-methode wird solange das erste Element aus der Queue entfernt, bis die Größe wieder stimmt. Diese Methode wird immer aufgerufen, wenn die Queue-Größe die gewünschte Maximalkapazität überschreitet.
Die Properties lösen alle das PropertyChanged-Event aus und führen dabei Überprüfungen durch, um unnötige Aufrufe zu vermeiden.
Alle restlichen Member (die ohne XML-Kommentar) sind lediglich Standardimplementierungen für IEnumerable und ICollection.

Damit wäre die TrackerPath-Klasse soweit fertig. Auf dieser Basis können wir nun im nächsten Teil weiterarbeiten.

Artentus · 31. Juli 2013, 18:19

Als nächstest brauchen wir eine Liste, mit der das Tracker-Control später die TrackerPath-Instanzen speichern kann. Da würde einem natürlich erst mal die List(Of T) eins Auge springen, doch nach genauerem betrachten ist diese ungeeignet. Warum? Wenn wir einen neuen Path hinzufügen, dann müssen wir in unserem Tracker-Control das PropertyChanged-Event das jeweiligen Paths abonnieren, damit wird darauf reagieren und neuzeichnen können. Genauso müssen wir das Event auch wieder deabonnieren, wenn ein Pfad aus der liste entfernt wird. Da die List(Of T) aber keine Möglichkeit bietet festzustellen, wann ein Item hinzugefügt oder entfernt wurde, müssen wir und mit etwas eigenem aushelfen.
Wir erstellen uns also eine neue Klasse (in meinem Fall "TrackerPathCollection"), die das kann. Das Klassendiagramm dazu sieht so aus:

Bei diesem Teil geht ein Danke an @ErfinderDesRades:, der mir geholfen hat den Code stark zu vereinfachen.

Ich erbe von der Klasse Collection(Of T), da diese alle Funktionalität mitbringt, die wir benötigen. Ich überschreibe lediglich ein paar Methoden, um die jeweiligen Events dort auszulösen, denn das ist ja der Sinn dieser Klasse. Das Ganze sieht so aus:

VB

VB.NET-Quellcode

Imports System.Collections.ObjectModel
''' <summary>
''' Speichert eine Auflistung von Tracker-Pfaden.
''' </summary>
Public Class TrackerPathCollection : Inherits Collection(Of TrackerPath)
Public Event ItemAdded As EventHandler(Of TrackerPathCollectionEventArgs)
Public Event ItemRemoving As EventHandler(Of TrackerPathCollectionEventArgs)
Protected Overrides Sub ClearItems()
For Each _item In Me
RaiseEvent ItemRemoving(Me, New TrackerPathCollectionEventArgs(_item))
Next
MyBase.ClearItems()
End Sub
Protected Overrides Sub InsertItem(index As Integer, item As TrackerPath)
MyBase.InsertItem(index, item)
RaiseEvent ItemAdded(Me, New TrackerPathCollectionEventArgs(item))
End Sub
Protected Overrides Sub RemoveItem(index As Integer)
RaiseEvent ItemRemoving(Me, New TrackerPathCollectionEventArgs(Me(index)))
MyBase.RemoveItem(index)
End Sub
Protected Overrides Sub SetItem(index As Integer, item As TrackerPath)
RaiseEvent ItemRemoving(Me, New TrackerPathCollectionEventArgs(Me(index)))
MyBase.SetItem(index, item)
RaiseEvent ItemAdded(Me, New TrackerPathCollectionEventArgs(item))
End Sub
End Class
Public Class TrackerPathCollectionEventArgs : Inherits EventArgs
Private _item As TrackerPath
Public ReadOnly Property Item As TrackerPath
Get
Return _item
End Get
End Property
Public Sub New(item As TrackerPath)
_item = item
End Sub
End Class

C#

C-Quellcode

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace TrackerControl
{
/// <summary>
/// Speichert eine Auflistung von Tracker-Pfaden.
/// </summary>
public class TrackerPathCollection : Collection<TrackerPath>
{
public event EventHandler<TrackerPathCollectionEventArgs> ItemAdded;
public event EventHandler<TrackerPathCollectionEventArgs> ItemRemoving;
protected override void ClearItems()
{
if (ItemRemoving != null) foreach (var itm in this) ItemRemoving(this, new TrackerPathCollectionEventArgs(itm));
base.ClearItems();
}
protected override void InsertItem(int index, TrackerPath item)
{
base.InsertItem(index, item);
if (ItemAdded != null) ItemAdded(this, new TrackerPathCollectionEventArgs(item));
}
protected override void RemoveItem(int index)
{
if (ItemRemoving != null) ItemRemoving(this, new TrackerPathCollectionEventArgs(this[index]));
base.RemoveItem(index);
}
protected override void SetItem(int index, TrackerPath item)
{
if (ItemRemoving != null) ItemRemoving(this, new TrackerPathCollectionEventArgs(this[index]));
base.SetItem(index, item);
if (ItemAdded != null) ItemAdded(this, new TrackerPathCollectionEventArgs(item));
}
}
public class TrackerPathCollectionEventArgs : EventArgs
{
TrackerPath item;
public TrackerPath Item
{
get
{
return item;
}
}
public TrackerPathCollectionEventArgs(TrackerPath item)
{
this.item = item;
}
}
}

An allen Stellen, an denen Items hinzugefügt oder entfernt werden, befindet sich ein Aufruf an ItemAdded oder an ItemRemoving. Für diese beiden Events habe ich auch eine kleine Event-Klasse erstellt, die das betroffene Item (in diesem Fall eben ein TrackerPath) speichern kann. Beachtet auch, dass man an den Namen erkennt, dass ItemAdded ausgelöst wird, nachdem ein Item hinzugefügt wurde, ItemRemoved aber bevor ein Item entfernt wurde.

Das wäre dann auch schon alles für diese kleine Auflistungs-Klasse, weiter gehts (wegen Platzmangel) im nächsten Teil mit dem eigentlichen Control.

Artentus · 31. Juli 2013, 19:30

Wir haben nun alle nötigen Vorbereitungen abgeschlossen, jetzt können wir uns ans eigentliche Control ranmachen. Dadurch, dass wird alles vorher sauber in Klassen ausgelagert haben, ist das Klassendiagramm dafür auch nicht sehr lang. Wir brauchen eigentlich lediglich die Liste, die die Pfade speichert, und die Anzahl an Werten, die wir anzeigen wollen. Ich habe zusätzlich noch eine Farbe für einen Rahmen und eine Möglichkeit, eine kleine Legende (also Beschriftungen für die Pfade) anzuzeigen, hinzugefügt.

Dazu wäre noch zu sagen, dass die klasse natürlich von Control erbt, und dass "~Tracker" der Destruktor ist (für diejenigen, die kein C# können, das entspricht in VB der Finalize-Methode).

Hier wäre erstmal der Code:

VB

VB.NET-Quellcode

Imports System.Windows.Forms
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Drawing.Text
Imports System.ComponentModel
''' <summary>
''' Ein Trackercontrol, das mehrere Pfade unterstützt und vielseitig anpassbar ist.
''' </summary>
<DesignerCategory("Code")>
Public Class Tracker : Inherits Control
Private _paths As TrackerPathCollection
Private pens As Dictionary(Of TrackerPath, Pen)
Private brushes As Dictionary(Of TrackerPath, Brush)
Private nameBrushes As Dictionary(Of TrackerPath, Brush)
Private _showedValueCount As Integer
Private _borderColor As Color
Private borderPen As Pen
Private format As StringFormat
Private _showPathNames As Boolean
''' <summary>
''' Erstellt einen neuen Tracker.
''' </summary>
Public Sub New()
SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.OptimizedDoubleBuffer Or ControlStyles.UserPaint Or ControlStyles.ResizeRedraw, True)
UpdateStyles()
_paths = New TrackerPathCollection()
AddHandler Paths.ItemAdded, AddressOf Paths_Added
AddHandler Paths.ItemRemoving, AddressOf Paths_Removing
ShowedValueCount = 100
ShowPathNames = True
pens = New Dictionary(Of TrackerPath, Pen)()
brushes = New Dictionary(Of TrackerPath, Brush)()
nameBrushes = New Dictionary(Of TrackerPath, Brush)()
format = New StringFormat(StringFormat.GenericDefault)
format.LineAlignment = StringAlignment.Center
End Sub
Protected Overrides Sub Finalize()
For Each item In pens
item.Value.Dispose()
Next
pens.Clear()
For Each item In brushes
item.Value.Dispose()
Next
brushes.Clear()
For Each item In nameBrushes
item.Value.Dispose()
Next
nameBrushes.Clear()
borderPen.Dispose()
format.Dispose()
End Sub
Private Sub Paths_Added(sender As Object, e As TrackerPathCollectionEventArgs)
If e.Item IsNot Nothing Then
AddHandler e.Item.PropertyChanged, AddressOf Path_PropertyChanged
pens.Add(e.Item, New Pen(e.Item.LineColor, e.Item.LineWidth))
brushes.Add(e.Item, New SolidBrush(e.Item.FillColor))
nameBrushes.Add(e.Item, New SolidBrush(e.Item.LineColor))
End If
End Sub
Private Sub Paths_Removing(sender As Object, e As TrackerPathCollectionEventArgs)
If e.Item IsNot Nothing Then
RemoveHandler e.Item.PropertyChanged, AddressOf Path_PropertyChanged
pens(e.Item).Dispose()
pens.Remove(e.Item)
brushes(e.Item).Dispose()
brushes.Remove(e.Item)
nameBrushes(e.Item).Dispose()
nameBrushes.Remove(e.Item)
End If
End Sub
Private Sub Path_PropertyChanged(sender As Object, e As PropertyChangedEventArgs)
Dim path = DirectCast(sender, TrackerPath)
Select Case e.PropertyName
Case "LineColor"
nameBrushes(path).Dispose()
nameBrushes(path) = New SolidBrush(path.LineColor)
pens(path).Dispose()
pens(path) = New Pen(path.LineColor, path.LineWidth)
Case "LineWidth"
pens(path).Dispose()
pens(path) = New Pen(path.LineColor, path.LineWidth)
Case "FillColor"
brushes(path).Dispose()
brushes(path) = New SolidBrush(path.FillColor)
End Select
Invalidate()
End Sub
''' <summary>
''' Alle Pfade, die momentan diesem Tracker zugeordnet sind.
''' </summary>
<Browsable(True)>
<Description("Alle Pfade, die momentan diesem Tracker zugeordnet sind.")>
<Category("Data")>
Public ReadOnly Property Paths As TrackerPathCollection
Get
Return _paths
End Get
End Property
''' <summary>
''' Die von dem Tracker angezeigte Anzahl Werte (pro Pfad).
''' </summary>
<Browsable(True)>
<DefaultValue(100)>
<Description("Die von dem Tracker angezeigte Anzahl Werte (pro Pfad).")>
<Category("Behavior")>
Public Property ShowedValueCount As Integer
Get
Return _showedValueCount
End Get
Set(value As Integer)
If _showedValueCount <> value Then
_showedValueCount = value
Invalidate()
End If
End Set
End Property
''' <summary>
''' Die Rahmenfarbe des Trackers.
''' </summary>
<Browsable(True)>
<Description("Die Rahmenfarbe des Trackers.")>
<Category("Appearance")>
Public Property BorderColor As Color
Get
Return _borderColor
End Get
Set(value As Color)
If _borderColor <> value Then
_borderColor = value
If borderPen IsNot Nothing Then borderPen.Dispose()
borderPen = New Pen(_borderColor)
Invalidate()
End If
End Set
End Property
''' <summary>
''' Gibt an, ob der Tracker Pfadnamen anzeigt.
''' </summary>
<Browsable(True)>
<DefaultValue(True)>
<Description("Gibt an, ob der Tracker Pfadnamen anzeigt.")>
<Category("Appearance")>
Public Property ShowPathNames As Boolean
Get
Return _showPathNames
End Get
Set(value As Boolean)
If _showPathNames <> value Then
_showPathNames = value
Invalidate()
End If
End Set
End Property
End Class

C#

C-Quellcode

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Text;
using System.ComponentModel;
namespace TrackerControl
{
/// <summary>
/// Ein Trackercontrol, das mehrere Pfade unterstützt und vielseitig anpassbar ist.
/// </summary>
[DesignerCategory("Code")]
public class Tracker : Control
{
TrackerPathCollection paths;
Dictionary<TrackerPath, Pen> pens;
Dictionary<TrackerPath, Brush> brushes;
Dictionary<TrackerPath, Brush> nameBrushes;
int showedValueCount;
Color borderColor;
Pen borderPen;
StringFormat format;
bool showPathNames;
/// <summary>
/// Erstellt einen neuen Tracker.
/// </summary>
public Tracker()
{
SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true);
UpdateStyles();
paths = new TrackerPathCollection();
paths.ItemAdded += Paths_Added;
paths.ItemRemoving += Paths_Removing;
showedValueCount = 100;
showPathNames = true;
pens = new Dictionary<TrackerPath, Pen>();
brushes = new Dictionary<TrackerPath, Brush>();
nameBrushes = new Dictionary<TrackerPath, Brush>();
format = new StringFormat(StringFormat.GenericDefault);
format.LineAlignment = StringAlignment.Center;
}
~Tracker()
{
foreach (var item in pens)
item.Value.Dispose();
pens.Clear();
foreach (var item in brushes)
item.Value.Dispose();
brushes.Clear();
foreach (var item in nameBrushes)
item.Value.Dispose();
nameBrushes.Clear();
borderPen.Dispose();
format.Dispose();
}
private void Paths_Added(object sender, TrackerPathCollectionEventArgs e)
{
if (e.Item != null)
{
e.Item.PropertyChanged += Path_PropertyChanged;
pens.Add(e.Item, new Pen(e.Item.LineColor, e.Item.LineWidth));
brushes.Add(e.Item, new SolidBrush(e.Item.FillColor));
nameBrushes.Add(e.Item, new SolidBrush(e.Item.LineColor));
}
}
private void Paths_Removing(object sender, TrackerPathCollectionEventArgs e)
{
if (e.Item != null)
{
e.Item.PropertyChanged -= Path_PropertyChanged;
pens[e.Item].Dispose();
pens.Remove(e.Item);
brushes[e.Item].Dispose();
brushes.Remove(e.Item);
nameBrushes[e.Item].Dispose();
nameBrushes.Remove(e.Item);
}
}
private void Path_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
var path = sender as TrackerPath;
switch (e.PropertyName)
{
case "LineColor":
nameBrushes[path].Dispose();
nameBrushes[path] = new SolidBrush(path.LineColor);
pens[path].Dispose();
pens[path] = new Pen(path.LineColor, path.LineWidth);
break;
case "LineWidth":
pens[path].Dispose();
pens[path] = new Pen(path.LineColor, path.LineWidth);
break;
case "FillColor":
brushes[path].Dispose();
brushes[path] = new SolidBrush(path.FillColor);
break;
}
Invalidate();
}
/// <summary>
/// Alle Pfade, die momentan diesem Tracker zugeordnet sind.
/// </summary>
[Browsable(true)]
[Description("Alle Pfade, die momentan diesem Tracker zugeordnet sind.")]
[Category("Data")]
public TrackerPathCollection Paths
{
get
{
return paths;
}
}
/// <summary>
/// Die von dem Tracker angezeigte Anzahl Werte (pro Pfad).
/// </summary>
[Browsable(true)]
[DefaultValue(100)]
[Description("Die von dem Tracker angezeigte Anzahl Werte (pro Pfad).")]
[Category("Behavior")]
public int ShowedValueCount
{
get
{
return showedValueCount;
}
set
{
if (showedValueCount != value)
{
showedValueCount = value;
Invalidate();
}
}
}
/// <summary>
/// Die Rahmenfarbe des Trackers.
/// </summary>
[Browsable(true)]
[Description("Die Rahmenfarbe des Trackers.")]
[Category("Appearance")]
public Color BorderColor
{
get
{
return borderColor;
}
set
{
if (borderColor != value)
{
borderColor = value;
if (borderPen != null)
borderPen.Dispose();
borderPen = new Pen(borderColor);
Invalidate();
}
}
}
/// <summary>
/// Gibt an, ob der Tracker Pfadnamen anzeigt.
/// </summary>
[Browsable(true)]
[DefaultValue(true)]
[Description("Gibt an, ob der Tracker Pfadnamen anzeigt.")]
[Category("Appearance")]
public bool ShowPathNames
{
get
{
return showPathNames;
}
set
{
if (showPathNames != value)
{
showPathNames = value;
Invalidate();
}
}
}
}
}

Artentus · 31. Juli 2013, 20:42

(das gehört eigentlich noch in der vorherigen post)
Den Eigenschaften habe ich diesmal noch ein paar Attribute gegeben, damit sie im Designer besser zu bedienen sind. Zusätzlich wird bei jeder Änderung auch neugezeichnet (durch Invalidate), damit alle Änderungen auch sofort sichtbar werden.
Wie ihr seht habe ich das ItemAdded und das ItemRemoving-Event der TrackerPathCollection abonniert, dort abonniere bzw- deabonniere ich dann wiederum das PropertyChanged-Event des jeweiligen Items. Ich habe das System auch noch insofern optimiert, dass ich alle zum zeichnen eines pfades benötigten GDI-Objekte in Dictionaries gespeichert werden, als Key dient dabei das Pfad selbst. Diese Objekte werden beim Hinzufügen erstellt und beim Entfernen freigegeben. Im PropertyChanged-Event aller Pfade werden dann zusätzlich zum Neuzeichnen auch noch diese Objekte falls notwendig angepasst. Auf diese Art verhindere ich, dass ich diese Instanzen jedesmal beim Zeichnen neu erstellen und wieder freigeben muss. Im Destruktor bzw. in der Finalize-Methode müssen dann natürlich noch die verbleibenden Objekte freigegeben werden, wir wollen ja keinen Memoryleak produzieren.

Nun hätten wir alles soweit erledigt, um zum letzten und schwierigsten Teil vorzuschreiten - dem Paint-Event. Hier müssen wir nun alles, was wir vorher als reine Daten behandelt haben, auf den Bildschirm bringen.
Hier ist die OnPaint-Methode, die im Code aus dem letzten Post noch gefehlt hat:

VB

VB.NET-Quellcode

Protected Overrides Sub OnPaint(e As PaintEventArgs)
Dim g = e.Graphics
Dim [step] = CSng(Width / (ShowedValueCount - 1))
g.SmoothingMode = SmoothingMode.AntiAlias
g.PixelOffsetMode = PixelOffsetMode.HighQuality
g.TextRenderingHint = TextRenderingHint.ClearTypeGridFit
For pathIndex = 0 To Paths.Count - 1
Dim path = Paths(pathIndex)
Dim points = New PointF(ShowedValueCount - 1) {}
Using pathEnum = path.GetEnumerator()
If path.Count > _showedValueCount Then
For i = 0 To path.Count - _showedValueCount - 1
pathEnum.MoveNext()
Next
End If
For i = 0 To _showedValueCount - 1
Dim xPos = i * [step]
If i >= ShowedValueCount - path.Count Then
pathEnum.MoveNext()
Dim yPos = Height - CSng(pathEnum.Current / path.Maximum) * Height
points(i) = New PointF(xPos, yPos)
Else
points(i) = New PointF(xPos, Height)
End If
Next
End Using
Dim gp = New GraphicsPath()
gp.StartFigure()
gp.AddLines(points)
gp.AddLine(New Point(Width, Height), New Point(0, Height))
gp.CloseFigure()
If path.IsFilled Then g.FillPath(brushes(path), gp)
g.DrawPath(pens(path), gp)
gp.Dispose()
Next
g.SmoothingMode = SmoothingMode.HighSpeed
g.PixelOffsetMode = PixelOffsetMode.HighSpeed
Const borderWidth = 10
Const itemHeight = 18
If ShowPathNames Then
Dim wrapPos = Math.Max(((Height \ 2) - borderWidth) \ itemHeight, 1)
Dim itemLeft = borderWidth
Dim biggestItemWidth = 0
For i = 0 To Paths.Count - 1
If (i Mod wrapPos) = 0 Then itemLeft = biggestItemWidth + borderWidth
Dim path = Paths(i)
Dim colorRect = New Rectangle(itemLeft, borderWidth + (i Mod wrapPos) * itemHeight, 10, 10)
g.FillRectangle(nameBrushes(path), colorRect)
g.DrawRectangle(Drawing.Pens.Black, colorRect)
Dim textRect = New Rectangle(colorRect.X + colorRect.Width + 5, colorRect.Y - 5, Width - 25, itemHeight)
Dim f = New Font(Font.FontFamily, 10, FontStyle.Regular, GraphicsUnit.Pixel)
g.DrawString(path.Name, f, Drawing.Brushes.Gray, textRect, format)
Dim textWidth = g.MeasureString(path.Name, f).Width
If textRect.X + textWidth > biggestItemWidth Then biggestItemWidth = textRect.X + CInt(textWidth)
Next
End If
g.DrawRectangle(borderPen, New Rectangle(0, 0, Width - 1, Height - 1))
End Sub

C#

C-Quellcode

protected override void OnPaint(PaintEventArgs e)
{
var g = e.Graphics;
var step = (float)Width / (float)(showedValueCount - 1);
g.SmoothingMode = SmoothingMode.AntiAlias;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
g.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
for (int pathIndex = 0; pathIndex < paths.Count; pathIndex++)
{
var path = paths[pathIndex];
var points = new PointF[showedValueCount];
using (var pathEnum = path.GetEnumerator())
{
if (path.Count > showedValueCount)
for (int i = 0; i < path.Count - showedValueCount; i++)
pathEnum.MoveNext();
for (int i = 0; i < showedValueCount; i++)
{
var xPos = i * step;
if (i >= showedValueCount - path.Count)
{
pathEnum.MoveNext();
var yPos = Height - ((float)pathEnum.Current / (float)path.Maximum) * Height;
points[i] = new PointF(xPos, yPos);
}
else
points[i] = new PointF(xPos, Height);
}
}
var gp = new GraphicsPath();
gp.StartFigure();
gp.AddLines(points);
gp.AddLine(new Point(Width, Height), new Point(0, Height));
gp.CloseFigure();
if (path.IsFilled)
g.FillPath(brushes[path], gp);
g.DrawPath(pens[path], gp);
gp.Dispose();
}
g.SmoothingMode = SmoothingMode.HighSpeed;
g.PixelOffsetMode = PixelOffsetMode.HighSpeed;
const int borderWidth = 10;
const int itemHeight = 18;
if (showPathNames)
{
var wrapPos = Math.Max(((Height / 2) - borderWidth) / itemHeight, 1);
var itemLeft = borderWidth;
var biggestItemWidth = 0;
for (int i = 0; i < paths.Count; i++)
{
if ((i % wrapPos) == 0)
itemLeft = biggestItemWidth + borderWidth;
var path = paths[i];
var colorRect = new Rectangle(itemLeft, borderWidth + (i % wrapPos) * itemHeight, 10, 10);
g.FillRectangle(nameBrushes[path], colorRect);
g.DrawRectangle(Pens.Black, colorRect);
var textRect = new Rectangle(colorRect.X + colorRect.Width + 5, colorRect.Y - 5, Width - 25, itemHeight);
var f = new Font(Font.FontFamily, 10, FontStyle.Regular, GraphicsUnit.Pixel);
g.DrawString(path.Name, f, Brushes.Gray, textRect, format);
var textWidth = g.MeasureString(path.Name, f).Width;
if (textRect.X + textWidth > biggestItemWidth)
biggestItemWidth = textRect.X + (int)textWidth;
}
}
g.DrawRectangle(borderPen, new Rectangle(0, 0, Width - 1, Height - 1));
}

Das ganze werde ich nun Schritt für Schritt erklären, da es doch ziemlich viel ist.

Zunächst einmal müssen wir uns klar werden, wie wir unsere Daten (also die Pfade) darstellen wollen. Ich möchte bei diesem Control die letzten Werte aus jedem Pfad in gleichmäßigem Abstand über das Control verteilen und jeweils mut Linien verbinden. Möglicherweise soll der Berech unterhalb des Pfades auch noch gefüllt werden.
Dann stellen wir uns die Frage, was wir dafür alles für Informationen brauchen und welche Schwierigkeiten wir dabei bekommen könnten. Bei dem Tracker brauchen wir die Abstand zwischen zwei Werten, damit wir sie gleichmäßig verteilen können. Ebenfalls brauchen wir auch alle Informationen aus den Eigenschaften des Tracker-Controls und der einzelnen Pfade. Und dann müssen wir jeden Wert in den Pfaden auf das Bildschirmkoordinatensystem abbilden. Mögliche Probleme sind, dass ein Pfad mehr oder weniger Werte enthallten könnte, als wir anzeigen wollen. Bei ersterem müssen wir die richtigen Werte (also immer die letzten) auswählen, im zweiten Fall müssen wir die fehlenden Werte mit 0 ersetzen. Außerdem müssen wir darauf achten, dass das Koordinatensystem von oben nach unten verläuft, wir wollen es aber genau andersherum darstellen.

Mit diesen Informationen können wir nun anfangen zu coden. Zuerst berechnen wir die Fehlenden Daten, in diesem Fall eben nur den Abstand zwischen den einzelnen Werten.
Dann brauchen wir natürlich eine Schleife, um alle Pfade zu zeichnen. Ich habe hier eine Zählschleife (For) verwendet und keine Enumerationsschleife (For Each), da diese ungefähr doppelt so schnell ist und es beim Zeichnen immer auf Geschwindigkeit ankommt.
Jetzt kommt erstmal wieder Berechnung, denn wir müssen für jeden Wert aus dem aktuellen Pfad den Punkt berechnen, an dem er nachher angezeigt wird. Dafür lege ich zuerst ein Array an, dass die Punkte aufnehmen kann. Ich verwende hier absichtlich ein Array und keine List, da wir ohnehin wissen, wie viele Punkte wir brauchen, und es schneller ist. Um an die Werte ranzukommen verwende ich den Enumerator manuell, um ein unnötiges Kopieren zu vermeiden, was noch einmal Leistung verbrauchen würde.
Nun müssen wir unsere Sonderfälle behandeln. Befinden sich in dem Pfad mehr Werte, als wir anzeigen wollen, dann müssen wir den Enumerator so lange hochzählen, bis wir an dem ersten für uns relevanten Element angekommen sind. Danach können wir in einer Schleife alle Punkte berechnen. Dort gibt es wieder zwei mögliche Fälle. Entweder, an der aktuellen Stelle gibt es einen Wert, dann berechnen wir die Y-Koordnate mittels des Dreisatzes und drehen sie dann um (da das Koordinatensystem ja falschrum ist). Oder es befindet sich kein Wert an der Stelle, dann hemen wir einfach vür die Y-Koordinate 0 an (oder besser die maximale Höhe, denn unser Koordinatensystem ist ja, wie gesagt, gespiegelt). Die X-Koordinate ist in beiden Fällen gleich und kann ganz simpel durch den Abstand und den Index berechnet werden.
Somit hätten wir unsere Punkte fertig im Array, jetzt kann das eigentliche zeichnen beginnen. Für mein Vorhaben eignet sich ein GraphicsPath am besten, da ich damit sowohl die Linie alsauch die Füllung zeichnen kann und dieser auch schneller ist, als wenn ich alle Linien einzeln zeichnen würde. Ihr könnt/müsst natürlich für andere Controls auch andere Arten des Zeichnens wählen, GDI+ gibt einem da ja viele Möglichkeiten. Ich jedenfalls füge dem Pfad einfach alle berechneten Punkte hinzu und fertig. Allerdings muss ich die dadurch entstehende Figur unten auch "abschließen", damit die Füllung funktioniert (also ich muss unten bei der X-Achse ebenfalls eine Linie einfügen, da die Figur an der Stelle sonst offen wäre). Diesen pfad kann ich dann ganz einfach zeichnen und bei bedarf auch füllen.

Damit hätten wir die erste Hälfte der Methode durchgesprochen. Wies mit dem zweiten Teil aussieht, erfahrt ihr dann im nächsten Teil.

Artentus · 31. Juli 2013, 21:31

Das wärs mir den Pfaden gewesen, aber wie ich ja oben bereist erwähnt habe möchte ich noch ein paar Gimmicks zu dem Control hinzufügen. Das wäre zum einen ein Rahmen, der aber sehr leicht zu zeichnen ist. Das ist die letzte Codezeile innerhalb der Funktion und sollte soweit selbsterklärend sein. Zum anderen wäre das eine kleine Legende, in der jedem Pfad sein Name zugeordnet wird.
Wieder stelle ich mir also die Frage, "Wie will ich das anzeigen und was für Probleme kommen dabei auf mich zu?". In meinem Fall möchte ich ein kleines Quadrat in der Farbe des Pfades zeichnen und daneben den Namen das Pfades. Das ganze soll in der linken oberen Ecke angezeigt werden. Eventuelle Probleme könnten sein, dass das Control zu klein ist, um alle Namen untereinander anzeigen zu lassen, weshalb ich dafür sorgen muss, dass die Liste in einem solchen Fall umgebrochen wird (also eine neue Spalte angelegt wird). Außerdem dürfen diese Elemente (also Kästchen und Schrift) nicht zu groß sein, da sie sonst das Control überdecken würden.

Zuerst hole ich mir also wieder die nötigen Daten. Das wären zwei Konstanten, die ich so gewählt habe, dass es gut aussieht, und die sich nur auf Position und Größe beziehen. Dann brauche ich den Punkt, an dem eine neue Spalte begonnen werden soll. Das habe ich so gestaltet, dass umgebrochen wird, sobald über die Hälfte des Controls erreicht ist. Dann noch zwei Variablen zum zwischenspeichern von Werten und das wars.
Nun laufe ich wieder mit einer Schleife durch alle Pfade und bestimme, ob bei dem momentanen Index ein Umbruch vorliegt. Wenn ja, dann erhöhe ich die X-Koordinate für die Items entsprechend. Dann wird das Kästchen und der Text gezeichnet, was glaube ich nicht viel Klärungsbedarf hat. Zuletzt muss ich noch messen, wie viel platzt der Text beansprucht, damit ich die nächste Spalte korrekt ausrichten kann.

So, das wars dann auch schließlich mal mit diesem äußerst langen Artikel. Ich hoffe mir ist die Mischung aus Sourcecode-Präsentation und Tutorial gelungen und ihr konntet etwas über das Erstellen von Controls lernen.
Also in Zukunft immer daran denken: nicht einfach drauf los programmieren, sondern erstmal ein Grundgerüst erstellen, z.B. mit einem Klassendiagramm.

Hier habt ihr zum Abschluss noch mal das komplette Klassendiagramm:

Das ganze Projekt gibt es außerdem in VB und C# im Anhang zu Download, zusammen mit einer kleinen Testanwendung.

faxe1008 · 31. Juli 2013, 22:00

Was verwendest du um den Tracker zu demonstrieren? Prozessorauslastung? Wenn ja könntest du das im Testprojekt umstellen? Auf eine Trackbar zum Beispiel denn es crashed mit folgender Fehlermeldung:

Indikatornamensdaten können nicht geladen werden, da ein ungültiger Index "" aus der Registrierung gelesen wurde.

Würde es ja selber machen wenn ich eine Ahnung von C# hätte

...

Artentus · 31. Juli 2013, 22:05

Das ist allerdings seltsam, denn eigentlich werden die PerformanceCounter dynamisch je nach Prozessoranzahl erstellt.
Der Code für den Tracker liegt aber auch in VB vor. Dennoch werd ich da mal schnell was machen.

So, habs jetzt neu hochgeladen. Diesmal ist auch eine Testanwendung in VB mit drin.
Als ich die geschrieben habe ist mir übrigens aufgefallen, dass die VB-Version noch einen kleinen Bug hatte. Ich hatte vergessen, dass Arrays in VB immer um 1 größer sind, als in C#, weshalb dann immer ein leerer Punkt am Ende war, was natürlich die Darstellung kaputt gemacht hat. Das ist jetzt behoben.

Switcherlapp97 · 1. August 2013, 10:15

Hallo,

Ich habe jetzt dein Beispielprojekt heruntergeladen und ausprobiert. Wenn ich jetzt aber nochmal einen Tracker auf der Form haben will und diesen von der Toolbox auf die Form ziehe kommt eine Fehlermeldung (Bild im Anhang).

Gruß
Switcherlapp97

Artentus · 1. August 2013, 14:19

@Switcherlapp97
Gib dem Tracker eine BorderColor und lade den Designe neu, dann ist der Fehler weg.

Gather · 14. August 2013, 11:57

Wieso lässt sich eigentlich kein anderer Pen-Style (DashStyle) auf den Pen anwenden?

VB.NET-Quellcode

pens(path).DashStyle = DashStyle.Dot

Artentus · 14. August 2013, 17:03

@Gather
Ich weiß nicht, was du meinst, die Zeile wirft bei mir keinen Fehler.

Gather · 14. August 2013, 20:06

Ich habe ich bisschen Gegoogelt, und so sollte man eine Linie Punktieren können.
Ja es stimmt sie wirft keinen Fehler, dennoch aber kein ergebnis.

Erstellen eines einfachen Tracker-Controls

Erstellen eines einfachen Tracker-Controls

Erstellen eines einfachen Tracker-Controls - Fortsetzung 1

VB.NET-Quellcode

C-Quellcode

Erstellen eines einfachen Tracker-Controls - Fortsetzung 2

VB.NET-Quellcode

C-Quellcode

Erstellen eines einfachen Tracker-Controls - Fortsetzung 3

VB.NET-Quellcode

C-Quellcode

Erstellen eines einfachen Tracker-Controls - Fortsetzung 4

VB.NET-Quellcode

C-Quellcode

Erstellen eines einfachen Tracker-Controls - Fortsetzung 5

VB.NET-Quellcode

Tags

Ähnliche Themen

4 Benutzer haben hier geschrieben