Erstellen eines Designs für Steuerelemente in einem Projekt

Sie können die Darstellung von Systemsteuerelementen anpassen, indem Sie statische Ressourcen verwenden, um Vorlagen zu definieren, die auf die Steuerelemente angewendet werden. Beispielsweise können Sie eine Vorlage für eine Schaltfläche erstellen, die zur Konstruktion der Schaltfläche Bilder anstelle von Rechtecken verwendet.

Einzelne Eigenschaften können in statische Ressourcen konvertiert und anschließend auf die Vorlagen und Benutzersteuerelemente angewendet werden, um ein gemeinsames Layout für unterschiedliche Steuerelementvorlagen oder Benutzersteuerelemente zu erreichen. Beispielsweise können sie die Rahmenfarbe einer Schaltflächenvorlage in eine Ressource konvertieren und diese Farbressource daraufhin auf die Rahmeneigenschaft einer Kontrollkästchen-Vorlage oder eines benutzerdefinierten Steuerelements anwenden.

Um Vorlagen und Ressourcen in anderen Projekten wiederzuverwenden, können die Ressourcen in eine Ressourcenverzeichnisdatei verschoben und diese Datei anderen Projekten hinzugefügt werden. Die Ressourcenverzeichnisdatei wird zu einem Repository für das Design der Anwendung.

So erstellen Sie die Vorlage eines Steuerelements

• Zum Anpassen der Vorlage eines beliebigen Steuerelements können die unter Ändern der Darstellung eines Systemsteuerelements je nach Status und Ändern der Übergangszeit zwischen Statusänderungen beschriebenen Verfahren verwendet werden.

  Die Vorlage wird zur Ressource, die im Ressourcenpanel aufgeführt wird.

  Weitere Informationen zum Ändern von Ressourcen nach ihrer Erstellung finden Sie unter Ändern einer Ressource.

So erstellen Sie ein benutzerdefiniertes Steuerelement

• Verwenden Sie die unter Erstellen eines neuen Benutzersteuerelements in einem Projekt beschriebenen Verfahren, um ein benutzerdefiniertes Steuerelement von Grund auf neu zu erstellen.

So konvertieren Sie eine Eigenschaft in eine statische Ressource

1. Wählen Sie auf der Zeichenfläche ein Objekt mit einem Eigenschaftswert aus, den Sie in anderen Steuerelementen ebenfalls verwenden möchten.

2. Suchen Sie in der Eigenschaftenansicht   des Eigenschaftenpanels die Eigenschaft, die Sie wiederverwenden möchten.

   Tipp:
   Mit dem Suchtextfeld im Eigenschaftenpanel können Sie schnell eine Eigenschaft auffinden, indem Sie nach den Zeichen suchen, die im Eigenschaftennamen vorkommen. Der Text, den Sie eingeben, filtert die Liste der Eigenschaften. Klicken Sie neben dem Suchtextfeld auf Löschen , um das Eigenschaftenpanel wiederherzustellen.

3. Führen Sie einen der folgenden Schritte aus:

   • Wenn Sie einen Pinsel wiederverwenden möchten, klicken Sie neben der Pinseleigenschaft (z. B Fill- oder Background-Eigenschaft) auf Erweiterte Eigenschaftenoptionen  und dann auf In neue Ressource konvertieren.

   • Wenn Sie eine auf einen Pinsel angewendete Farbe wiederverwenden möchten, wählen Sie den Pinsel aus, falls es sich um einen Pinsel mit Volltonfarbe  handelt. Falls es sich um einen Farbverlaufspinsel  handelt, wählen Sie den Farbverlaufsstopp  der Farbe aus, die wiederverwendet werden soll. Klicken Sie anschließend auf Farbe in Ressource konvertieren .

     

   • Wenn Sie einen numerischen oder anderen Werttyp verwenden möchten, klicken Sie neben der entsprechenden Eigenschaft auf die Schaltfläche Erweiterte Eigenschaftenoptionen  und dann auf In neue Ressource konvertieren.

     

4. Geben Sie in dem sich öffnenden Dialogfeld Ressource <Typ> erstellen einen aussagekräftigen Namen für die Ressource ein, und klicken Sie dann auf OK.

   Die Ressource wird erstellt und im Ressourcenpanel aufgeführt.

   

   Weitere Informationen zum Ändern von Ressourcen nach ihrer Erstellung finden Sie unter Ändern einer Ressource.

So wenden Sie eine Ressource auf eine andere Eigenschaft an

Es gibt verschiedene Möglichkeiten, eine Ressource auf eine Eigenschaft anzuwenden.

So wenden Sie eine Ressource durch Ziehen aus dem Ressourcenpanel an

1. Ziehen Sie eine Ressource aus dem Ressourcenpanel auf ein Steuerelement auf der Zeichenfläche.

   Ziehen einer Schriftartfamilienressource auf ein Kontrollkästchen-Steuerelement

   

2. Wählen Sie aus dem angezeigten Dropdownmenü die Eigenschaft des Steuerelements aus, die auf die Ressource angewendet werden soll.

   Anwenden einer Schriftartfamilienressource auf die "FontFamily"-Eigenschaft des Kontrollkästchens

   

So wenden Sie eine Ressource mithilfe des Menüs "Erweiterte Eigenschaftenoptionen" an

1. Suchen Sie in der Eigenschaftenansicht  des Eigenschaftenpanels die Eigenschaft aus, die Sie für eine Ressource festlegen möchten.

2. Klicken Sie auf Erweiterte Eigenschaftenoptionen , zeigen Sie auf Lokale Ressource, und wählen Sie den Ressourcennamen aus der angezeigten Dropdownliste aus.

So wenden Sie eine Pinselressource an

