Erstellen einer Schaltfläche aus einem Objekt

Sie können die Option Schaltfläche erstellen in Microsoft Expression Blend verwenden, um aus jedem Objekt auf der Zeichenfläche eine Schaltfläche zu erstellen. Als Objekte können beispielsweise Bilder oder Formen verwendet werden. Die Menüoption Schaltfläche erstellen umschließt das Objekt in einer Stilressource, die Sie auf ein beliebiges anderes Button-Objekt anwenden 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 Erstellen eines neuen Dokuments oder Projekts.

2. Zeichnen Sie auf der Zeichenfläche einen Kreis mithilfe des Ellipsenwerkzeugs in der Werkzeugpalette. 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. Wählen Sie im Interaktionspanel unter Objekte und Zeitachsen die Ellipse aus. Klicken Sie dann im Menü Werkzeuge auf Schaltfläche erstellen, um die Ellipse in eine Schaltfläche zu konvertieren. Das Dialogfeld Ressource "Style" erstellen wird geöffnet.

4. Wählen Sie unter Ressourcenname (Schlüssel) das erste Optionsfeld aus (Standardeinstellung), und geben Sie dann einen Namen ein, der zum Identifizieren des Schaltflächenstils 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.

5. 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.

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

   Beachten Sie, dass unter Objekte und Zeitachsen das Ellipsenobjekt in ein Schaltflächenobjekt konvertiert wird, dessen Stil auf Ihren neuen Schaltflächenstil 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

   

Nach oben

So ändern Sie den Stil der Schaltfläche

1. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das neue Schaltflächenobjekt, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um den gerade erstellten Schaltflächenstil zu ändern.

   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 des Stils geöffnet, von dem aus Sie zum Bearbeitungsbereich der Steuerelementvorlage wechseln können, indem Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das Stilobjekt klicken, auf Steuerelementteile bearbeiten (Vorlage) zeigen und dann auf Vorlage bearbeiten klicken. Sie können den Bearbeitungsbereich einer Steuerelementvorlage schließen, indem Sie unter Objekte und Zeitachsen auf die Schaltfläche Zurück zum Anfang  klicken. Wenn Sie den Bearbeitungsbereich der Steuerelementvorlage vom Bearbeitungsbereich des Stils aufgerufen haben, kehren Sie zum Stil zurück. Klicken Sie nochmals auf die Schaltfläche Bereich nach oben, um zum Bearbeitungsbereich des Dokuments zurückzukehren.

   Tipp:

   Bei Verwendung der Menüoption Schaltfläche erstellen wird das ursprüngliche Objekt (die Ellipse) von einer Stilressource 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 Zustände, 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 Interaktionspanel unter Auslöser die gewünschten Zustände 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 unter Objekte und Zeitachsen die Ellipse aus, und ändern Sie dann im Eigenschaftenpanel unter Darstellung die Fill-Eigenschaft (Füllung) der Ellipse in eine andere Farbe. Beachten Sie, dass eine neue Eigenschaftenänderung für ellipse.Fill unter Auslöser unter Eigenschaften wenn aktiv hinzugefügt wird, wie aus dem folgenden Bild ersichtlich ist.

   Hinweis:
   Möglicherweise müssen Sie die Größe des Bereichs Auslöser anpassen, um den Abschnitt Eigenschaften wenn aktiv anzuzeigen. Durch Klicken und Ziehen der Rahmen des Bereichs und des Rahmens innerhalb des Bereichs 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 Zustand 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 unter 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 Auslöser und Benutzerinteraktivität.

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

6. Klicken Sie auf im Menü Projekt auf Projekt testen (oder drücken Sie F5), um die Zustände zu testen, und überprüfen Sie dann, ob die Schaltflächenzustände ordnungsgemäß funktionsfähig sind. Beispielsweise sollte sich die Füllfarbe ändern, wenn Sie den Mauszeiger über die Schaltfläche bewegen.

Nach oben

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 einen Kreis mithilfe des Button-Steuerelements (Schaltfläche) in der Werkzeugpalette.

3. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das neue Button-Objekt, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), zeigen Sie auf Ressource anwenden, und wählen Sie dann in der Liste Ihren Schaltflächenstil aus.

   Sie können auch die Befehle Stil bearbeiten und Steuerelementteile bearbeiten (Vorlage) im Menü Objekt verwenden, um eine Stilressource anzuwenden.

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

   

Nach oben

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

• Da der Schaltflächenstil eine Ressource ist, können Sie ihn wie jede andere Ressource behandeln. Weitere Informationen zum Entfernen oder Ändern von Stilressourcen finden Sie in den Themen zu Vorgehensweisen unter Ressourcen.

Nach oben

Siehe auch

Konzepte

Erstellen von Steuerelementen aus vorhandenen Objekten