SELFPHP Produktempfehlung
Windows Server 2008	SQL Server 2008	Microsoft Expression

Anpassen von Steuerelementen mit Steuerelementvorlagen
Mit Steuerelementvorlagen stehen Ihnen die umfangreichsten Möglichkeiten zur Anpassung des Designs von Steuerelementen zur Verfügung. In diesen können Sie vollständig das Aussehen eines jeden Steuerelements und sein visuelles Verhalten definieren.

Im folgenden Beispiel werden wir eine Checkbox so gestalten, dass sie ihren Zustand nicht mit gewohntem Häkchen, sondern anhand der Farbe darstellt: Beim Darüberfahren mit der Maus wird die Checkbox rot aufleuchten.

1. Erstellen Sie ein neues WPF-Projekt.
2. Fügen Sie dem LayoutRoot eine neue Checkbox hinzu.
3. Wählen Sie den Menübefehl ObjektlSteuerelementteile bearbeiten (Vorlage)IKopie bearbeiten. Es öffnet sich das gleiche kleine Fenster wie bei der Erstellung einer neuen Formatvorlage. Warum das so ist, wird im Verlaufe dieses Beispiels klar.
4. Vergeben Sie in dem sich öffnenden Fenster keinen Namen für die Formatvorlage, sondern wählen Sie Aufalle Objekte anwenden und dann im Bereich Definieren in die Option Dieses Dokument. Der weiße Hintergrund der Zeichenfläche wird ausgeblendet, und es ist nur noch die Checkbox auf der Zeichenfläche zu sehen.
   
   Abbildung 3.34: Erhöhter Kontrast mit Helle Oberfläche bei der Bearbeitung einer Steuerelementvorlage
   
   
   
   

   Wenn Sie eine Steuerelementvorlage bearbeiten, wird das Steuerelement in Expression Blend aus dem Kontext des Dokuments herausgenommen und separat dargestellt. Häufig resultiert das leider in schwarzer Schrift auf grauem Grund. Schalten Sie bei der Bearbeitung einer Steuerelementvorlage daher über den Menübefehl Werkzeuge/Optionen auf Helle Oberfläche um (siehe Abbildung 3.34).

5. Wechseln Sie zur XAML-Ansicht und betrachten Sie den entstandenen Quelleode. Der entscheidende Teil ist in Listing 3.10 abgebildet. Ersichtlich wird, dass eine Steuerelementvorlage (eng!. control template) eine Eigenschaft namens Template einer Formatvorlage (eng!. style) ist! Daher resultiert auch die Notwendigkeit, bei Erstellung einer Steuerelementvorlage zunächst eine Formatvorlage anlegen zu müssen.
   
   Listing 3.10: Der Quelltext einer Steuerelementvorlage
   

   <Style TargetType="{x:Type CheckBox}">
   <Setter Property="Foreground" Value="{DynamicResource {x:Static
   SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
   <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
   <Setter Property="BorderThickness" Value="l"/>
   <Setter Property="FocusVisualStyle" Value="{StaticResource
   EmptyCheckBoxFocusVisual}"/>
   <Setter Property="Template">
   <Setter.Value>
   <ControlTemplate TargetType="{x:Type CheckBox}">
   <BulletDecorator SnapsToDevicePixels="true" Background="Transparent">
   <BulletDecorator.Bullet>
   <Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding
   Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding
   IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}"
   RenderPressed="{TemplateBinding IsPressed}"/>
   </BulletDecorator.Bullet>
   <ContentPresenter SnapsToDevicePixels="{TemplateBinding
   SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
   Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding
   VerticalContentAlignment}" RecognizesAccessKey="True"/>
   </BulletDecorator>
   <ControlTemplate.Triggers>
   <Trigger Property="HasContent" Value="true">
   <Setter Property="FocusVisualStyle" Value="{StaticResource
   CheckRadioFocusVisual}"/>
   <Setter Property="Padding" Value="4,0,0,0"/>
   </Trigger>
   <Trigger Property="IsEnabled" Value="false">
   <Setter Property="Foreground" Value="{DynamicResource {x:Static
   SystemColors.GrayTextBrushKey}}"/>
   </Trigger>
   </ControlTemplate.Triggers>
   </ControlTemplate>
   </Setter.Value>
   </Setter>
   </Style>

   Mit der Taste [F4] blenden Sie in Expression Blend auf einen Schlag alle Panels aus und geben der Zeichenfläche bzw. der Code-Ansicht maximalen Platz. In der Praxis findet die Taste häufig Verwendung.
