Weiterführende Themen: Erstellen von WPF-Benutzersteuerelementen

Wenn Sie eine wiederverwendbare Komponente entwerfen möchten, die der Zeichenfläche wie ein Systemsteuerelement hinzugefügt werden kann, können Sie ein Benutzersteuerelement in Microsoft Expression Blend erstellen. Benutzersteuerelemente können wie eine Windows Presentation Foundation-Anwendung (WPF) andere Steuerelemente, Ressourcen und Animationszeitachsen enthalten. Das Stammelement ist jedoch kein Window-Element, sondern ein UserControl- oder ein Page-Element.

In den folgenden Verfahren wird Ihnen gezeigt, wie Sie ein Steuerelement erstellen können, das einige Animationen enthält, und wie Sie dieses Steuerelement in einem anderen Dokument instanziieren können. (Ein Beispiel für das Erstellen eines benutzerdefinierten Steuerelements mit Code, das auf einem vorhandenen Systemsteuerelement basieren kann, finden Sie unter Weiterführende Themen: Erstellen eines benutzerdefinierten WPF-Steuerelements.)

Sie finden weitere Beispiele für Benutzersteuerelemente in den Beispielen, die im Lieferumfang von Expression Blend enthalten sind. Klicken Sie im Menü Hilfe auf Willkommenseite, wählen Sie die Registerkarte Beispiele aus, und klicken Sie dann auf den Namen des Beispiels, wie z. B. SmoothBlends. Weitere Informationen zu Benutzersteuerelementen, einschließlich XAML- und Codebeispielen, finden Sie unter Erstellen von Steuerelementen (Übersicht) im Abschnitt Windows Presentation Foundation in MSDN (möglicherweise in englischer Sprache).

Hinweis:

Benutzersteuerelemente werden in Microsoft Silverlight 1.0 nicht unterstützt. Sie können jedoch benutzerdefinierte JavaScript-Klassen erstellen, die programmgesteuert instanziiert werden können. Ein Beispiel finden Sie in der Button-Klasse im ButtonGallery-Beispiel. Klicken Sie hierfür im Hilfemenü auf Willkommenseite und dann auf Samples. Benutzersteuerelemente werden in Silverlight 2 unterstützt. Weitere Informationen finden Sie unter Erstellen eines neuen Benutzersteuerelements in einem Silverlight 2-Projekt.

So definieren Sie das Steuerelement

1. Führen Sie in Expression Blend einen der folgenden Schritte aus:

   • Zum Erstellen eines Benutzersteuerelements in einer DLL-Datei klicken Sie im Menü Datei auf Neues Projekt, wählen Sie dann den Projekttyp WPF-Steuerelementbibliothek aus, und geben Sie dem Projekt einen Namen. Wählen Sie anschließend die Sprache für die CodeBehind-Datei des Hauptdokuments aus, und klicken Sie auf OK. Mit dieser Möglichkeit können Sie die Implementierung des Benutzersteuerelements ausblenden, falls Sie es weitergeben. Durch Erstellen einer Vorlage können Sie auch die Darstellung des Benutzersteuerelements ändern, wenn es in einer anderen Anwendung gezeichnet wird.

   • Klicken Sie im Menü Datei auf Neues Element (STRG+N), wählen Sie die Vorlage UserControl aus, und geben Sie der Datei einen Namen. Klicken Sie dann auf OK, um ein Steuerelement in einer XAML-Datei in einem vorhandenen Projekt zu erstellen. Diese Option ist einfacher zu ändern, da sich das Benutzersteuerelement im selben Projekt befindet, in dem Sie es verwenden. Sie können daher den Schritt der Aktualisierung eines Verweises auf eine DLL überspringen.

   In Expression Blend wird das Benutzersteuerelement zur Bearbeitung geöffnet.

2. Entscheiden Sie, welche Art von Panel Sie als Stammelement verwenden möchten. Standardmäßig wird ein Grid-Element mit dem Namen LayoutRoot verwendet, mit dem Animationen eine Größenänderung vornehmen können, wenn das Benutzersteuerelement in ein anderes Element gezeichnet wird. Sie könnten dies in ein Canvaspanel oder ein anderes Panel ändern. Klicken Sie hierzu mit der rechten Maustaste unter Objekte und Zeitachsen auf das LayoutRoot-Element, zeigen Sie auf Layouttyp ändern, und klicken Sie dann auf den Namen des Panels.

