Weiterführende Themen: Erstellen eines benutzerdefinierten Steuerelements mit benutzerdefinierten Eigenschaften

In Microsoft Expression Blend steht Ihnen eine Reihe verschiedener Systemsteuerelemente und einfacher Stile zur Verfügung, die Sie in Ihren Anwendungen verwenden können. Wenn jedoch diese Steuerelemente oder Stile bestimmte Anforderungen nicht erfüllen, können Sie ein benutzerdefiniertes Steuerelement erstellen. Hierzu erstellen Sie eine Microsoft .NET-Klasse, deren Eigenschaften von einer der System.Windows.Controls-Klassen vererbt werden.

In den folgenden Verfahren wird Ihnen gezeigt, wie Sie ein benutzerdefiniertes Button-Steuerelement erstellen können, das eine neue Eigenschaft enthält, um den Pfad zu einer Bilddatei zum Anzeigen eines Bilds aufzunehmen.

Ein Beispiel für das Erstellen eines Steuerelements ohne Verwendung von Code, das dann keine benutzerdefinierten Eigenschaften aufweist, finden Sie unter Erstellen eines leeren Benutzersteuerelements.

Weitere Informationen zu benutzerdefinierten Steuerelementen einschließlich XAML- und Codebeispielen finden Sie auf der MSDN-Website im Abschnitt Windows Presentation Foundation unter Übersicht über das Erstellen von Steuerelementen und DependencyProperty-Klasse.

So definieren Sie ein benutzerdefiniertes Steuerelement

1. Suchen Sie im Projektpanel die Datei Window1.xaml, und erweitern Sie sie, um die CodeBehind-Datei des Projekts mit dem Namen Window1.xaml.cs anzuzeigen. (Wenn Sie Microsoft Visual Basic als Programmiersprache beim Erstellen des Projekts ausgewählt haben, trägt die CodeBehind-Datei den Namen Window1.xaml.vb.) Doppelklicken Sie auf die CodeBehind-Datei, um sie zum Bearbeiten zu öffnen.

2. Fügen Sie in der Datei Window1.xaml.cs den folgenden Quellcode für die Klassendefinition unmittelbar vor der letzten schließenden geschweiften Klammer (}) in der Datei ein. (Fügen Sie bei Visual Basic den entsprechenden Code unmittelbar vor End Namespace oder unmittelbar nach dem letzten Vorkommen von End Class ein.)

   public class ImageButton : Button 
   { 
     public ImageSource Source 
     { 
       get { return base.GetValue(SourceProperty) as ImageSource; } 
       set { base.SetValue(SourceProperty, value); } 
     } 
     public static readonly DependencyProperty SourceProperty = 
       DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton), null); 
   }
   

   Class ImageButton
     Inherits Button
     Public Property Source() As ImageSource
       Get
         Return CType(MyBase.GetValue(SourceProperty), ImageSource)
       End Get
       Set(ByVal value As ImageSource)
         MyBase.SetValue(SourceProperty, value)
       End Set
     End Property
     Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton), nothing)
   End Class
   

3. Speichern und schließen Sie die geänderte CodeBehind-Datei.

   Tipp:

   Die ImageButton-Klasse zeigt das Muster der Abhängigkeitseigenschaft. Extern stellt die Klasse eine übliche CLR-Eigenschaft (Common Language Runtime, also .NET) mit dem Namen Source zur Verfügung, die den Typ ImageSource aufweist. In der Klasse wird auch ein schreibgeschütztes Abhängigkeitseigenschaftsfeld mit dem Namen SourceProperty registriert und bereitgestellt. Darüber hinaus implementiert sie die CLR-Accessors für die Source-Eigenschaft hinsichtlich der Abhängigkeitseigenschaft. Wenn eine Eigenschaft mit einer registrierten Abhängigkeitseigenschaft versehen wird, kann WPF bzw. Silverlight für Ihre Eigenschaft eine Vielzahl von Diensten bereitstellen. Diese Dienste umfassen Gestaltung, Datenbindung, Vererbung von Werten, Standardwerte und Animationen. Es steht außerdem eine Funktion namens Vorlagenbindung zur Verfügung, mit der Sie eine Bindung an den Wert der Eigenschaft innerhalb einer Steuerelementvorlage erstellen können. In diesem Lernprogramm wird die Vorlagenbindung in der Praxis gezeigt.

   Tipp:

   Bei Bedarf können Sie Ihren Quellcode für die Definition einer benutzerdefinierten Steuerelementklasse in einer getrennten Quellcodedatei speichern. Als Alternative zu den beiden vorherigen Schritten können Sie auch eine neue Datei mit dem Namen ImageButton.cs erstellen, den Quellcode in diese Datei gemeinsam mit einer Namespacedeklaration und derselben Gruppe von using-Direktiven aus der CodeBehind-Datei Ihres Dokuments einfügen und dann Ihrem Projekt die neue Datei hinzufügen (klicken Sie im Menü Projekt auf Element hinzufügen).