6. Wechseln Sie zurück zur Design-Ansicht von Expression Blend. Im Bereich Objekte und Zeitachsen finden Sie alle Elemente, die die Darstellung des Steuerelernents ergeben. Das sind im Einzelnen: das Häkchenfeld und der Text. Ersteres ist in einern Standardsteuerelement über einen Namespace Microsoft_Windaws_ Themes implementiert. Dieser berücksichtigt das Betriebssystem und gibt je nach Zielplattform eine andere Visualisierung aus. Der zweite Bestandteil ist der Text, der in Form eines ContentPresenters implementiert ist. Dieser stellt einen Container für ein beliebiges Element dar. Das heißt, Sie könnten einer Checkbox nicht nur einen Text verpassen, sondern auch ein Grid und darin wiederum beliebige weitere Steuerelernente platzieren.
7. Löschen Sie über Objekte und Zeitachsen das gesamte Häkchenfeld in Form des Elements [BulletChrome]. Das Häkchenfeld verschwindet von der Zeichenfläche.
   
   Abbildung 3.35: Ein Border anstelle eines Häkchens in einer Checkbox-Steuerelementvorlage
   
   
   
   
8. Fügen Sie in das Element <> Bullet ein Steuerelement des Typs Border ein.
9. Ändern Sie die Eigenschaften des Borders wie folgt: Height und Width auf jeweils 15 Pixel, BorderThickness für alle vier Seiten auf 1 Pixel, BorderBrush auf schwarz und als Background einen Farbverlauf. Das Ergebnis könnte aussehen wie in Abbildung 3.35.
   
   

   Das Steuerelement Border ist erheblich vielseitiger als es auf den ersten Blick zu sein scheint. Denn es kann nicht nur ein weiteres Element, zum Beispiel ein Grid mit wiederum weiteren Elementen, beinhalten, sondern im Gegensatz zum Rechteck können Sie jede Ecke in einem anderen Radius abrunden. Dies macht das Border zu einem vielseitigen Gestaltungselement.

10. Klicken Sie auf + Eigenschaft im Interaktionspanel.
11. Ändern Sie den Ereignisauslöser, sodass er Zielelement.IsChecked == True zeigt.
12. Ändern Sie die Hintergrundfarbe des Borders ähnlich der Abbildung 3.36.
    
    Abbildung 3.36: Geänderte Hintergrundfarbe, wenn IsChecked == True
    
    
    
    
13. Wenn Sie jetzt die Anwendung starten, funktioniert die Checkbox bereits erwartungsgemäß. Um dem Benutzer aber mehr Dynamik zu vermitteln, sollten wir ihm Interaktionsmöglichkeit in Form eines MouseOver-Effekts signalisieren.
14. Erzeugen Sie über + Eigenschaft im Interaktionspanel einen weiteren Ereignisauslöser.
15. Stellen Sie als Auslöser Zielelement.lsMouseOver == True ein.
16. Verleihen Sie dem Border anhand des Bitmap-Effekts Schein nach außen einen Leuchteffekt (siehe Abbildung 3.37).
17. Verlassen Sie den Bearbeitungsmodus der Steuerelementvorlage durch Klicken auf den nach oben weisenden Pfeil im Bereich Objekte und Zeitachsen.
18. Ändern Sie den Steuerelementtyp des LayoutRoots von Crid zu StackPanel, indern Sie in Objekte und Zeitachsen mit der rechten Maustaste auf das Grid klicken und Layouttyp ändern/StackPanel wählen.
    
    Abbildung 3.37: Ein Bitmap-Effekt Schein nach außen bei MouseOver
    
    
    
    
19. Selektieren Sie das StackPanel durch Doppelklick, sodass es unter Objekte und Zeitachsen gelb umrandet dargestellt wird. Die Umrandung signalisiert, dass Elemente, die Sie per Doppelklick auf eine der Schaltflächen in der Werkzeugpalette in das Dokument einfügen, innerhalb des umrandeten Elements eingefügt werden.
20. Doppelklicken Sie mehrmals auf die Schaltfläche Checkbox in der Werkzeugpalette. Bei jedem Doppelklick wird eine neue Checkbox in das StackPanel eingefügt. Dadurch dass wir den Layouttyp des LayoutRoots in ein StackPanel geändert haben, werden alle Checkboxen automatisch untereinander aufgereiht.
21. Starten Sie nun die Anwendung. Das Ergebnis können Sie auch der Abbildung 3.38 entnehmen.
    
    Abbildung 3.38: Eine per Steuerelementvorlage angepasste Darstellung einer Checkbox
    
    

Copyright © 2010 Microsoft Deutschland GmbH Alle Rechte vorbehalten.