4

私の以前の会社では、Flash で作成されたグラフィック アセットを使用して Flex を使用して RIA を作成していました。Flash では、さまざまな状態 (ロールオーバー、無効など) に合わせてグラフィックを簡単にレイアウトできました。

現在、Silverlight 3 プロジェクトに取り組んでいます。ロールオーバー、押された状態、および通常の状態を持つボタンのグラフィックスとして機能する必要がある画像がたくさんあります。Visual Studio 2008 または Expression Blend 3 で、視覚状態ごとに異なる画像のボタンを単純に作成する方法がわかりません。

これが私が現在いる場所です。私のボタンは、XAML で次のように定義されています。

<Button Style="{StaticResource MyButton}"/>

スタイルは次のMyButtonように表示されます。

<Style x:Key="MyButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Image Source="/Assets/Graphics/mybtn_up.png" Width="54" Height="24">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver"/>
              <VisualState x:Name="Pressed"/>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Image>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

別のテンプレートを別の状態に割り当てる方法も、現在の状態に基づいて画像のソースを変更する方法もわかりません。どうすればよいですか? また、Silverlight でスタイルがどのように機能するかを説明している適切なドキュメントを知っていれば、それは素晴らしいことです。私が思いついた検索結果はすべてイライラするほど役に立たない.

編集：

次のようなストーリーボードを介して画像を変更する方法を見つけました。

<Style x:Key="MyButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Image Source="/Assets/Graphics/mybtn_up.png" 
               Width="54" Height="24" x:Name="Image">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver">
                <Storyboard Storyboard.TargetName="Image" 
                            Storyboard.TargetProperty="Source">
                  <ObjectAnimationUsingKeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_over.png"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard Storyboard.TargetName="Image" 
                            Storyboard.TargetProperty="Source">
                  <ObjectAnimationUsingKeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_active.png"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Image>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

しかし、これは私には奇妙なやり方のように思えます。これを達成するためのより標準的な方法はありますか？

4

1 に答える 1

3

私がしたことは、誰も参加していないことを考えると、それを行う方法だと思います.これを答えとして受け入れる必要があります.

于 2010-03-27T00:25:16.400 に答える