Hallo zusammen!
Ich melde mich wieder mit einem neuen Projekt von mir. Und, dadurch, dass es sich um ein Projekt von mir handelt, ist dieses natürlich auch ein Designprojekt.
Diesmal wieder Open-Source, und dadurch hier im Sourcecode-Austausch.
Das Steuerelement, welches ich in diesem Thread vorstellen möchte, ist eine Controlbox für WinForms Anwendungen.
Hintergrundinfo
Was ist eine ControlBox und für was benötigt man sie?
Grundsätzlich handelt es sich hierbei um einen von mir "kreirten" Namen für die Schaltflächen jedes Windows Fensters (oben rechts).
Ich spreche von den Köpfen Minimieren, Maximieren und Schließen. Natürlich gibt es diese Schaltflächen in jeder Windows Forms Anwendung schon.
Wenn man jedoch das Form Design anpassen möchte, wie es diverse Programme(auch größere Anwendungen - Paradebeispiel Visual Studio -) schon machen,
kann man nun auf dieses CustomControl zurückgreifen. Besonders bei Anwendungen mit dem
Ich hatte dieses Control schoneinmal programmiert, undzwar in meinem Projekt der MetroSuite, jedoch dort eher unschön und nicht wirklich auf die Ansprüche des Developers anpassbar.
Deswegen habe ich mich in den vergangenen Tagen rasch hingesetzt und etwas neues zusammengebastelt (welches später in die MetroSuite implementiert wird).
Vorraussetzungen
Das CustomControl benötigt keine besonderen Vorraussetzungen, lediglich .NET Framework 4.0 wobei es vermutlich nichteinmal davon abhängig ist.
Es wurde zwar mit diesen Einstellungen programmiert, kann jedoch nach unten gesetzt werden.
Inspiration
Inspieriert wurde dieses CustomControl, wie oben schon angedeutet, von der ControlBox von VisualStudio.
Ich persönlich habe mich mehr oder weniger in das Dark-Theme verliebt, und habe deshalb dieses nachgebaut.
Meine Vorlage für das Steuerelement war also folgende:
Code-Dekontruktion
Werfen wir nun einen kleinen Blick auf den beigelegten Code, unzwar eigentlich nur auf die Zeichenmethode.
In diesem Abschnitt werden alle Felder, außer das indem sich derzeit die Maus befindet, gezeichnet. Grundsätzlich ist dies auch schnell erklärt:
Eine Liste aller Felder (
und im Anschluss, -sofern vorhanden- das dazugehörige Icon gezeichnet. Die
welche in der Methode
Zuletzt wird noch abgefragt ob die Eigenschaft
Nun muss noch das Feld gezeichnet werden in dem sich die Maus befindet. Die Position der Maus, sowie deren derzeitigen Status wird in der Mouse-Hook ermittelt.
Dort werden alle Felder durchlaufen, und sofern die Position in einem dieser liegt weitergegeben und neugezeichnet. In der Paint-Methode wird anschließend das Feld dargestellt:
Das Verfahren ist prinzipiell genau das selbe wie bei den inaktiven Feldern. Folglich muss hier nichts besonderes erklärt werden.
Wenn man das Steuerelement auf die Form zieht, sieht die Darstellung im Designer nicht so aus wie man es sich erwartet.
Man sieht ein leeres Feld mit einem einem String. Dies ist so, da natürlich noch keine Felder zum Control hinzugefügt worden sind.
Will man dies nicht, kann dies mit der Eigenschaft
Um sich die Positionierung zu erleichtern, beziehungsweise wenn man keine eigenen Felder benötigt, kann man die Eigenschaft
Dadurch werden die drei Standardschaltflächen vorgeladen zum Control hinzugefügt und angezeigt.
Hinzufügen einer Schaltfläche
Das Hinzufügen einer Schaltfläche funktioniert relativ simpel.
Man erstellt einfach eine neue
Dies kann wie folgt aussehen:
Bei der New-Methode können folgende Parameter angegeben werden:
Das Ergebnis
Unser Ergebnis sieht nun wie folgt aus:
Mit ein Bisschen Anpassen kann die Controlbox nun so aussehen. Man sieht ein modernes Steuerelement mit zusätzlichen Schaltflächen wie man sie von Visual Studio kennt.
Der nächste Screenshot zeigt weniger Schaltflächen, dafür aber die [ttI]sHighlighted[/tt] Eigenschaft.
Alles zusammen:
Verwendung
Nun müssen die Schaltflächen natürlich noch eine Funktion bekommen, da sie derzeit nur Deko sind.
Dies geschieht mittels dem
Mit mehreren Methoden kann man nun den einzelnen Schaltflächen Funktionen zuweisen. Eine wäre zum Beispiel mit der
oder simpel mit dem jeweiligen Index:
Kombinierungsmöglichkeiten
Ein Bisschen Werbung möchte ich an dieser Stelle für zwei meiner Projekte machen.
Man kann nämlich die Controlbox perfekt mit diesen kombinieren. Ich rede von meinem OpenSource Projekt SteamControls und natürlich von der MetroSuite.
Beide findet ihr unter folgenden Links:
SteamControls - Ein modernes DarkUI für deine Anwendung!
MetroControls - Suite; Hohl dir den Windows 8 Style für deine Anwendung
In diesem Sinne bedanke ich mich erneut für eure Aufmerksamkeit und hoffe, dass dieses Projekt jemandem weiterhelfen konnte.
Liebe Grüße und Viel Spaß!
Martin Pfeiffer aka. Gather_
Ich melde mich wieder mit einem neuen Projekt von mir. Und, dadurch, dass es sich um ein Projekt von mir handelt, ist dieses natürlich auch ein Designprojekt.
Diesmal wieder Open-Source, und dadurch hier im Sourcecode-Austausch.
Das Steuerelement, welches ich in diesem Thread vorstellen möchte, ist eine Controlbox für WinForms Anwendungen.
Hintergrundinfo
Was ist eine ControlBox und für was benötigt man sie?
Grundsätzlich handelt es sich hierbei um einen von mir "kreirten" Namen für die Schaltflächen jedes Windows Fensters (oben rechts).
Ich spreche von den Köpfen Minimieren, Maximieren und Schließen. Natürlich gibt es diese Schaltflächen in jeder Windows Forms Anwendung schon.
Wenn man jedoch das Form Design anpassen möchte, wie es diverse Programme(auch größere Anwendungen - Paradebeispiel Visual Studio -) schon machen,
kann man nun auf dieses CustomControl zurückgreifen. Besonders bei Anwendungen mit dem
FormBorderStyle = None
ist dies ganz praktisch.Ich hatte dieses Control schoneinmal programmiert, undzwar in meinem Projekt der MetroSuite, jedoch dort eher unschön und nicht wirklich auf die Ansprüche des Developers anpassbar.
Deswegen habe ich mich in den vergangenen Tagen rasch hingesetzt und etwas neues zusammengebastelt (welches später in die MetroSuite implementiert wird).
Vorraussetzungen
Das CustomControl benötigt keine besonderen Vorraussetzungen, lediglich .NET Framework 4.0 wobei es vermutlich nichteinmal davon abhängig ist.
Es wurde zwar mit diesen Einstellungen programmiert, kann jedoch nach unten gesetzt werden.
Inspiration
Inspieriert wurde dieses CustomControl, wie oben schon angedeutet, von der ControlBox von VisualStudio.
Ich persönlich habe mich mehr oder weniger in das Dark-Theme verliebt, und habe deshalb dieses nachgebaut.
Meine Vorlage für das Steuerelement war also folgende:
Code-Dekontruktion
Werfen wir nun einen kleinen Blick auf den beigelegten Code, unzwar eigentlich nur auf die Zeichenmethode.
VB.NET-Quellcode
- 'Draw Areas
- If _Areas.Count > 0 Then
- For i As Integer = 0 To _Areas.Count - 1
- Dim c As Color = _ControlBoxAreas(i).DefaultColor
- g.FillRectangle(New SolidBrush(c), _Areas(i))
- ' g.DrawRectangle(Pens.Aqua, _Areas(i))
- If _Areas(i) <> _HotArea Then
- ' Draw Icon
- Select Case _ControlBoxAreas(i).AreaType
- Case ControlBoxAreaType.Custom : If _ControlBoxAreas(i).AreaImage IsNot Nothing Then g.DrawImage(_ControlBoxAreas(i).AreaImage, GetCenterPoint(_ControlBoxAreas(i).AreaImage, _Areas(i)))
- Case ControlBoxAreaType.Close : DrawIcon(g, Color.White, ControlBoxAreaType.Close, _Areas(i), c)
- Case ControlBoxAreaType.Minimize : DrawIcon(g, Color.White, ControlBoxAreaType.Minimize, _Areas(i), c)
- Case ControlBoxAreaType.Maximize : DrawIcon(g, Color.White, ControlBoxAreaType.Maximize, _Areas(i), c)
- End Select
- Using p As New Pen(_ControlBoxAreas(i).HighlightColor)
- If _ControlBoxAreas(i).IsHighlighted Then g.DrawLine(p, New Point(_Areas(i).X, _Areas(i).Y + _Areas(i).Height - 1), New Point(_Areas(i).X + _Areas(i).Width - 1, _Areas(i).Y + _Areas(i).Height - 1))
- End Using
- End If
- Next
- End If
In diesem Abschnitt werden alle Felder, außer das indem sich derzeit die Maus befindet, gezeichnet. Grundsätzlich ist dies auch schnell erklärt:
Eine Liste aller Felder (
_Areas [List Of Rectangle]
) wird durchgelaufen. Dabei wird von jedem die jeweilige Standardfarbe ausgewählt,und im Anschluss, -sofern vorhanden- das dazugehörige Icon gezeichnet. Die
Select Case ()
-Abfrage dient zum Zeichnen der Standardicons (Minimieren, Maximieren und Schließen),welche in der Methode
DrawIcon
gezeichnet werden. Welches Icon gezeichnet werden soll kann immer beim Erstellen eines neues Feldes mit der Eigenschaft AreaType
festgelegt werden. Wird ein eigenes Icon gezeichnet ist dieser Wert "Custom".Zuletzt wird noch abgefragt ob die Eigenschaft
IsHighlighted
für das Feld true ist. Wenn ja wird noch ein kleiner Farbakzent gezeichnet.Nun muss noch das Feld gezeichnet werden in dem sich die Maus befindet. Die Position der Maus, sowie deren derzeitigen Status wird in der Mouse-Hook ermittelt.
Dort werden alle Felder durchlaufen, und sofern die Position in einem dieser liegt weitergegeben und neugezeichnet. In der Paint-Methode wird anschließend das Feld dargestellt:
VB.NET-Quellcode
- 'Draw Hot Area
- If _HotArea <> Nothing Then
- Using p As New Pen(Brushes.Red)
- Using b As New SolidBrush(_ControlBoxAreas(_HotIndex).HoverColor)
- Select Case (_MouseState)
- Case Helpers.MouseState.Over : p.Color = Color.Red : b.Color = _ControlBoxAreas(_HotIndex).HoverColor
- Case Helpers.MouseState.Pressed : p.Color = Color.DarkRed : b.Color = _ControlBoxAreas(_HotIndex).PressedColor
- End Select
- g.FillRectangle(b, _HotArea)
- ' g.DrawRectangle(p, _HotArea)
- ' Draw Icon
- Select Case _ControlBoxAreas(_HotIndex).AreaType
- Case ControlBoxAreaType.Custom : If _ControlBoxAreas(_HotIndex).AreaImage IsNot Nothing Then g.DrawImage(_ControlBoxAreas(_HotIndex).AreaImage, GetCenterPoint(_ControlBoxAreas(_HotIndex).AreaImage, _HotArea))
- Case ControlBoxAreaType.Close : DrawIcon(g, Color.White, ControlBoxAreaType.Close, _HotArea, b.Color)
- Case ControlBoxAreaType.Minimize : DrawIcon(g, Color.White, ControlBoxAreaType.Minimize, _HotArea, b.Color)
- Case ControlBoxAreaType.Maximize : DrawIcon(g, Color.White, ControlBoxAreaType.Maximize, _HotArea, b.Color)
- End Select
- End Using
- p.Color = _ControlBoxAreas(_HotIndex).HighlightColor
- If _ControlBoxAreas(_HotIndex).IsHighlighted Then g.DrawLine(p, New Point(_Areas(_HotIndex).X, _Areas(_HotIndex).Y + _Areas(_HotIndex).Height - 1), New Point(_Areas(_HotIndex).X + _Areas(_HotIndex).Width - 1, _Areas(_HotIndex).Y + _Areas(_HotIndex).Height - 1))
- End Using
- End If
Das Verfahren ist prinzipiell genau das selbe wie bei den inaktiven Feldern. Folglich muss hier nichts besonderes erklärt werden.
Wenn man das Steuerelement auf die Form zieht, sieht die Darstellung im Designer nicht so aus wie man es sich erwartet.
Man sieht ein leeres Feld mit einem einem String. Dies ist so, da natürlich noch keine Felder zum Control hinzugefügt worden sind.
Will man dies nicht, kann dies mit der Eigenschaft
DesignModeControl
deaktiviert werden.Um sich die Positionierung zu erleichtern, beziehungsweise wenn man keine eigenen Felder benötigt, kann man die Eigenschaft
LoadDefaultAreas
auf true setzen.Dadurch werden die drei Standardschaltflächen vorgeladen zum Control hinzugefügt und angezeigt.
Hinzufügen einer Schaltfläche
Das Hinzufügen einer Schaltfläche funktioniert relativ simpel.
Man erstellt einfach eine neue
ControlBoxArea
-Struktur und fügt diese dem Control mittels der Methode .AddArea()
hinzu.Dies kann wie folgt aussehen:
VB.NET-Quellcode
Bei der New-Methode können folgende Parameter angegeben werden:
- AreaImage - Das Icon der Schaltfläche.
- AreaSize - Die Größe der Schaltfläche.
- DefaultColor - Die Standardfarbe der Schaltfläche.
- HoverColor - Die Hoverfarbe der Schaltfläche.
- PressedColor - Die Gedrücktfarbe der Schaltfläche.
- (optional) AreaType: Der Typ der Schaltfläche. (legt fest ob Standardicons gezeichnet werden sollen)
- (optional) AreaName: Der Name der Schaltfläche.
- (optional) HighlightArea: Gibt an, ob die Schaltfläche hervorgehoben werden soll.
Das Ergebnis
Unser Ergebnis sieht nun wie folgt aus:
Mit ein Bisschen Anpassen kann die Controlbox nun so aussehen. Man sieht ein modernes Steuerelement mit zusätzlichen Schaltflächen wie man sie von Visual Studio kennt.
Der nächste Screenshot zeigt weniger Schaltflächen, dafür aber die [ttI]sHighlighted[/tt] Eigenschaft.
Alles zusammen:
Verwendung
Nun müssen die Schaltflächen natürlich noch eine Funktion bekommen, da sie derzeit nur Deko sind.
Dies geschieht mittels dem
AreaClicked()
Event, welches den Sender und ControlBoxEventArgs zurück gibt.Mit mehreren Methoden kann man nun den einzelnen Schaltflächen Funktionen zuweisen. Eine wäre zum Beispiel mit der
Name
-Eigenschaft,oder simpel mit dem jeweiligen Index:
VB.NET-Quellcode
- Private Sub ControlBox1_AreaClicked(sender As Object, e As ControlBox.ControlBoxEventArgs) Handles ControlBox1.AreaClicked
- Select Case e.Item.Name
- Case "max"
- If WindowState = FormWindowState.Maximized Then
- WindowState = FormWindowState.Normal
- ElseIf WindowState = FormWindowState.Normal Then
- WindowState = FormWindowState.Maximized
- End If
- Case "min"
- WindowState = FormWindowState.Minimized
- Case "end"
- Application.Exit()
- End Select
- End Sub
Kombinierungsmöglichkeiten
Ein Bisschen Werbung möchte ich an dieser Stelle für zwei meiner Projekte machen.
Man kann nämlich die Controlbox perfekt mit diesen kombinieren. Ich rede von meinem OpenSource Projekt SteamControls und natürlich von der MetroSuite.
Beide findet ihr unter folgenden Links:
SteamControls - Ein modernes DarkUI für deine Anwendung!
MetroControls - Suite; Hohl dir den Windows 8 Style für deine Anwendung
In diesem Sinne bedanke ich mich erneut für eure Aufmerksamkeit und hoffe, dass dieses Projekt jemandem weiterhelfen konnte.
Liebe Grüße und Viel Spaß!
Martin Pfeiffer aka. Gather_