Erstellen eines Designs für ein Steuerelement in einem Silverlight 2-Projekt

Sie können die Darstellung von Systemsteuerelementen in Microsoft Silverlight 2 anpassen. Verwenden Sie dazu statische Ressourcen, 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.

Die Ressourcen können in die Datei App.xaml verschoben und dann bei weiteren Projekten ebenfalls in die Datei App.xaml eingefügt werden, wenn die Vorlagen und Ressourcen in anderen Projekten verwendet werden sollen. Indem die Ressourcen in die Datei App.xaml verschoben werden, wird diese ein 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 für Statusänderungen bei Systemsteuerelementen 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 Silverlight 2-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 Ansicht mit den Eigenschaften  des Eigenschaftenpanels die Eigenschaft aus, die Sie wiederverwenden möchten.

   Tipp:
   Mit dem Suchtextfeld im Eigenschaftenpanel können Sie eine Eigenschaft aufgrund der im Eigenschaftennamen vorkommenden Zeichen schnell auffinden. Die Liste mit dem Eigenschaften wird entsprechend dem eingegebenen Text gefiltert. Klicken Sie auf die Schaltfläche Löschen  neben dem Suchtextfeld, um das Eigenschaftenpanel wiederherzustellen.

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

   • Wenn Sie einen Pinsel wiederverwenden möchten, wählen Sie diesen aus, und klicken Sie anschließend auf die Schaltfläche Pinsel in 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 die Schaltfläche Farbe in Ressource konvertieren .

     

   • Wenn Sie einen numerischen oder anderen Werttyp verwenden möchten, klicken Sie auf die Schaltfläche Erweiterte Eigenschaftenoptionen  neben der entsprechenden Eigenschaft 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 Ansicht mit den Eigenschaften  des Eigenschaftenpanels die Eigenschaft aus, die Sie für eine Ressource festlegen möchten.

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

So wenden Sie eine Pinselressource an

1. Wählen Sie in der Ansicht mit den Eigenschaften  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 aus der Objektbibliothek und Zeichnen eines neuen Steuerelements an

1. Öffnen Sie in der Werkzeugpalette die Objektbibliothek .

2. Wählen Sie in der Objektbibliothek auf der Registerkarte Lokal definierter Stil die zuvor erstellte Vorlage aus.

3. Zeichnen Sie mithilfe des Mauszeigers 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 Ansicht mit den Eigenschaften  des Eigenschaftenpanels die Style-Eigenschaft.

3. Klicken Sie neben der Style-Eigenschaft auf die Schaltfläche 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>
   

   Innerhalb dieser 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 die XAML für die Ressourcen, die in ein anderes Projekt verschoben werden sollen, und drücken Sie dann STRG+C, um sie zu kopieren.

5. Öffnen Sie das andere Projekt in Expression Blend und danach die Datei App.xaml in der XAML-Ansicht auf der Zeichenfläche. Platzieren Sie den Mauszeiger 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" ...

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