Weiterführende Themen: Erstellen eines benutzerdefinierten WPF-Steuerelements

In Microsoft Expression Blend steht Ihnen eine Reihe verschiedener Systemsteuerelemente und einfacher Stile zur Verfügung, die Sie in Ihren Windows Presentation Foundation-Anwendungen (WPF) 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.

Hinweis:

Dieses Thema enthält Informationen zu Windows Presentation Foundation-Anwendungen. Informationen zu Microsoft Silverlight 1.0 finden Sie unter Silverlight 1.0 - Übersicht und im Silverlight-Trainingscenter (möglicherweise in englischer Sprache). Darüber hinaus sind Silverlight 1.0-Beispiele im Lieferumfang von Expression Blend 2 enthalten, von denen einige JavaScript-Klassen zur Definition von wiederverwendbaren Objekten verwenden. Klicken Sie im Menü Hilfe auf Willkommenseite, und wählen Sie dann die Registerkarte Beispiele aus. Bei den Beispielen MagnifyingGlass, ButtonGallery und BlendPlayer handelt es sich um Silverlight 1.0-Beispiele.

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 daher keine benutzerdefinierten Eigenschaften aufweist, finden Sie unter Weiterführende Themen: Erstellen von WPF-Benutzersteuerelementen.)

Weitere Informationen zu benutzerdefinierten Steuerelementen einschließlich XAML- und Code-Beispielen finden Sie unter Übersicht über das Erstellen von Steuerelementen und DependencyProperty-Klasse im Windows Presentation Foundation-Bereich von MSDN (möglicherweise in englischer Sprache).

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.

   Hinweis:

   Die CodeBehind-Datei wird in Microsoft Visual Studio 2008 geöffnet (falls installiert). Anderenfalls wird die CodeBehind-Datei in der Anwendung geöffnet, die der Dateierweiterung der CodeBehind-Datei zugeordnet ist. Wenn Sie beispielsweise eine CS- oder VB-Datei im Editor geöffnet haben, wird die Datei von Expression Blend im Editor geöffnet. Hilfe zum Öffnen von CodeBehind-Dateien finden Sie unter Bearbeiten einer CodeBehind-Datei.

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)); 
   }
   

   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))
   End Class
   

3. Speichern Sie die geänderte CodeBehind-Datei, und schließen Sie dann Visual Studio oder die jeweilige Anwendung, die Sie zum Bearbeiten der Datei verwendet haben.

   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 CLR-Eigenschaft mit einer registrierten Abhängigkeitseigenschaft versehen wird, kann WPF Ihrer Eigenschaft eine Vielzahl von Diensten bereitstellen. Diese Dienste umfassen Gestaltung, Datenbindung, Vererbung von Werten, Standardwerte und Animationen. In WPF steht außerdem ein Feature namens Vorlagenbindung zur Verfügung, in dem 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, sodass das neue ImageButton-Steuerelement in der Objektbibliothek angezeigt wird. Klicken Sie im Menü Projekt von Expression Blend auf Projekt erstellen (oder drücken Sie STRG+UMSCHALT+B). Überprüfen Sie, ob das Erstellen ohne Fehler abgeschlossen wurde.

5. Wechseln Sie wieder zum Bearbeiten von Window1.xaml in Expression Blend.

6. Klicken Sie in der Werkzeugpalette auf der linken Seite von Expression Blend auf die Schaltfläche Objektbibliothek.

   Hierdurch wird die Objektbibliothek geöffnet, in der Ihnen alle Steuerelemente, Panels und Elemente angezeigt werden, die Sie in Ihrem Dokument platzieren können.

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

   Das Symbol für die Werkzeugpalette oberhalb der Schaltfläche Objektbibliothek 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 dann auf der Registerkarte Benutzerdefinierte Steuerelemente der Objektbibliothek angezeigt, wenn Sie Ihrem Projekt den Quellcode hinzugefügt und das Projekt erstellt haben (STRG+UMSCHALT+B).

8. Zeichnen Sie bei ausgewähltem Symbol ImageButton in der Werkzeugpalette ein ImageButton-Steuerelement, indem Sie auf die Zeichenfläche klicken und ein BoundingBox-Element innerhalb des Dokuments zeichnen.

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

Nach oben

So ändern Sie den Stil des benutzerdefinierten Steuerelements

1. Klicken Sie mit der rechten Maustaste auf das neue ImageButton-Steuerelement, klicken Sie auf Steuerelementteile bearbeiten (Vorlage), 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.

   Durch das Erstellen einer neuen Vorlage geht Expression Blend in einen Modus über, in dem Sie die neue Vorlage anzeigen und bearbeiten können. Im Interaktionspanel unter 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 Schaltfläche 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 im Interaktionspanel mit der rechten Maustaste unter Objekte und Zeitachsen auf das Element, dessen Vorlage Sie bearbeiten möchten (in diesem Fall das [ImageButton] "ImageButton"-Element), klicken Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

5. Klicken Sie unter 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. Suchen Sie bei ausgewähltem Grid-Objekt (Raster) unter Objekte und Zeitachsen nach den Eigenschaften Width (Breite) und Height (Höhe) in der Kategorie Layout des Eigenschaftenpanels. Klicken Sie auf die Schaltfläche Erweiterte Eigenschaftenoptionen  neben jeder einzelnen Eigenschaft, und klicken Sie auf Zurücksetzen.

7. Wenn Sie das Raster in zwei Spalten unterteilen möchten, doppelklicken Sie auf das Grid-Objekt (Raster) unter Objekte und Zeitachsen, um das Raster zu aktivieren, und bewegen Sie dann bei ausgewähltem Auswahlwerkzeug in der Werkzeugpalette den Mauszeiger ü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 das Image-Steuerelement von der Registerkarte Steuerelemente der Objektbibliothek aus (aktivieren Sie das Kontrollkästchen Alles anzeigen). Zeichnen Sie bei aktiviertem Grid-Element (Raster) unter Objekte und Zeitachsen im Interaktionspanel ein neues Image-Element (Bild) innerhalb der rechten Spalte des Grid-Elements (Raster).

9. Wählen Sie das neue Image-Element (Bild) unter Objekte und Zeitachsen aus, und suchen Sie unter Allgemeine Eigenschaften im Eigenschaftenpanel. Klicken Sie rechts neben der Source-Eigenschaft auf die Schaltfläche 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 unter Objekte und Zeitachsen auf Zurück zumAnfang, um den Bereich des Stammelements zu verlassen.

11. Suchen Sie bei ausgewähltem ImageButton-Element unter Objekte und Zeitachsen 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.

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

Nach oben

So wenden Sie den Stil auf ein anderes benutzerdefiniertes Steuerelement an

1. Wählen Sie auf der Registerkarte BenutzerdefinierteSteuerelemente der Objektbibliothek 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 Steuerelementteile bearbeiten (Vorlage), 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 in der Objektbibliothek auf der Registerkarte Lokal definierter Stil den Stil ImageButtonStyle aus, und zeichnen Sie dann das ImageButton-Steuerelement, auf das der Stil angewendet wurde, auf der Zeichenfläche.

Nach oben

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 in der Kategorie Allgemeine Eigenschaften des Eigenschaftenpanels angezeigt. Die Beschreibungen werden in QuickInfos angezeigt, wenn Sie den Mauszeiger über die Eigenschaft oder das Steuerelement in der Objektbibliothek bewegen.

Nach oben

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 mit der rechten Maustaste im Projektpanel unter Dateien 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 IfEnd 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.

Nach oben