2

イメージを取得し、「ButtonImageStyle」を定義しました。
これにより、マウスが上にあるときにボタンがフェードインします。

<Style x:Key="ButtonImageStyle" TargetType="Image">
    <Setter Property="Opacity" Value="0.5"/>
    <Style.Triggers>                    
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Opacity" Value="1"/>
        </Trigger>
    </Style.Triggers>
</Style>

また、マウスが押されたときにボタンを少し縮小したいので、Image.Triggers コレクションの EventTriggers を使用して解決しました。これは機能しますが、それを上記のスタイルに抽出して、すべての画像に対して繰り返す必要がないようにする方法がわかりません。

Style.Triggers で EventTriggers を使用しようとすると、そこで TargetName を使用できないことがわかり、代替手段がわかりません。

<Image DockPanel.Dock="Bottom"
       Source="appbar.page.search.png"
       Width="48"
       Height="48"
       Margin="2,0"
       Style="{StaticResource ButtonImageStyle}">
  <Image.RenderTransform>
    <ScaleTransform x:Name="ImageScale"
                    ScaleX="1"
                    ScaleY="1"
                    CenterX="24"
                    CenterY="24" />
  </Image.RenderTransform>
  <Image.Triggers>
    <EventTrigger RoutedEvent="MouseDown">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="ImageScale"
                           Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                           To="0.8"
                           Duration="0:0:0.15"
                           AutoReverse="False" />
          <DoubleAnimation Storyboard.TargetName="ImageScale"
                           Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                           To="0.8"
                           Duration="0:0:0.15"
                           AutoReverse="False" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseUp">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="ImageScale"
                           Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                           To="1.0"
                           Duration="0:0:0.15"
                           AutoReverse="False" />
          <DoubleAnimation Storyboard.TargetName="ImageScale"
                           Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                           To="1.0"
                           Duration="0:0:0.15"
                           AutoReverse="False" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image>

更新:私はこれについて間違った方法で行っている可能性があり
、代わりに Button に ControlTemplate を使用する必要があると考えました:

<Style x:Key="ButtonImageStyle" TargetType="Image">
    <Setter Property="Opacity" Value="0.5"/>
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
    <Style.Triggers>                    
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Opacity" Value="1"/>
        </Trigger>
    </Style.Triggers>
</Style>

<ControlTemplate x:Key="ImageButtonTemplate" TargetType="Button">
        <Image Source="appbar.page.search.png" 
                Width="{TemplateBinding Width}" 
                Height="{TemplateBinding Height}" 
                Stretch="Fill"
                Style="{StaticResource ButtonImageStyle}">
            <Image.Resources>
                <Storyboard x:Key="ShrinkStoryboard">
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                        To="0.8"
                                        Duration="0:0:0.15"
                                        AutoReverse="False"/>
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                        Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                        To="0.8"
                                        Duration="0:0:0.15"
                                        AutoReverse="False"/>
                </Storyboard>
                <Storyboard x:Key="GrowStoryboard">
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                        To="1.0"
                                        Duration="0:0:0.15"
                                        AutoReverse="False"/>
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                        Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                        To="1.0"
                                        Duration="0:0:0.15"
                                        AutoReverse="False"/>
                </Storyboard>
            </Image.Resources>
            <Image.RenderTransform>
                <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" CenterX="1" CenterY="1"/>                         
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="MouseLeftButtonDown">
                    <BeginStoryboard Storyboard="{StaticResource ShrinkStoryboard}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeftButtonUp">
                    <BeginStoryboard Storyboard="{StaticResource GrowStoryboard}"/>
                </EventTrigger>
            </Image.Triggers>
        </Image>
</ControlTemplate>

このバージョンの問題は、画像を押すと縮小さ
れますが、マウス ボタンを離しても元のサイズに戻らないことです。
「MouseUp」と「MouseLeftButtonUp」を使ってみました

更新 2 : 誰かがこれを使用したい場合に備えて、
dbaseman のソリューションに基づいて、イベント トリガーを削除し、

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">                            
        <VisualState x:Name="Pressed" Storyboard="{StaticResource ShrinkStoryboard}"/>
        <VisualState x:Name="MouseOver" Storyboard="{StaticResource GrowStoryboard}"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

魔法のように機能します

4

1 に答える 1

1

これには、ビジュアル ステート システムが最適です。Button コントロールには、Pressed簡単にターゲットにできる組み込みの状態が付属しています。

<ControlTemplate TargetType="Button">
  <Image>
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Pressed">
          <Storyboard Duration="0:0:0.15">
            <DoubleAnimation Storyboard.TargetName="scale"
                             Storyboard.TargetProperty="ScaleX"
                             To="0.5"
                             Duration="0:0:0.15" />
            <DoubleAnimation Storyboard.TargetName="scale"
                             Storyboard.TargetProperty="ScaleY"
                             To="0.5"
                             Duration="0:0:0.15" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MouseOver">
          <Storyboard Duration="0:0:0.15">
            <DoubleAnimation Storyboard.TargetName="scale"
                             Storyboard.TargetProperty="ScaleX"
                             To="1"
                             Duration="0:0:0.15" />
            <DoubleAnimation Storyboard.TargetName="scale"
                             Storyboard.TargetProperty="ScaleY"
                             To="1"
                             Duration="0:0:0.15" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Image.RenderTransform>
      <ScaleTransform ScaleX="1"
                      ScaleY="1"
                      x:Name="scale" />
    </Image.RenderTransform>
  </Image>
</ControlTemplate>
于 2012-11-30T07:20:04.543 に答える