如何将这些图像切换按钮转换为矢量切换按钮?

当IsChecked=False时,按钮如下所示:

当IsChecked=True时,我只是用另一个PNG替换图像:

我在photoshop中设计了按钮图像。它们具有以下图像层:

• 用于分割线的半透明线
• 偶像
• 正文
• 玻璃反射效果的半透明渐变

    <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>