これらの画像トグルボタンをベクトルトグルボタンに変換するにはどうすればよいでしょうか?

Question

IsChecked に従って画像コンテンツを設定する ControlTemplate を使用してこれらの ToggleButtons を実装しました。画像は Photoshop で作成されていますが、WPF ベクターとして必要です。

IsChecked=False の場合、ボタンは次のようになります。

IsChecked=True の場合、画像を別の PNG に置き換えるだけです。

Photoshopでボタン画像をデザインしました。次の画像レイヤーがあります。

• 半透明の形状 (エッジ ボタン用の 2 つの丸い角を持つ正方形)
• 分割線の半透明線
• アイコン
• 文章
• ガラス反射効果のための半透明のグラデーション

これが最も柔軟なデザインではないことは認識しており、同じボタンをベクター形式で表示したいのですが、その方法がわかりません。

ボタンの 1 つからの xaml を次に示します (ボタンの実装方法に関する他の代替案もお気軽に提案してください)。

    <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

式スタジオを見てみてください。スイート内のアプリケーションの一部は、フォトショップ形式をインポートする機能を持っています。

最悪の場合には、手動でBlendで、このような画像を作成することは大したことではない、けれどもます。