[SL4] : Implicit Theming

Petit article pour vous présenter une nouveauté de Silverlight 4 qui était déjà présente en WPF : l’utilisation des thème implicites.

Actuellement en silverlight vous devez explicitement définir le style d’un élément si vous souhaitez l’appliquer. Ainsi si vous avez définit un style par défaut à vos boutons vous devez à chaque fois définir Style= »{StaticResource NonDuStyle} »…

Ainsi définissons le style suivant que nous donnerons à tous nos boutons de façon implicite. Déclarons le dans app.xaml :

<Style TargetType="Button">
			<Setter Property="Foreground"
					Value="White" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid MinHeight="25"
							  Cursor="Hand">
							<Grid.RowDefinitions>
								<RowDefinition />
								<RowDefinition />
							</Grid.RowDefinitions>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused" />
									<VisualState x:Name="Unfocused" />
								</VisualStateGroup>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal" />
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
																		  Duration="00:00:00.0010000"
																		  Storyboard.TargetName="rectangle"
																		  Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
												<EasingColorKeyFrame KeyTime="00:00:00"
																	 Value="#FFBDC5FC" />
											</ColorAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
																		  Duration="00:00:00.0010000"
																		  Storyboard.TargetName="rectangle"
																		  Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
												<EasingColorKeyFrame KeyTime="00:00:00"
																	 Value="#FF4F65F8" />
											</ColorAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled" />
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle x:Name="rectangle"
									   Fill="#FF9BA8FF"
									   Stroke="#FF0224FF"
									   Grid.RowSpan="2" />
							<Rectangle StrokeThickness="0"
									   Margin="1,1,1,0">
								<Rectangle.Fill>
									<LinearGradientBrush EndPoint="0.5,1"
														 StartPoint="0.5,0">
										<GradientStop Color="#59FFFFFF"
													  Offset="0" />
										<GradientStop Color="#26FFFFFF"
													  Offset="1" />
									</LinearGradientBrush>
								</Rectangle.Fill>
							</Rectangle>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
											  Margin="3"
											  Grid.RowSpan="2" />
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

Ainsi vous n’avez plus qu’à poser vos boutons dans vos controles et ceux ci appraitron « stylés » à l’image du style par défaut définit pour vos boutons plus haut !

<UserControl x:Class="ImplicitTheming.MainPage"
			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

	<Grid x:Name="LayoutRoot"
		  Background="White">
		<StackPanel HorizontalAlignment="Left">
			<Button Content="Bouton 1"
					Margin="5" />
			<Button Content="Bouton 2"
					Margin="5" />
			<Button Content="Bouton 3"
					Margin="5" />
			<Button Content="Bouton 4"
					Margin="5" />
			<Button Content="Bouton 5"
					Margin="5" />
		</StackPanel>
	</Grid>
</UserControl>

Aperçu :

Simple et efficace !

Source de l’exemple ImplicitTheming.zip