Erstellen von Steuerelementen aus vorhandenen Objekten

Sie können mit der Funktion Steuerelement erstellen in Microsoft Expression Blend eine Steuerelementvorlage aus beliebigen Objekten auf der Zeichenfläche erstellen. Das Werkzeug Steuerelement erstellen umschließt das Objekt in einer Formatvorlagenressource, die Sie wieder verwenden können.

Tipp:

Bei einem Objekt handelt es sich in Expression Blend um alle Elemente, die Sie auf der Zeichenfläche platzieren können. Dies umfasst Layoutpanels, Formen, Textsteuerelemente, Bilder, Schaltflächen, Steuerelementvorlagen oder jegliche anderen Gestaltungselemente der Benutzeroberfläche. Durch das Platzieren eines Elements der Benutzeroberfläche auf der Zeichenfläche wird eine Objektinstanz des Elements in Ihrer Anwendung erstellt.

So erstellen Sie eine Schaltfläche aus einer Ellipse

1. Öffnen oder erstellen Sie ein neues Projekt, wenn Sie dies noch nicht getan haben.

   Weitere Informationen finden Sie unter Erstellt ein neues Projekt.

2. Zeichnen Sie auf der Zeichenfläche einen Kreis mithilfe des Ellipsenwerkzeugs im Werkzeugpanel. Sie können die Darstellung der Ellipse durch Ändern der Eigenschaften unter Pinsel im Eigenschaftenpanel ändern, um sie auffälliger zu gestalten.

   Weitere Informationen finden Sie unter Anwenden eines Pinsels auf die Füllung oder Striche eines Objekts.

3. Klicken Sie mit der rechten Maustaste auf die Ellipse, zeigen Sie auf Gruppieren in, und klicken Sie anschließend auf den Namen eines Layoutcontainers, wie z. B. "Grid".

4. Nachdem Sie im Panel Objekte und Zeitachsen das Raster ausgewählt haben, klicken Sie im Menü Werkzeuge auf Steuerelement erstellen, um das Raster in eine Schaltfläche zu konvertieren.

   Das Dialogfeld Steuerelement erstellen wird geöffnet.

5. Klicken Sie unter Steuerelementtyp auf den Steuerelementtyp, den Sie erstellen möchten, beispielsweise das Steuerelement Schaltfläche.

6. Wählen Sie unter Name (Schlüssel) das erste Optionsfeld aus (Standardeinstellung) und geben Sie anschließend einen Namen ein, der zum Identifizieren der Schaltflächen-Formatvorlage verwendet werden soll. Alternativ können Sie auch die Option Auf alle Objekte anwenden auswählen, damit der Stil auf alle Schaltflächen auf der Zeichenfläche angewendet wird, die noch nicht über einen Namen auf einen Stil verweisen.

7. Klicken Sie unter Definieren in auf die Option, die dem Ort entspricht, an dem Sie den Schaltflächenstil definieren möchten. Klicken Sie auf Anwendung, um den Schaltflächenstil in allen anderen Dokumenten in Ihrer Anwendung verfügbar zu machen. Klicken Sie auf Dieses Dokument (Window: Window), um den Schaltflächenstil nur für das aktuelle Dokument verfügbar zu machen. Klicken Sie auf Ressourcenverzeichnis, um den Schaltflächenstil in einem Ressourcenverzeichnis in Ihrer Anwendung zu definieren.

8. Klicken Sie auf OK, um das Dialogfeld Ressource "Style" erstellen zu schließen und den Schaltflächenstil zu erstellen.

   Beachten Sie, dass in Panel Objekte und Zeitachsen das Ellipsenobjekt in ein Schaltflächenobjekt konvertiert wird, dessen Formatvorlage auf die neue Schaltflächen-Formatvorlage festgelegt ist.

   Außerdem wird der Schaltflächenstil im Ressourcenpanel in dem Knoten aufgeführt, in dem er definiert wurde (beispielsweise im Knoten Fenster).

   Der neue Schaltflächenstil im Ressourcenpanel von Expression Blend

   

