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>

更新：我想我可能会以错误的方式解决这个问题
，我应该使用 ControlTemplate 作为 Button 代替：

<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

视觉状态系统最适合于此。PressedButton 控件带有一个可以方便地定位的内置状态。

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