Toujours dans le même thème que mes précédents posts ( et ), je continuais mes utilisations des templates avec Silverlight. L'idée est de pouvoir créer un template modèle pour plusieurs contrôles de même type (En résumé, créer un thème).
Dans mon projet, je dispose de 5 boutons (voici un extrait de 2 boutons).

<Button Grid.Column="0"
x:Name="btnFirst"
Style="{StaticResource BtnStyle}"
Width="30"
HorizontalAlignment="Left"
Margin="0 2 0 2">
<Image Source="../Images/Controls/btnFirst.png" Height="15" Width="15" />
</Button>

<Button Grid.Column="1"
x:Name="btnFastRewind"
Style="{StaticResource BtnStyle}"
Width="30"
HorizontalAlignment="Left"
Margin="0 2 0 2">
<Image Source="../Images/Controls/btnFastRewind.png" Height="15" Width="15" />
</Button>



Voici le style que j'utilise (un peu similaire que ceux de mes précédents billets) :

<UserControl.Resources>
<vsm:Style x:Key="BtnStyle" TargetType="Button">
<vsm:Setter Property="Cursor" Value="Arrow"/>
<vsm:Setter Property="Background" Value="Transparent"/>
<vsm:Setter Property="Template">
<vsm:Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="BorderBrush" Color="#FFFFFF"/>
</Grid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition Duration="0:0:0.3" To="MouseOver"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard x:Name="MouseOverAnimation" >
<ColorAnimation
BeginTime="00:00:00"
Duration="0"
RepeatBehavior="Forever" AutoReverse="True"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
To="#444444" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed"/>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

<Rectangle x:Name="Background"
Fill="{TemplateBinding Background}"
RadiusX="4" RadiusY="4"/>
<Rectangle x:Name="BackgroundGradient"
Stroke="{StaticResource BorderBrush}"
StrokeThickness="1" RadiusX="4" RadiusY="4"/>

<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>
</ControlTemplate>
</vsm:Setter.Value>
</vsm:Setter>
</vsm:Style>
</UserControl.Resources>


Tout compile correctement, mais, le menu n'a pas le comportement que j'attends. En effet, avec ce code, quand on survole mes 2 premiers boutons, le changement d'état n'opère pas, puis (sous Firefox en tout cas), la couleur de Background reste active après avoir effectué un premier clic !

Après avoir posé la question sur les forums Silverlight, j'ai été éclairé sur les raisons de ce mauvais fonctionnement... Je cite :

[...] you need to set Background in your Button xaml because you rely on the TemplateBinding for the Rectangle.Fill property which can be any kind of Brush. So you'd better initialize it with Solid color Brush. Otherwise, the animation does not find the target. [...]

La solution se trouve donc dans le forum. ça me laisse cependant un peu perplexe, car j'étais pourtant sûr qu'en initialisant la propriété Fill du Rectangle (bindé à la propriété Background au début de mon style), au moins un type de Brush était initialisé... Je reviendrai cependant là dessus... (Sauf si vous avez une réponse supplémentaire :-) ).

Voilà!

A +