Workshop UserControls Part 1: Getting Started
10. Mai 2009 von Werner Mager · Gelesen: 4408 · heute: 1In letzter Zeit habe ich des öfteren UserControls implementiert. Da es dabei doch einige Tricks und Kniffe gibt, die ich zum einen Teil selbst herausgefunden und zum anderen Teil aus diversen Quellen zusammengesucht habe, möchte ich diese in Form eines kleinen Workshops an dieser Stelle zusammenfassen.
Anhand einfacher Beispiele wird in die Thematik eingeführt und z.B. auf die Verwendung von Properties und Events in UserControls eingegangen. Im ersten Teil wird neben den Basics insbesondere die Text-Property erläutert, die auf den ersten Blick doch sehr widerspenstig anmutet.
Was sind UserControls?
UserControls können mit dem Visual Studio sehr bequem aus bestehenden Controls zusammen gestellt werden. Das resultierende UserControl kann genauso wie ein bestehendes Control im Visual Studio verwendet werden. Durch Properties wird das Control dabei bequem parametrierbar.
In dem folgenden Beispiel wird eine Schaltfläche mit individuellem Design realisiert:
![]()
Ein UserControl anlegen…
… ist nicht wirklich schwer. Als erstes wird ein Projekt im Visual Studio benötigt. Im einfachsten Fall ist dies eine Windows-Anwendung die (CamelCase lässt grüßen) z.B. „UserControlWorkshopPart1“ heißen könnte.
Folgende Schritte sind nun nötig:
- Dem Projekt wird ein neues UserControl „SomeButton“ zugefügt.
- Die Hintergrundfarbe wird auf weiß gesetzt und ein Panel und ein Label werden hinzugefügt.
- Das Panel bekommt einen roten Hintergrund und für die Schattierungen werden zwei weitere Panels mit einem etwas dunkleren Rot zugefügt.
- Die neuen Panels werden im ersten Panel angedockt: das eine unten, das andere rechts. Das Panel rechts bekommt die Breite 2 und das Panel unten die Höhe 2.
- Das erste Panel bekommt die Größe 20×20 und wird ganz an den linken Rand gesetzt.
- Das Label bekommt den Text „Some Text“
Anschließend wird das Projekt einmal kompiliert.
Ready To Go: das UserControl einsetzten
Bisher haben wir das UserControl ja nur in der Design-Sicht verwendet. Nach dem Kompilieren unseres Projektes steht es uns in der Toolbar zur Verfügung und wartet nur darauf, auf ein Formular gezogen zu werden:

Wie bei jedem normalen Control können nun über den Designer bequem z.B. Größe oder die Schriftart ändern, was sich interessanterweise auch auf die untergeordneten Controls und somit auch unser Label sofort durchschlägt. Im Folgenden wird gezeigt, wie neue Eigenschaften deklariert werden können, wodurch das Control noch flexibler wird.
Das Control über Properties parametrieren
Als einfaches Beispiel soll zunächst die Farbe des Rechtecks einstellbar sein. Dazu wird in der Code-Ansicht des UserControls die Property „BoxColor“ definiert, in deren Set-Methode einfach die BackColor-Eigenschaft des ersten Panels durchgereicht wird. Um das ganze noch spannender zu machen, erhalten das zweite und das dritte Panel zugleich eine leicht dunklere Variante der ausgewählten Farbe:
using System.Drawing; using System.Windows.Forms; namespace UserControlWorkshopPart1 { public partial class SomeButton : UserControl { public SomeButton() { InitializeComponent(); } byte makeDarker(byte input) { return ((byte)(input*0.7)); } public Color BoxColor { get { return (panel1.BackColor); } set { panel1.BackColor = value; Color darkerColor = Color.FromArgb(makeDarker(value.R), makeDarker(value.G), makeDarker(value.B)); panel3.BackColor = darkerColor; panel2.BackColor = darkerColor; } } } }
Nach dem erneuten kompilieren können wir nun über den Designer bequem etwas Farbe in unser Form bringen:

Nicht ganz ohne: die Text-Property
Jetzt fehlt nur noch eine Möglichkeit, den Text des Controls zu ändern.
Analog zum vorherigen Beispiel liegt folgender Code nahe:
public string Text { get { return (label1.Text); } set { label1.Text = value; } }
Beim kompilieren erhalten wir nun die Warnung „’UserControlWorkshopPart1.SomeButton.Text’ hides inherited member ‘System.Windows.Forms.UserControl.Text’. To make the current member override that implementation, add the override keyword…”
Die Meldung besagt, dass UserControl bereits eine Property Text besitzt. Da diese jedoch auf das Label umgeleitet werden soll, deklarieren wir die Property mit dem override-Schlüsselwort:
public override string Text { get { return (label1.Text); } set { label1.Text = value; } }
Nach einem erneuten Kompilieren ist die Warnung weg. Jedoch erscheint die Property Text nicht in dem Properties-Fenster. Die Erklärung hierfür ist, dass die Text-Property eines UserControls per Default im Designer ausgeblendet wurde. Dies muss über Member-Attribute wieder rückgängig gemacht werden. Folgende 3 Attribute sollten gesetzt werden:
Browsable(true):
Hierdurch erscheint die Property im Designer
DesignerSerializationVisibility(DesignerSerializationVisibility.Visible):
Ist dieses Attribut nicht gesetzt, vergisst der Designer den eingestellten Wert beim schließen des Formulares sofort wieder.
Localizable(true):
Durch dieses Attribut wird es möglich, die Text-Property für verschiedene Sprachen zu lokalisieren.
Mit diesen drei Attributen sieht die Text-Property nun wiefolgt aus:
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)] [Browsable(true)] [Localizable(true)] public override string Text { get { return (label1.Text); } set { label1.Text = value; } }
Zum kompilieren wird noch eine zusätzliche Using-Anweisung benötigt:
using System.ComponentModel;
Zu guter Letzt
Das war auch schon der erste Teil des UserControl-Workshops. Im zweiten Teil werde ich näher auf Events eingehen, insbesondere den Click Event, damit sich unser Control auch wie ein ordentlicher Button verhält.
Wie immer gibt es an dieser Stelle das komplette Projekt zum Download:
04. September 2009 um 22:18
[…] vorheriger Artikel nächster Artikel […]