Archive
Archive for février 2010
[SL4] : Implicit Theming
23 février 2010
Laisser un commentaire
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
Catégories :Silverlight, Silverlight 4