4. Erstellen Sie jetzt Ihr Projekt, damit das neue ImageButton-Steuerelement im Objektepanel angezeigt wird. Klicken Sie in Expression Blend im Menü Projekt auf Projekt erstellen (oder drücken Sie STRG+UMSCHALT+B). Überprüfen Sie, ob das Erstellen ohne Fehler abgeschlossen wurde.

5. Wechseln Sie wieder zur Bearbeitung von Window1.xaml in Expression Blend.

6. Klicken Sie links in Expression Blend im Werkzeugpanel auf Objekte .

   Es wird das Objektepanel geöffnet, in dem alle Steuerelemente, Panels und Elemente angezeigt werden, die Sie im Dokument platzieren können.

7. Wählen Sie auf der Registerkarte Projekt in der Liste das ImageButton-Steuerelement aus.

   Das Symbol für das Werkzeugpanel unterhalb der Schaltfläche Objekte ist jetzt auf das ImageButton-Steuerelement festgelegt. Dieses Steuerelement ist bereits ausgewählt, sodass Sie es auf der Zeichenfläche zeichnen können.

   Hinweis:
   Benutzerdefinierte Steuerelemente werden erst im Objektepanel unter der Kategorie Projekt angezeigt, wenn Sie dem Projekt den Quellcode hinzugefügt und das Projekt erstellt haben (STRG+UMSCHALT+B).

8. Wählen Sie im Werkzeugpanel das ImageButton-Symbol aus, und zeichnen Sie ein ImageButton-Steuerelement, indem Sie auf die Zeichenfläche klicken und innerhalb des Dokuments ein BoundingBox-Element zeichnen.

   Das ImageButton-Steuerelement wird auf der Zeichenfläche gerendert. Ein ImageButton-Element mit dem Namen [ImageButton] "ImageButton" wird im Panel Objekte und Zeitachsen als untergeordnetes Element von LayoutRoot aufgeführt.

So ändern Sie den Stil des benutzerdefinierten Steuerelements

1. Klicken Sie mit der rechten Maustaste auf das neue ImageButton-Steuerelement, klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf Kopie bearbeiten, um eine Steuerelementvorlage für alle ImageButton-Elemente zu erstellen.

   Das Dialogfeld Ressource "Style" erstellen wird geöffnet.

2. Geben Sie im Feld Ressourcenname (Schlüssel) des Dialogfelds Ressource "Style" erstellen in das Textfeld neben dem ersten Optionsfeld ImageButtonStyle ein.

   Dadurch wird ein Name für Ihre Vorlage im Ressourcenverzeichnis festgelegt, sodass Sie sie als Vorlage für jedes beliebige ImageButton-Element festlegen können.

   Hinweis:
   Steuerelementvorlagen sind von Stilen umschlossen. Daher umfasst der Stil, der auf ein Steuerelement angewendet wird, sowohl die Darstellung (Teile) als auch das Verhalten des Steuerelements.

3. Wählen Sie im Feld Definieren in das Optionsfeld Dieses Dokument aus, und stellen Sie sicher, dass Window: Window in der Dropdownliste ausgewählt ist.

   Das Feld Definieren in gibt an, welches Ressourcenverzeichnis zum Definieren Ihrer neuen Vorlage verwendet wird. Durch die Auswahl von Window: Window wird die Vorlage für alle ImageButton-Steuerelemente im Fenster sichtbar.

4. Klicken Sie auf OK.

   Sie haben jetzt die standardmäßige Steuerelementvorlage aller ImageButton-Elemente kopiert und die Kopie als neues ControlTemplate-Objekt mit dem Namen ImageButtonStyle gespeichert. Diese neue Vorlage wurde im Ressourcenverzeichnis platziert, das Sie im Window-Knoten des Ressourcenpanels anzeigen können.

   Nach dem Erstellen einer neuen Vorlage geht Expression Blend in einen Modus über, in dem Sie die neue Vorlage anzeigen und bearbeiten können. Im Panel Objekte und Zeitachsen gibt das Wort Vorlage oberhalb der neuen Elementstruktur den aktuellen Bereich an, in dem Sie gerade die Bearbeitung ausführen. Die Vorlage enthält ein ContentPresenter-Element, das automatisch den Wert der Content-Eigenschaft (Inhalt) des ImageButton-Steuerelements anzeigt, das diese Vorlage verwendet.

   Tipp:

   Klicken Sie auf die Option Zurück zum Anfang, die sich oberhalb der Elementstruktur neben dem Wort ImageButtonStyle befindet, um den Vorlagenbearbeitungsmodus zu verlassen und in den Bereich Ihres Dokuments zurückzukehren. Klicken Sie mit der rechten Maustaste auf das Element, dessen Vorlage Sie im Panel Objekte und Zeitachsen bearbeiten möchten (in diesem Fall das [ImageButton] "ImageButton"-Element), klicken Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

5. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das ContentPresenter-Objekt, zeigen Sie auf Gruppieren in, und klicken Sie dann auf Grid (Raster).

   Im ContentPresenter -Objekt wird ein untergeordnetes Element eines neuen Grid-Objekts erstellt. Ohne das Grid-Objekt können Sie der Vorlage kein zweites untergeordnetes Element hinzuzufügen, da das Chrome-Objekt nur ein einzelnes untergeordnetes Element aufnehmen kann.

6. Wählen Sie im Panel Objekte und Zeitachsen das Grid-Objekt (Raster) aus, und suchen Sie im Eigenschaftenpanel in der Kategorie Layout nach den Eigenschaften Width (Breite) und Height (Höhe). Klicken Sie neben den einzelnen Eigenschaften auf Erweiterte Eigenschaftenoptionen , und klicken Sie auf Zurücksetzen.

7. Wenn Sie das Raster in zwei Spalten unterteilen möchten, doppelklicken Sie im Panel Objekte und Zeitachsen auf das Grid-Objekt (Raster), um das Raster zu aktivieren. Wählen Sie im Werkzeugpanel das Auswahlwerkzeug aus, und bewegen Sie den Mauszeiger dann über den dicken blauen Linealbereich an der Oberseite des Grid-Objekts (Raster) auf der Zeichenfläche. Ein orangefarbenes Spaltenlineal folgt Ihrem Mauszeiger, um die Stelle anzugeben, an der beim Klicken ein neuer Spaltenunterteiler platziert wird.

   Klicken Sie zum Erstellen eines neuen Spaltenunterteilers in der Mitte des Grid-Objekts (Raster).

   Ein blauer Spaltenunterteiler wird innerhalb des Grid-Objekts (Raster) angezeigt.

8. Wählen Sie im Objektepanel in der Kategorie Steuerelemente die Option Image (Bild)  (klicken Sie auf die Unterkategorie Alle). Aktivieren Sie im Panel Objekte und Zeitachsen das Grid-Element (Raster), und zeichnen Sie innerhalb der rechten Spalte des Grid-Elements ein neues Image (Bild).

9. Wählen Sie im Panel Objekte und Zeitachsen das neue Image-Element (Bild) aus, und wählen Sie im Eigenschaftenpanel die Option Allgemeine Eigenschaften aus. Klicken Sie rechts neben der Source-Eigenschaft auf Erweiterte Eigenschaftenoptionen , zeigen Sie auf Vorlagenbindung, und klicken Sie dann auf Source.

   Sie haben gerade eine Vorlagenbindung der Source-Eigenschaft (Quelle) des Image-Elements (Bild) mit der Source-Eigenschaft (Quelle) des ImageButton-Steuerelements hergestellt, das diese Vorlage verwendet.

10. Sie haben jetzt das Bearbeiten der Vorlage abgeschlossen. Klicken Sie im Panel Objekte und Zeitachsen auf Zurück zumAnfang, um den Bereich des Stammelements zu verlassen.

11. Suchen Sie bei ausgewähltem ImageButton-Element (im Panel Objekte und Zeitachsen) im Eigenschaftenpanel in der Kategorie Sonstiges nach der Source-Eigenschaft (Quelle), und legen Sie hierfür einen Pfad zu einer Bilddatei auf Ihrem Computer fest.

    Das Bild wird auf der rechten Seite des ImageButton-Steuerelements angezeigt.

So wenden Sie den Stil auf ein anderes benutzerdefiniertes Steuerelement an

1. Wählen Sie im Objektepanel in der Kategorie Projekt das ImageButton-Steuerelement aus. Zeichnen Sie ein neues ImageButton-Steuerelement auf der Zeichenfläche.