So ändern Sie den Stil der Schaltfläche

1. Um die gerade erstellte Schaltflächen-Formatvorlage zu ändern, klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf das neue Schaltflächenobjekt, zeigen Sie auf Vorlage bearbeiten, und klicken Sie anschließend auf Aktuellen bearbeiten.

   Die Zeichenfläche wechselt zum Bearbeitungsbereich der Steuerelementvorlage.

   Tipp:

   Zum Aufrufen des Bearbeitungsbereichs einer Steuerelementvorlage stehen Ihnen mehrere Methoden zur Verfügung: Sie können das Schaltflächenformat beispielsweise auf der Registerkarte Ressourcen anzeigen und dann auf die Schaltfläche Ressource bearbeiten neben dem Ressourcennamen klicken. Dadurch wird der Bearbeitungsbereich der Formatvorlage geöffnet, von dem aus Sie zum Bearbeitungsbereich der Steuerelementvorlage wechseln können, indem Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf das Formatvorlagenobjekt klicken, auf Vorlage bearbeiten zeigen und anschließend auf Aktuellen bearbeiten klicken. Um den Bearbeitungsbereich einer Steuerelementvorlage zu schließen, klicken Sie im Panel Objekte und Zeitachsen auf Zurück zum Anfang. Wenn Sie den Bearbeitungsbereich der Steuerelementvorlage vom Bearbeitungsbereich des Stils aufgerufen haben, kehren Sie zum Stil zurück. Klicken Sie erneut auf die Schaltfläche Bereich nach oben, um zum Bearbeitungsbereich des Dokuments zurückzukehren.

   Tipp:

   Bei Verwendung des Werkzeugs Steuerelement erstellen wird das ursprüngliche Objekt (die Ellipse) von einer Formatvorlagenressource umschlossen, die eine Steuerelementvorlage enthält. Der Stil definiert die Eigenschaften, die für das Objekt festgelegt werden, auf welches der Stil angewendet wird (in diesem Fall ein Schaltflächenobjekt). Die Steuerelementvorlage definiert die Status, Struktur und Darstellung des Objekts.

