Comment transformer ces boutons à bascule d'image en boutons à bascule vectoriels?

Je viens d'implémenter ces ToggleButtons en utilisant ControlTemplates qui définissent le contenu de l'image selon IsChecked. Les images sont faites dans Photoshop, mais je les veux comme vecteurs WPF.Comment transformer ces boutons à bascule d'image en boutons à bascule vectoriels?

Les boutons ressemblent à ceux-ci quand isChecked = False:

alt text http://i46.tinypic.com/2q3rsaw.jpg

Et quand IsChecked = True je remplace simplement l'image avec une autre PNG:

alt text http://i50.tinypic.com/2lu868l.jpg

J'ai conçu les images du bouton dans photoshop. Ils ont les couches d'image suivants:

forme translucide (un carré avec deux coins arrondis pour les boutons de bord)
lignes translucides pour les lignes de division
Icône
texte
gradient translucide pour l'effet de reflet de verre

Je reconnais que ce n'est pas le design le plus flexible et je ratais elle a les mêmes boutons dans une forme vectorielle, mais je n'ai aucune idée sur la façon de le faire.

Voici le XAML d'un des boutons (ne hésitez pas à suggérer d'autres solutions sur la façon de mettre en œuvre les boutons ainsi):

<ControlTemplate x:Key="ResetButtonTemplate" TargetType="{x:Type ToggleButton}"> 
     <Image x:Name="ImageReset" Source="images\button_reset_gray.png"/> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsChecked" Value="False"> 
       <Setter Property="Cursor" Value="Hand" /> 
      </Trigger> 
      <Trigger Property="IsChecked" Value="True"> 
       <Setter TargetName="ImageReset" Property="Source" Value="images\button_reset_red.png"/> 
       <Setter Property="IsEnabled" Value="False" /> 
       <Setter Property="Cursor" Value="Arrow" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 


     <StackPanel Orientation="Horizontal" Margin="20"> 
      <ToggleButton Name="buttonRun" Width="102" Height="102" Template="{StaticResource RunButtonTemplate}" Checked="buttonRun_Checked" /> 
      <ToggleButton Name="buttonPause" Width="102" Height="102" Template="{StaticResource PauseButtonTemplate}" Checked="buttonPause_Checked" /> 
      <ToggleButton Name="buttonReset" Width="102" Height="102" Template="{StaticResource ResetButtonTemplate}" Checked="buttonReset_Checked" /> 
     </StackPanel>

Source

2010-02-09 Padu Merloti