2. Klicken Sie mit der rechten Maustaste auf das neue ImageButton-Steuerelement, klicken Sie auf Vorlage bearbeiten, klicken Sie auf Ressource anwenden, und klicken Sie dann auf den Namen Ihres Stils (ImageButtonStyle).

   ImageButtonStyle wird auf das neue ImageButton-Steuerelement angewendet. Suchen Sie nach der Source-Eigenschaft (Quelle) in der Kategorie Sonstiges des Eigenschaftenpanels, und legen Sie hierfür einen Pfad zu einer Bilddatei auf Ihrem Computer fest.

   Hinweis:
   Alternativ könnten Sie der Zeichenfläche ein ImageButton-Steuerelement hinzufügen, auf das bereits mithilfe Ihrer Vorlage ein Stil angewendet wurde. Wählen Sie im Objektepanel in der Kategorie Stile den Stil ImageButtonStyle aus, und zeichnen Sie dann das ImageButton-Steuerelement, auf das der Stil angewendet wurde, auf der Zeichenfläche.

Erweitert: Anwenden von Beschreibungen auf die benutzerdefinierte Eigenschaft

1. Fügen Sie am Anfang der CodeBehind-Datei (Window1.xaml.cs) einen Verweis auf den Namespace System.ComponentModel ein.

   Die unten verwendeten Attribute Description und Category werden in diesem Namespace definiert.

2. Fügen Sie die folgende Zeile (fett formatiert) vor der Klassendefinition ein:

   [Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")]
   public class ImageButton : Button
   

   <Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")> _
   Class ImageButton
   

3. Fügen Sie die folgende Zeile (fett formatiert) vor der benutzerdefinierten Eigenschaftendefinition ein:

   [Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")] 
       public ImageSource Source
   

   <Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")> _ 
       Public Property Source() As ImageSource
   

   Mit dem Category-Attribut (Kategorie) wird konfiguriert, an welcher Stelle die Eigenschaft im Eigenschaftenpanel angezeigt wird.

4. Erstellen Sie Ihr Projekt neu (STRG+UMSCHALT+B).

   Jetzt wird die Source-Eigenschaft (Quelle) für das ImageButton-Steuerelement im Eigenschaftenpanel in der Kategorie Allgemeine Eigenschaften angezeigt. Die Beschreibungen werden in QuickInfos angezeigt, wenn Sie den Mauszeiger über die Eigenschaft oder im Objektepanel über das Steuerelement bewegen.

Erweitert: Konfigurieren des Steuerelements zum Anzeigen eines Standardbilds

Sie können dem Konstruktor jedes benutzerdefinierten Steuerelements Code hinzufügen, mit dem eine Eigenschaft auf einen Standardwert festgelegt wird, wenn das Steuerelement auf der Zeichenfläche und somit im Designmodus gezeichnet wird. Wenn Sie eine Eigenschaft mit dem folgenden Verfahren festlegen, wirkt sich dies nur auf die Darstellung auf der Zeichenfläche aus. Beim Ausführen der Anwendung bleibt die Darstellung hingegen unverändert. Dies ist nützlich, wenn für Ihr Steuerelement im Designmodus kein Inhalt verfügbar ist, jedoch beim Ausführen der Anwendung zur Verfügung steht. Dies ist beispielsweise dann der Fall, wenn der Inhalt aus einer Datenbank oder von einem Webdienst stammt. In diesem Fall wird die Source-Eigenschaft (Quelle) eines ImageButton-Steuerelements auf der Zeichenfläche auf den Namen einer Bilddatei in Ihrem Projekt festgelegt, bis eine explizite Festlegung erfolgt.

1. Fügen Sie in der CodeBehind-Datei (Window1.xaml.cs) die folgenden Codezeilen (fett formatiert) nach der Eigenschaftsdefinition ein:

   Hinweis:
   Ändern Sie den Dateinamen (Sunset.jpg) im folgenden Code in den Namen einer Bilddatei in Ihrem Projekt. Klicken Sie im Projektpanel mit der rechten Maustaste auf den Projektnamen, und klicken Sie auf Vorhandenes Element hinzufügen, um dem Projekt eine Bilddatei hinzuzufügen.

   public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));
   
   // Constructor:  
   public ImageButton()  
   {  
      if (DesignerProperties.GetIsInDesignMode(this))  
      {  
         this.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));  
      }  
   }  
   Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))
   
   Public Sub New()  
       If DesignerProperties.GetIsInDesignMode(Me) Then  
           Me.Source = New BitmapImage(New Uri("Sunset.jpg", UriKind.Relative))  
       End If  
   End Sub  
   

2. Erstellen Sie Ihr Projekt neu (STRG+UMSCHALT+B).

   Wenn Sie der Zeichenfläche jetzt ein ImageButton-Steuerelement hinzufügen, das den von Ihnen erstellten Stil verwendet, wird ein Standardbild in der Schaltfläche angezeigt.

   Hinweis:
   Sie können die Source-Eigenschaft im Designmodus auf keinen anderen Wert festlegen.