2. Innerhalb der Steuerelementvorlage befindet sich ein Rasterpanel, welches das ursprüngliche Objekt (die Ellipse) und ein ContentPresenter-Element enthält, das den Inhalt des Schaltflächenobjekts anzeigt. Durch das Platzieren Ihres Objekts innerhalb eines Rasterpanels können Sie schnell andere Elemente hinzufügen und anordnen.

   Struktur der Steuerelementvorlage für den neuen Schaltflächenstil

   

   Sie können sehen, wie der Stil und die Steuerelementvorlage miteinander in Beziehung stehen, wenn Sie die Extensible Application Markup Language-Datei ((XAML) anzeigen. Die Struktur des Schaltflächenstils könnte beispielsweise folgendermaßen aussehen:

     <Window.Resources>
       <Style x:Key="ButtonStyle1" ...>  
         <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">  
               <Grid>
                 <Ellipse>
                   ...
                 </Ellipse>
                 <ContentPresenter .../>
               </Grid>
               <ControlTemplate.Triggers>
                 ...
               </ControlTemplate.Triggers>
             </ControlTemplate>  
           </Setter.Value>
         </Setter>
       </Style>  
     </Window.Resources>
   

3. Definieren Sie im Auslöserpanel die gewünschten Status der Schaltfläche. Klicken Sie beispielsweise auf IsMouseOver = True, um die Auslöseraufzeichnung für den Zustand zu aktivieren, in dem der Benutzer den Mauszeiger über die Schaltfläche bewegt. Wählen Sie im Panel Objekte und Zeitachsen die Ellipse aus und ändern Sie im Eigenschaftenpanel unter Darstellung die Fill-Eigenschaft der Ellipse in eine andere Farbe. Beachten Sie, dass eine neue Eigenschaftenänderung für ellipse.Fill im Auslöserpanel unter Eigenschaften, wenn aktiv hinzugefügt wird, wie aus dem folgenden Bild ersichtlich ist.

   Hinweis:
   Möglicherweise müssen Sie die Größe des Auslöserpanels anpassen, um den Abschnitt Eigenschaften, wenn aktiv anzuzeigen. Durch Klicken und Ziehen der Rahmen des Panels und des Rahmens innerhalb des Panels können Sie die Größe anpassen.

   Das Auslöserpanel nach dem Ändern der "Fill"-Eigenschaft (Füllung) für die Ellipse, wenn sich die Maus über der Schaltfläche befindet

   

4. Sie können der Schaltfläche auch eine Animation hinzufügen. Klicken Sie beispielsweise im Auslöserpanel auf IsPressed = True, um die Auslöseraufzeichnung für den Status zu aktivieren, in dem der Benutzer auf die Schaltfläche klickt. Halten Sie beim Ziehen einer Ecke der Ellipse UMSCHALT+ALT gedrückt, während die Ellipse weiterhin im Panel Objekte und Zeitachsen ausgewählt ist. (Durch die Tastenkombination UMSCHALT+ALT wird der Mittelpunkt des Objekts beibehalten.)

   Alternativ können Sie kompliziertere Animationen hinzufügen, indem Sie ein neues Storyboard erstellen und dieses von einem Ereignisauslöser für das IsPressed-Ereignis (Ist gedrückt) auslösen.

   Weitere Informationen finden Sie unter Schreiben von Code, der auf Ereignisse reagiert.

5. Nachdem Sie die Status der Schaltfläche wunschgemäß definiert haben, klicken Sie im Panel Objekte und Zeitachsen auf Zurück zum Anfang , um zum Bearbeitungsbereich des Dokuments zurückzukehren.

6. Um die Status zu testen, klicken Sie auf im Menü Projekt auf Projekt testen (oder drücken Sie F5) und überprüfen Sie dann, ob die Schaltflächenstatus ordnungsgemäß funktionieren. Beispielsweise sollte sich die Füllfarbe ändern, wenn Sie den Mauszeiger über die Schaltfläche bewegen.

So wenden Sie einen Schaltflächenstil auf eine Schaltfläche an

1. Stellen Sie sicher, dass Sie sich im gewünschten Bearbeitungsbereich befinden. Sie können einen Stil auf eine Schaltfläche in jedem Bereich anwenden. Dies schließt auch den Bereich einer Steuerelementvorlage ein.

2. Zeichnen Sie auf der Zeichenfläche eine Schaltfläche mithilfe von Schaltfläche im Werkzeugpanel.

3. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf die neue Schaltfläche, zeigen Sie auf Vorlage bearbeiten, zeigen Sie auf Ressource anwenden, und wählen Sie anschließend in der Liste die Schaltflächen-Formatvorlage aus.

   Sie können auch die Befehle Formatvorlage bearbeiten und Vorlage bearbeiten im Menü Objekt verwenden, um eine Formatvorlagenressource anzuwenden.

   Anwenden des Schaltflächenstils auf ein Schaltflächenobjekt durch Klicken mit der rechten Maustaste

   

So entfernen oder ändern Sie den Stil einer Schaltfläche

• Da die Schaltflächen-Formatvorlage eine Ressource ist, behandeln Sie sie wie jede andere Ressource.

  Weitere Informationen zum Entfernen oder Ändern von Formatvorlagenressourcen finden Sie unter Zurücksetzen einer Eigenschaft auf den Standardwert und Erstellen von wiederverwendbaren Ressourcen.

Siehe auch

Aufgaben

Erstellen von Benutzersteuerelementen aus vorhandenen Objekten

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente

Formatieren der Teile einer Silverlight-Steuerelementvorlage