3. Wählen Sie in der Werkzeugpalette die Steuerelemente und Zeichenwerkzeuge aus, die Sie im Steuerelement verwenden möchten, und zeichnen Sie diese dann auf die Zeichenfläche. Ändern Sie sie mithilfe der Eigenschaften im Eigenschaftenpanel. Steuerelemente können alle Elemente enthalten, die eine WPF-Anwendung enthalten kann.

4. Erstellen Sie unter Objekte und Zeitachsen die gewünschten Animationszeitachsen. Ein Beispiel finden Sie unter Erstellen einer einfachen Animation.

   Hinweis:

   Berücksichtigen Sie beim Festlegen von Keyframes die Zeitplanung aller Animationen in Ihrer Anwendung sowie den Zeitpunkt, zu dem die Animation im Benutzersteuerelement ausgeführt wird. Betrachten Sie beispielsweise eine Anwendung, bei der zuerst ein Begrüßungsbildschirm animiert wird, gefolgt von einer weiteren Animation, bei welcher die Benutzeroberfläche eingeblendet wird. Sie können jede Animation in einem eigenen Benutzersteuerelement speichern. Planen Sie jedoch zu Beginn der zweiten Animation ausreichend Zeit ein, sodass die Animation des Begrüßungsbildschirms beendet werden kann.

   Tipp:

   Legen Sie einen Keyframe auf die Markierung bei 0 Sekunden fest, wenn Sie ermöglichen möchten, dass die Animation mehrfach gestartet werden kann. Sie erstellen beispielsweise eine Animationszeitachse, die ein Objekt von links nach rechts verschiebt und durch einen Doppelklick ausgelöst wird, legen jedoch keinen Keyframe an der Markierung bei 0 Sekunden fest. Die Animation wird in diesem Fall bei nachfolgenden Doppelklicks nur einmal ausgelöst, weil es sich um eine Übergabeanimation handelt. Informationen zu Übergabeanimationen finden Sie unter "Verwenden von mehreren und überlappenden Animationszeitachsen" in der Animationen (Übersicht).

5. Konfigurieren Sie unter Auslöser alle Eigenschafts- oder Ereignisauslöser, mit denen Ihre Anwendung auf Benutzerinteraktion reagiert. Ein Beispiel finden Sie unter Hinzufügen oder Entfernen eines Auslösers.

   Hinweis:

   Wenn Sie sich entscheiden, welche Auslöser Sie im Benutzersteuerelement festlegen möchten, berücksichtigen Sie alle Eigenschaften und Auslöser, die Sie Ihrem Steuerelement zur Verfügung stellen möchten. Betrachten Sie beispielsweise eine Anwendung, die eine Schaltfläche enthält, sowie eine Animation, die in einem Steuerelement enthalten ist. Es ist in Expression Blend nicht möglich, dem Benutzersteuerelement einen Auslöser hinzuzufügen, mit dem die Animationszeitachse gestartet wird, sobald auf die Schaltfläche geklickt wird. Es sei denn, die Schaltfläche ist ebenfalls Teil des Benutzersteuerelements. Außerdem können Sie nur Daten zwischen Eigenschaftswerten binden, wenn sich beide Eigenschaften im selben Steuerelement befinden. Sie können diese Einschränkung programmgesteuert in CodeBehind-Dateien umgehen. Sie haben auch die Möglichkeit, eine Vorlage mit Auslösern und Animationszeitachsen für das Steuerelement zu erstellen, nachdem es einem Dokument hinzugefügt wurde. Weitere Informationen zu Benutzersteuerelementen mit einer CodeBehind-Datei finden Sie unter Erstellen von Steuerelementen (Übersicht) im Abschnitt Windows Presentation Foundation in MSDN (möglicherweise in englischer Sprache). Weitere Informationen zum Ändern einer CodeBehind-Datei in Expression Blend finden Sie unter Bearbeiten einer CodeBehind-Datei.

6. Wenn Sie das Erstellen des Benutzersteuerelements abgeschlossen haben, stellen Sie sicher, dass Sie die Größe des Stammelements in Ihrem Dokument ändern, sodass es nur noch die unbedingt erforderliche Mindestgröße aufweist. Wählen Sie unter Objekte und Zeitachsen den Dokumentstamm aus, und passen Sie dann mit dem Auswahlwerkzeug die Größe des Dokumentenfensters mit den blauen Funktionsindikatoren auf der Zeichenfläche an.

