Un petit rappel concernant les templates et les "états" des contrôles.  J’ai voulu donc créer un bouton très simple. Il s'agit d'un contrôle Button très personnalisé (Une image à gauche, du texte à droite, pas d’arrière plan, ni de bordures sur le bouton, et un rollover changeant l'arrière-plan de notre nouveau contrôle).
Pas encore très à l’aise avec Blend, j’utilise donc son éditeur XAML donc pour écrire mes templates. Voici le code de mon bouton:

<Button Background="Transparent"
        x:Name="btnAddContent"
        Grid.Column="0"
        Style="{StaticResource BtnAddContentStyle}">
     <StackPanel Orientation="Horizontal">
         <Image Source="Images/menu_icon_01.png"
                Margin="0, 0, 5, 0" />
         <TextBlock Text="Add Content"
                    VerticalAlignment="Center"
                    Margin="0" />
    </StackPanel>
</Button>

Mon premier réflexe (pas toujours les meilleurs) est de créer mon template comme celui ci (fonctionnel sur la Beta 1 ) :

<Style TargetType="Button" x:Key="Btn3Style4444">
  <Setter Property="FontSize" Value="10" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="Cursor" Value="Hand" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid x:Name="RootElement">
          <Rectangle x:Name="Background"
                     RadiusY="5"
                     RadiusX="5" Background>
            <Rectangle.Fill>
              <SolidColorBrush x:Name="BackgroundBrush"
                               Color="Transparent" />
            </Rectangle.Fill>
          </Rectangle>
          <ContentPresenter
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            FontSize="{TemplateBinding FontSize}"
            Foreground="{TemplateBinding Foreground}"
            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
            TextAlignment="{TemplateBinding TextAlignment}"
            TextDecorations="{TemplateBinding TextDecorations}"
            TextWrapping="{TemplateBinding TextWrapping}"
            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          />
          <Grid.Resources>
            <Storyboard x:Key="MouseOver State">
              <ColorAnimation
                Duration="0"
                Storyboard.TargetName="BackgroundBrush"
                Storyboard.TargetProperty="Color"
                To="Black"
              />
            </Storyboard>
          </Grid.Resources>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Ce code qui pourtant compile sans problème ne me permettra pas de changer l’état de mon bouton. En effet, en générant un template à partir d’un contrôle existant, je me suis rappelé du Visual State Manager (je ne mets pas de lien sinon, je devrais en mettre trop ;p). Une des nouvelles fonctionnalités de Silverlight 2 Beta 2 qui permet très facilement de skinner ses contrôles.

Mon code précédent deviendra ainsi:

<vsm:Style x:Key="BtnAddContentStyle"
           TargetType="Button">
        <vsm:Setter Property="Foreground" Value="#FFFFFF"/>
        <vsm:Setter Property="Cursor" Value="Arrow"/>
        <vsm:Setter Property="FontSize" Value="10"/>
        <vsm:Setter Property="Template">
          <vsm:Setter.Value>
            <ControlTemplate TargetType="Button">
              <Grid>
                <Grid.Resources>
                <!-- Grid.Resources Here -->
                </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>
                      <ColorAnimation
                            Duration="0"
                            Storyboard.TargetName="Background"
                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                            To="Black" />
                      </Storyboard>
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Rectangle x:Name="Background"
                           RadiusX="4"
                           RadiusY="4"
                           Fill="{TemplateBinding Background}"/>
                <ContentPresenter
                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                  Padding="{TemplateBinding Padding}"
                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                  Margin="4,5,4,4"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  TextAlignment="{TemplateBinding TextAlignment}"
                  TextDecorations="{TemplateBinding TextDecorations}"
                  TextWrapping="{TemplateBinding TextWrapping}"/>
              </Grid>
            </ControlTemplate>
          </vsm:Setter.Value>
        </vsm:Setter>
      </vsm:Style>

Voilà pour le petit rappel.

Bonne soirée et bon skinning!