Comment vous transformer ces images ToggleButtons dans le vecteur ToggleButtons?

Question

Je viens mis en œuvre ces ToggleButtons utilisant ControlTemplates qui définissent le contenu d'image selon IsChecked indiqué. Les images sont faites dans Photoshop, mais je les veux comme vecteurs WPF.

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

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

Je l'ai conçu les images de bouton dans Photoshop. Ils ont les couches d'image suivantes:

• forme translucide (un carré avec deux coins arrondis pour les boutons de bord)
• lignes Translucide pour les lignes de division
• Icône
• Texte
• gradient translucide pour l'effet de réflexe de verre

Je reconnais que ce n'est pas la plus conception flexible et je préfère avoir les mêmes boutons dans une forme vectorielle, mais je ne sais pas 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>

Answer 1

Essayez de regarder Expression Studio. Certaines des applications de la suite ont la capacité d'importer des formats Photoshop.

Bien que, dans le pire des cas, la création manuelle de ces images dans le mélange est pas une grosse affaire.