2

記載されているIsCheckedに従って画像コンテンツを設定するControlTemplatesを使用して、これらのToggleButtonを実装しました。画像はPhotoshopで作成されていますが、WPFベクトルとして使用したいと思います。

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

代替テキスト

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

代替テキスト

フォトショップでボタンの画像をデザインしました。次の画像レイヤーがあります。

  • 半透明の形状（エッジボタン用の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>
4

1 に答える 1

1

ExpressionStudioを見てみてください。スイート内の一部のアプリには、フォトショップ形式をインポートする機能があります。

ただし、最悪の場合、Blendでそのような画像を手動で作成することは大したことではありません。

于 2010-02-09T22:38:43.550 に答える