Mit XAML kann man recht einfach Controls auf seine Web oder Windows Anwendung zaubern. Der Unterschied zu klassischen Winforms Anwendungen ist das dank Templating das Erscheinungsbild weitestgehend verändert werden kann. Ich will das einmal anhand des Sliders zeigen. Mit wenig XAML Code
<Slider Width="200"></Slider>
erzeugt man einen netten Schieberegler
Man beachte den “Schieber”. Dieser ist grau oder silber und hat einen Farbverlauf. Wenn man nun die Eigenschaft “background” auf Red setzt würde man erwarten, das dann zumindest irgendwas Rot wird. Höchstens der Kopf des Entwicklers aus lauter Ärger über… lassen wir das.
Der Grund dafür ist das, ein Slider eigentlich ein Control ist das aus anderen Controls zusammengesetzt ist. Und das kann man wieder rückgängig machen. Am besten mit Expression Blend 2.0 Sp1.
Wenn man das macht entsteht eine Menge XAML Code. Dieser behinhaltet ein Template für die horizontale und vertikale Darstellung des Sliders.
Unser Ziel der Begierde ist das HorizontalThumb Element, das man nun auch in der Tat rot färben kann. Dazu wählt man dieses in Blend aus, so das es grau markiert ist und setzt dann die Background Farbe auf Rot. Aber das Ergbebnis ist nicht so richtig rot
Ein roter Verlauf ziert nun unseren Silder Thumb. Auch HorizontalThumb is ein zusammen gesetztes Control und kann wieder zerlegt werden. Rechtsclick auf Horizontalthumb- Edit Control Parts- Edit a Copy und man erzeugt das Template.
Wenn man nun BackgroundGradient auswählt, kann man in der Tat den Slider Thumb auf gefüllt rot setzen.
Ein Blick in den XAML Code offenbart die Logik dazu
<Slider Width="200" Foreground="red" BorderBrush="#FFE90F0F"
x:Name="mySilder" Style="{StaticResource SliderStyle1}"/>
Die Style Anweisungen sind nun in eine statische Ressource ausgelagert.
<UserControl.Resources>
<Style x:Key="SliderStyle1" TargetType="Slider">
...
<Thumb Background="#FFF91104" Height="18" x:Name="HorizontalThumb"
Style="{StaticResource ThumbStyle1}" Width="11" IsTabStop="True"
Grid.Column="1"/>
Dort wiederum findet sich nun das Thumb Control, dessen Style auch wieder in eine Ressource ausgelagert ist.
<Style x:Key="ThumbStyle1" TargetType="Thumb">
...
<Rectangle x:Name="BackgroundGradient" Fill="#FFF70B0B"/>