Question

我有一个Image并为它定义了一个“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>

像魅力一样工作

Answer 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>

如何将Image.Triggers的以下xaml提取到WPF中的样式

1 个答案: