title: How to you transform these image togglebuttons into vector togglebuttons?
body: <p>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.</p>
  
  <p>The buttons look like these when IsChecked=False:</p>
  
  <p><a href="https://i.stack.imgur.com/bHyIA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bHyIA.jpg" alt="alt text"></a>
  </p>
  
  <p>And when IsChecked=True I just replace the Image with another PNG:</p>
  
  <p><a href="https://i.stack.imgur.com/Qz4ul.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qz4ul.jpg" alt="alt text"></a>
  </p>
  
  <p>I've designed the button images in photoshop. They have the following image layers: <br /></p>
  
  <ul>
  <li>Translucent shape (a square with two round corners for the edge buttons)</li>
  <li>Translucent lines for division lines</li>
  <li>Icon</li>
  <li>Text </li>
  <li>Translucent gradient for the glass reflex effect</li>
  </ul>
  
  <p>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.</p>
  
  <p>Here's the xaml from one of the buttons (feel free to suggest other alternatives on how to implement the buttons as well):</p>
  
  <pre><code>    &lt;ControlTemplate x:Key="ResetButtonTemplate" TargetType="{x:Type ToggleButton}"&gt;
          &lt;Image x:Name="ImageReset" Source="images\button_reset_gray.png"/&gt;
          &lt;ControlTemplate.Triggers&gt;
              &lt;Trigger Property="IsChecked" Value="False"&gt;
                  &lt;Setter Property="Cursor" Value="Hand" /&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsChecked" Value="True"&gt;
                  &lt;Setter TargetName="ImageReset" Property="Source" Value="images\button_reset_red.png"/&gt;
                  &lt;Setter Property="IsEnabled" Value="False" /&gt;
                  &lt;Setter Property="Cursor" Value="Arrow" /&gt;
              &lt;/Trigger&gt;
          &lt;/ControlTemplate.Triggers&gt;
      &lt;/ControlTemplate&gt;
  
  
          &lt;StackPanel Orientation="Horizontal" Margin="20"&gt;
              &lt;ToggleButton Name="buttonRun" Width="102" Height="102" Template="{StaticResource RunButtonTemplate}" Checked="buttonRun_Checked" /&gt;
              &lt;ToggleButton Name="buttonPause" Width="102" Height="102" Template="{StaticResource PauseButtonTemplate}" Checked="buttonPause_Checked" /&gt;
              &lt;ToggleButton Name="buttonReset" Width="102" Height="102" Template="{StaticResource ResetButtonTemplate}" Checked="buttonReset_Checked" /&gt;
          &lt;/StackPanel&gt;
  </code></pre>