Weiterführende Themen: Anpassen der Statusanzeige einer SimpleProgressBar-Steuerelementvorlage

Sie können die Darstellung einer Statusanzeige in Microsoft Expression Blend mithilfe der SimpleProgressBar-Steuerelementvorlage auf einfache Weise anpassen. Beachten Sie, dass die SimpleProgressBar-Steuerelementvorlage nur eine horizontal ausgerichtete Statusanzeige unterstützt.

So passen Sie die Statusanzeige einer SimpleProgressBar-Steuerelementvorlage an

1. Zeichnen Sie eine SimpleProgressBar-Steuerelementvorlage auf der Zeichenfläche in Expression Blend.

   Tipp:
   Die Steuerelemente mit einfachem Stil stehen in der Objektbibliothek auf der Registerkarte Steuerelemente unter der Kategorie Simple Styles zur Verfügung. Nachdem Sie ein Steuerelement für einen einfachen Stil in der Liste ausgewählt haben, können Sie es auf der Zeichenfläche zeichnen.

2. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf die Statusanzeige, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, können Sie auf Kopie bearbeiten statt auf Vorlage bearbeiten klicken, um eine neue Vorlage zu erstellen und im Dokument zu speichern. Weitere Informationen zum Erstellen von Kopien finden Sie unter Erstellen einer Ressource.

   Tipp:

   Klicken Sie im Interaktionspanel oberhalb der Elementstruktur auf die Schaltfläche Zurück zum Anfang, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf das Element, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

3. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das PART_Indicator-Element, zeigen Sie auf Layouttyp ändern, und klicken Sie dann auf Grid. Verwenden Sie Ihre Maus auf der Zeichenfläche, oder ändern Sie die Width-Eigenschaft unter Layout im Eigenschaftenpanel, um die Breite des PART_Indicator-Elements zu erhöhen.

4. Doppelklicken Sie unter Objekte und Zeitachsen auf das PART_Indicator-Element, um es zum aktiven Element zu machen.

   Sie können jetzt dem PART_Indicator-Element untergeordnete Elemente hinzufügen, da es sich jetzt um das aktive Element handelt und ein Rasterpanel anstatt eines Rahmens verwendet wird.

5. Doppelklicken Sie in der Werkzeugpalette auf das Ellipsenwerkzeug , um dem PART_Indicator-Element einen Kreis hinzuzufügen und diesen zu füllen. Sie können den Kreis sehen, wenn Sie dessen Breite ändern. Ändern Sie die Farbe des Kreises im Eigenschaftenpanel unter Pinsel. Passen Sie die Größe des Kreises im Eigenschaftenpanel mit den Eigenschaften unter Layout an. Stellen Sie sicher, dass die HorizontalAlignment-Eigenschaft (Horizontale Ausrichtung) auf Stretch festgelegt ist.

6. Wenn Sie einen Bitmapeffekt anwenden möchten, klicken Sie im Eigenschaftenpanel in der Kategorie Darstellung auf die Schaltfläche Erweiterte Eigenschaften einblenden, klicken Sie auf den Dropdownpfeil neben der BitmapEffect-Eigenschaft (Bitmapeffekt), und wählen Sie dann einen Effekt wie Schein nach außen aus.

7. Sie können der CodeBehind-Datei für Ihr Dokument Code hinzufügen, um die Statusanzeige in Aktion zu sehen. Wenn das Dokument beispielsweise den Namen Window1.xaml trägt, handelt es sich bei der CodeBehind-Datei um Window1.xaml.cs oder Window1.xaml.vb. Der Name hängt von der Programmiersprache ab, die Sie zum Erstellen des Projekts ausgewählt haben.

   Klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche Zurück zum Anfang, um zum Bearbeitungsbereich des Dokuments zurückzukehren. Geben Sie dann der Statusanzeige einen Namen wie Statusanzeige1 (eckige Klammern um diesen Namen geben an, dass ein Element noch nicht benannt wurde).

8. Öffnen Sie die Code-Behind-Datei vom Projektpanel aus, und fügen Sie folgenden Code hinzu. Weitere Informationen zum Öffnen einer Code-Behind-Datei finden Sie unter Bearbeiten einer CodeBehind-Datei.

     // Insert code required on object creation below this point.   
       Duration duration = new Duration(System.TimeSpan.FromSeconds(10));
       DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration);
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation); 
   

   ' Insert code required on object creation below this point.
       Dim duration As New Duration(System.TimeSpan.FromSeconds(10))
       Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration)
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)
   

9. Testen Sie die Anwendung (F5), um die Effekte zu sehen.

Siehe auch

Konzepte

SimpleProgressBar-Steuerelementvorlage