7. Wenn das Benutzersteuerelement von Mausklicks oder Interaktion mit dem leeren Bereich im Steuerelement abhängt, legen Sie für den Hintergrund des Stammelements einen Pinsel mit Volltonfarbe fest. Auf diese Weise benötigt das Steuerelement auf der Zeichenfläche Speicherplatz, wenn es einem anderen Dokument hinzugefügt wird. Ändern Sie in der Kategorie Pinsel des Eigenschaftenpanels die Background-Eigenschaft (Hintergrund) des Stammelements in einen Pinsel mit Volltonfarbe. Wenn Sie den Hintergrund weiterhin unsichtbar anzeigen möchten, ändern Sie die Alpha-Untereigenschaft in 0.

8. Wenn das Benutzersteuerelement von einer bestimmten Höhe oder Breite abhängig ist, legen Sie die MinHeight-Eigenschaft (Minimale Höhe) und die MinWidth-Eigenschaft (Minimale Breite) im Eigenschaftenpanel in der Kategorie Layout im Abschnitt Erweitert  fest.

9. Wenn Sie möchten, dass beim Zeichnen des Steuerelements in ein Dokument eine Größenänderung möglich sein soll, stellen Sie sicher, dass die Eigenschaften Width und Height aller Objekte im Steuerelement auf Auto zurückgesetzt sind.

10. Speichern Sie Ihre Dateien und das Projekt, indem Sie im Menü Datei auf Alles speichern klicken.

11. Wenn es sich bei Ihrem Projekt um eine Steuerelementbibliothek handelt, erstellen Sie das Projekt zum Erstellen der DLL-Datei. Klicken Sie hierzu im Menü Projekt auf Projekt erstellen (STRG+UMSCHALT+B). Die DLL-Datei wird im Ordner \bin\Debug am selben Ort wie Ihr Projekt erstellt und gespeichert.

Nach oben

So instanziieren Sie das Steuerelement in einem anderen Dokument

1. Wenn Sie eine Steuerelementbibliothek erstellt haben, fügen Sie einen Verweis auf die DLL-Datei in dem Projekt hinzu, in dem Sie das Benutzersteuerelement verwenden möchten. Klicken Sie im Menü Projekt auf Verweis hinzufügen, wechseln Sie zur der DLL-Datei für das Steuerelement im Fenster Verweis hinzufügen, und klicken Sie dann auf Öffnen.

2. Erstellen Sie das aktuelle Projekt (STRG+UMSCHALT+B), um das Benutzersteuerelement in der Objektbibliothek für die Auswahl zur Verfügung zu stellen.

3. Wählen Sie auf der Registerkarte Benutzerdefinierte Steuerelemente der Objektbibliothek das Benutzersteuerelement aus. Das Symbol für das Steuerelement wird oberhalb der Schaltfläche Objektbibliothek angezeigt.

4. Verwenden Sie die Maus, um das Benutzersteuerelement auf der Zeichenfläche zu zeichnen.

5. Testen Sie das Projekt (F5), um das Steuerelement in Aktion anzuzeigen.

Nach oben

So bearbeiten Sie ein Steuerelement nach dem Hinzufügen zu einem anderen Dokument

Wenn Sie ein Benutzersteuerelementdokument anstelle einer Steuerelementbibliothek (DLL) erstellt haben, können Sie den Bearbeitungsmodus für das Steuerelement über das Kontextmenü aufrufen.

1. Klicken Sie mit der rechten Maustaste auf der Zeichenfläche oder unter Objekte und Zeitachsen auf das Benutzersteuerelement, und klicken Sie dann auf Steuerelement bearbeiten. Das Steuerelementdokument wird in Expression Blend zum Bearbeiten geöffnet.

2. Nachdem Sie die Änderungen vorgenommen haben, speichern Sie die Datei, und wechseln Sie dann zurück zum Hauptdokument.

Wenn Sie ein Steuerelement in einem Steuerelementbibliothek-Projekt erstellt haben, sollten Sie das ursprüngliche Steuerelementbibliothek-Projekt bearbeiten und dann die DLL-Datei neu erstellen.

Nach oben