How to you transform these image togglebuttons into vector togglebuttons?

Question

Hello,

I have just implemented these ToggleButtons using ControlTemplates that set the Image content according to IsChecked stated. The images are made in Photoshop, but I want them as WPF vectors.

The buttons look like these when IsChecked=False:

And when IsChecked=True I just replace the Image with another PNG:

I've designed the button images in photoshop. They have the following image layers:

• Translucent shape (a square with two round corners for the edge buttons)
• Translucent lines for division lines
• Icon
• Text
• Translucent gradient for the glass reflex effect

I recognize that this is not the most flexible design and I'd rather have the same buttons in a vector form, but I have no idea on how to do it.

Here's the xaml from one of the buttons (feel free to suggest other alternatives on how to implement the buttons as well):

    <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

Try to look at Expression Studio. Some of the apps in the suite have ability to import photoshop formats.

Although, in the worst case, manually creating such images in Blend is not a big deal.