1. Wählen Sie in der Eigenschaftenansicht  des Eigenschaftenpanels den Pinsel aus, den Sie für eine Ressource festlegen möchten.

2. Wählen Sie auf der Registerkarte Pinselressourcen  den Namen der Ressource aus.

   

So wenden Sie eine Farbressource an

1. Wählen Sie in der Eigenschaftenansicht  des Eigenschaftenpanels den Pinsel aus, dessen Farbe Sie für eine Ressource festlegen möchten. Wählen Sie den Farbverlaufsstopp  der Farbe aus, falls es sich bei dem Pinsel um einen Farbverlaufspinsel  handelt.

2. Wählen Sie auf der Registerkarte Farbressourcen den Namen der Ressource aus.

   

So wenden Sie eine Vorlage auf ein anderes Steuerelement desselben Typs an

Es gibt verschiedene Möglichkeiten, eine Vorlage auf Steuerelemente anzuwenden.

So wenden Sie eine Vorlage durch Auswählen im Objektepanel und Zeichnen eines neuen Steuerelements an

1. Klicken Sie im Werkzeugpanel auf Objekte .

2. Wählen Sie im Objektepanel in der Kategorie Stile die erstellte Vorlage aus.

3. Zeichnen Sie mithilfe des Zeigers einen Begrenzungsrahmen auf der Zeichenfläche.

   Es wird ein neues Steuerelement gezeichnet, das der ausgewählten Vorlage entspricht. Die Vorlage wird automatisch angewendet.

So wenden Sie eine Vorlage durch Ziehen aus dem Ressourcenpanel an

1. Ziehen Sie eine Vorlagenressource aus dem Ressourcenpanel auf ein Steuerelement auf der Zeichenfläche.

2. Wählen Sie aus der angezeigten Dropdownliste die Style-Eigenschaft aus.

So wenden Sie eine Vorlage mithilfe des Menüs "Erweiterte Eigenschaftenoptionen" an

1. Wählen Sie das Objekt aus, auf das Sie eine Vorlage anwenden möchten.

2. Suchen Sie in der Eigenschaftenansicht  des Eigenschaftenpanels die Style-Eigenschaft.

3. Klicken Sie neben der Style-Eigenschaft auf Erweiterte Eigenschaftenoptionen , zeigen Sie auf Lokale Ressource, und wählen Sie dann den Vorlagennamen aus der angezeigten Dropdownliste aus.

So verschieben Sie Ressourcen in die Datei "App.xaml"

• Wenn Sie bei der Erstellung der Datei App.xaml keine Ressourcen definiert haben, können Sie Ihre Ressourcen dorthin verschieben, indem Sie diese in das Ressourcenpanel ziehen.

  Tipp:
  Wenn Ihre Ressourcen nicht angezeigt werden, müssen Sie möglicherweise die Knoten unter dem Dokumentknoten (in der Regel Page.xaml) erweitern.

So kopieren Sie Ressourcen in andere Projekte

1. Doppelklicken Sie im Projektpanel auf die Datei App.xaml, um sie auf der Zeichenfläche zu öffnen.

2. Die Datei App.xaml kann nicht in der Designansicht angezeigt werden. Wählen Sie deshalb die Registerkarte XAML auf der rechten Seite der Zeichenfläche aus.

3. Ressourcen werden zwischen <Application.Resources>-Tags definiert.

   <Application.Resources>
   </Application.Resources>
   

   Zwischen diesen Tags werden die Eigenschaftenressourcen in Tags definiert, die den zugehörigen Eigenschaftentyp bezeichnen. Das Key-Attribut steht für den Namen, den Sie der Ressource gegeben haben.

     <FontFamily x:Key="ApplicationFont">Segoe UI</FontFamily>
     <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
       <GradientStop Color="#FF000000"/>
       <GradientStop Color="#FFC64545" Offset="1"/>
     </LinearGradientBrush>
   

   Vorlagen werden zwischen <Style>-Tags definiert. Das Key-Attribut steht für den Namen, den Sie der Vorlage gegeben haben.

     <Style x:Key="ImageButton" TargetType="Button">
       <Setter Property="Background" Value="#FF1F3B53"/>
       <Setter Property="Template">
         ...
       </Setter>
     </Style>
   

4. Markieren Sie den XAML-Code, der die Ressourcen darstellt, die in ein anderes Projekt verschoben werden sollen, und drücken Sie STRG+C, um die Ressourcen zu kopieren.

5. Öffnen Sie das andere Projekt in Expression Blend und die Datei App.xaml in der XAML-Ansicht auf der Zeichenfläche. Platzieren Sie den Zeiger direkt hinter dem <Application.Resources>-Tag, und drücken Sie dann STRG+V, um die Ressourcen einzufügen.

6. Achten Sie darauf, dass keine Schlüsselnamen verwendet werden, die schon in bereits vorhandenen Ressourcen verwendet wurden.

7. Erstellen Sie das Projekt (STRG+UMSCHALTTASTE+B), um sicherzustellen, dass die neuen Ressourcen ordnungsgemäß kopiert wurden.

   Tipp:
   Alternativ dazu können Sie die gesamte Datei App.xaml in ein neues Projekt kopieren und dann im x:Class-Attribut den Namen in den Namen des neuen Projekts ändern. <Application xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="ProjectName.App" ...

Nächste Schritte

• In den Videolernprogrammen "Gewusst wie" auf der Expression Community-Website (möglicherweise in englischer Sprache) können Sie sich ansehen, wie ein Steuerelementdesign für eine Schaltfläche und ein Kontrollkästchen erstellt werden.

Siehe auch

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente

Formatierungstipps für einfache WPF-Formatvorlagen